2

一意の識別子を持つ剣道グリッドがあり、行をクリックすると、2 番目のグリッドに詳細が表示されます。両方のデータセットは、データベースにリンクする php ファイルから取り込まれます。したがって、2 番目のグリッドには、その一意の識別子のすべての詳細が表示されます。

最初のグリッド:

$(document).ready(function() {
                $("#grid").kendoGrid({
                    dataSource: {
                      pageSize: 100,
                        transport: {
                            read: "http://localhost:8888/stationslist.php",
                            dataType: "json"
                        },
                        schema: {
                            data: "data",
                            total: function(response) {
                                return $(response.data).length;
                                }
                            } 
                            },


                    selectable: "single",
                    sortable: {
                        mode: "multiple",
                        allowUnsort: true
                    },
                    change: function (arg) {
                        var selected = $.map(this.select(), function (item) {
                            return $(item).find('td').first().text();
                            });
                          }

2 番目のグリッド:

$(document).ready(function() {
                $("#grid2").kendoGrid({
                    dataSource: {
                      pageSize: 100,
                        transport: {
                            read: "http://localhost:8888/spots.php",
                            dataType: "json"
                        },
                        schema: {
                            data: "data",
                            total: function(response) {
                                return $(response.data).length;
                                }
                            } 
                            }
4

1 に答える 1

1

change最初のハンドラーを次のように実装gridします。

change    : function (e) {
    var item = this.dataItem(this.select());
    populateGrid2(item);
}

選択した行からすべての情報を取得しitem(その複雑な は必要ありません$.map)、2 番目の を設定するために 2 番目の関数を呼び出しgridます。

grid1 つの raw が選択されるたびに再作成するのではなく、再設定することを検討する必要があります。その場合、次のように初期化grid2します。

$("#grid2").kendoGrid({
    dataSource : {
        pageSize : 100,
        transport: {
            read        : {
                url     : "http://localhost:8888/spots.php",
                dataType: "json"
            },
            parameterMap: function (arg, op) {
                if (op === "read") {
                    return { id: arg.id }
                }
            }
        },
        schema   : {
            data : "data",
            total: function (response) {
                return $(response.data).length;
            }
        }
    },
    autoBind: false
});

自動バインドしないと言ったところで (明示的に言うまでデータを読み取らない) parameterMap、引数を管理するための関数を定義します (をidサーバーに送信します)。

さて、関数populateGrid2は次のとおりです。

function populateGrid2(item) {
    var ds = $("#grid2").data("kendoGrid").dataSource;
    ds.filter({ field: "Identifier", operator: "eq", value: item.Identifier });
}

シンプル、エレガント、効率的！

ここでfilterドキュメントを見つけることができます

于 2013-04-24T08:17:39.000 に答える