在同一级别创建 2 个子剑道网格
Posted
技术标签:
【中文标题】在同一级别创建 2 个子剑道网格【英文标题】:Creating 2 child kendo grids at the same level 【发布时间】:2015-04-27 23:24:35 【问题描述】:我需要为父剑道网格创建 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>
【问题讨论】:
你是说你想要像 this 这样的东西,但是有 2 个子网格而不是示例中显示的 1 个子网格? 是的。这就是要求。 【参考方案1】:你需要改变两件事:
不要使用id
来查找详细信息网格。 id
必须是全局唯一的,并且在每个详细信息模板中都复制了详细信息网格。请改用class
。
<script id="detail-template">
<div class="subgrid1"></div>
<div class="subgrid2"></div>
</script>
在detailInit
事件而不是dataBound 期间初始化详细信息网格。后者只触发一次 - 当主网格被绑定时。
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。
【讨论】:
以上是关于在同一级别创建 2 个子剑道网格的主要内容,如果未能解决你的问题,请参考以下文章