我需要为父剑道网格创建 2 个子剑道网格。我知道我可以使用DetailInit 创建一个剑道网格,并继续使用该方法来实现更多层次的层次结构。但我需要解决的问题是将两个子网格作为兄弟网格。
因此,结构需要如下所示:
父网格 1
子网格 1
子网格 2
父网格2
子网格 1
子网格 2
我不知道该怎么做。我在想,我可以有某种带有 2 个 div 的详细模板,并为每个 div 添加一个剑道网格。或者我可以在第一个剑道网格的末尾添加一个虚拟行,并使用该空间与第二个子网格创建一个 div,尽管这看起来很疯狂。 有人遇到过类似的问题吗?
我尝试过类似的方法,但似乎不起作用。
<script id="detail-template">
<div id="subgrid1"></div>
<div id="subgrid2"></div>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
detailTemplate: kendo.template($("#detail-template").html()),
dataBound: function() {
$("#subgrid1").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
$("#subgrid2").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
}
});
</script>
最佳答案
您需要更改两件事:
不要使用id
来查找详细网格。 id
必须是全局唯一的,并且详细信息网格在每个详细信息模板中都重复。请改用class
。
<script id="detail-template">
<div class="subgrid1"></div>
<div class="subgrid2"></div>
</script>
在 detailInit
事件期间初始化详细信息网格,而不是 dataBound。后者仅被触发一次 - 当主网格被绑定(bind)时。
detailInit: function(e) {
e.detailCell.find(".subgrid1").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
e.detailCell.find(".subgrid2").kendoGrid({
columns: [
{ field: "age" },
{ field: "name" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
},
这是一个live working demo .
关于jquery - 在同一级别创建 2 个子剑道网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28727974/