javascript - 階層グリッドでネストされたKendo UIデータソースのデータをフィルターする方法

原文 javascript jquery kendo-ui

階層グリッドでネストされたKendo UIデータソースのデータをフィルターする方法
以下はデータソースです:

Obj1{"Name":"abc","id":1 ,Obj2 {{"Name":"A1","oid":1},{"Name":"A2","oid":2}}


詳細グリッドに表示されるObj2名を検索する必要があります。
助けてください。
答え
データでviewModelとデータソースを準備します

$(document).ready(function () {
var viewModel = kendo.observable({
    //here define a datasource - i followed your data with improv
    datasource: new kendo.data.DataSource({
        data: [{
            name: 'abc',
            id: 1,
            obj2: [{
                name: 'a1',
                oid: 1
            }, {
                name: 'b1',
                oid: 2
            }, {
                name: 'c1',
                oid: 3
            }]
        }, {
            name: 'def',
            id: 4,
            obj2: [{
                name: 'd1',
                oid: 4
            }, {
                name: 'e1',
                oid: 5
            }]
        }, {
            name: 'ghi',
            id: 3,
            obj2: [{
                name: 'g1',
                oid: 6
            }, {
                name: 'h1',
                oid: 7
            }]
        }]
    }),
    //define the function when we want to click the expand button
    detail: function (e) {
        //bind it now
        kendo.bind(e.detailCell, e.data);
    }
});

//1 st bind container with the kendo observable
kendo.bind('#container', viewModel);

//grab the grid and bind its 'detailInit' event with our 'detail' function
var grid = $('#grid').getKendoGrid();
grid.bind('detailInit', viewModel.detail);


});

そして、htmlグリッドと詳細グリッドのテンプレートを準備します

<div id="container">
    <br/>
    <br/>
    <div id="grid" data-role="grid" data-bind="source: datasource" data-detail-template="child-template" data-columns="[
            { field: 'name' },
            { field: 'id' },
        ]"></div>
</div>
<script id="child-template" type="text/x-kendo-template">
    <div data-role = "grid"
    data-bind = "source: obj2"
    data-columns = "[
    { field: 'name' },
    { field: 'oid' }
    ]"> </div>
</script>


そして最後に、これはjsfiddleであり、このtutorialはそれを行う方法を教えてくれます

編集:私は各詳細グリッドの上にドロップダウンを追加するので、そこからそれらをフィルタリングでき、これがjsfiddleです
関連記事

javascript - SQLローカルデータベースに値を挿入し、JavaScriptを使用してテーブルデータを印刷する

javascript - Win7でIE11を使用したJavascriptランタイムエラー:未定義またはnull参照のプロパティ 'disabled'を設定できません

javascript - JavaScriptを使用して.configファイルから値を読み取る

javascript - ウォーターラインMongoDb(移入済み)でフェッチされたオブジェクトは、その型とプロトタイプ関数を失います

javascript - DIVにプッシュした後のスクリプトの実行

javascript - AngularJS UIルーターのリロードが機能しない

javascript - mouseleaveでキャンバスの上にインタラクティブボックスを配置する

javascript - jQueryでの背景画像の移行に関する問題

javascript - JavaScriptでnullエラーのプロパティ 'addEventListener'を読み取れません[重複]

javascript - JavaScript(Angularフレームワーク)を使用してzipファイルをAmazon S3にアップロードするにはどうすればよいですか?