如何在层次结构网格中过滤嵌套 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 - 如何在层次结构网格中过滤嵌套 Kendo UI 数据源的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30539034/