1

展開/折りたたみ機能の実装を手伝ってくれる人はいますか?

[展開] ボタンをクリックすると、対応するレコードの関連データを取得し、それを子行として表示する必要があります。

grid.Column(header: "Expand", 
    format: @<text>
        <a href='#' class="expandable-open-button" rel="1" >&gt;</a> 
        <div class="expandable-child-row"></div> 
     </text>)

jQueryの使用を考えています。「展開」リンクをクリックすると、データベースからデータを取得し、webgrid html を要素に設定できます。

4

1 に答える 1

1

JQuerynextを使用して「子」要素 (実際には兄弟要素) を選択します。要素をslideToggle展開するには:

// add the click handler
$(".expandable-open-button").on("click", function(e) {

    // prevent the default action on the link
    e.preventDefault();

    // select the details row and toggle its visibility
    $(this).next(".expandable-child-row").slideToggle();
});

編集データ属性としてマークアップに追加することで、アイテム ID を渡すことができます。

format: (item) => @<text><a data-id='@item.ID'>

次にattr、JQuery で使用して取得します。

.on("click", function(e) {

    var id = $(this).attr("data-id");   
    alert(id);
... }
于 2012-10-18T20:04:08.740 に答える