大纲-细节剑道 UI 网格(在主网格中选择行时，获取详细信息网格中的条目）
Master-detail kendo ui grid (when select row in master grid get entries in details grid)
我正在使用主细节剑道UI网格，它是分开的。主网格位于 tabstrip 1 （tabstrip.select（0）） 内。用于添加/编辑的字段（用于主网格）位于首页的选项卡栏 2 （tabstrip.select（1）） 内。在选项卡栏 2 中，我嵌套了详细信息网格的选项卡条（在中间底部页面中）。详细信息网格位于嵌套的选项卡栏 1 （tabstripNested.select（0）） 中，用于添加/编辑的字段位于嵌套的选项卡栏 2 （tabstripNested.select（1）） 中。我想要什么？当我在主网格中选择在详细信息网格中显示适当条目的某些行时，我希望这样做。这是我的主数据源：
var masterDataSource = new kendo.data.DataSource({
data: [
{ Id: 1, fieldMaster1: "10236", fieldMaster2: "20.01.2015", fieldMaster3: "24.01.2015", fieldMaster4: 1900.0, fieldMaster5: 1900.0, fieldMaster6: 0.0, fieldMaster7: "someth", fieldMaster8: "test" },
{ Id: 2, fieldMaster1: "10648", fieldMaster2: "26.01.2015", fieldMaster3: "28.01.2015", fieldMaster4: 7990.0, fieldMaster5: 7990.0, fieldMaster6: 0.0, fieldMaster7: "skafiskafnjak", fieldMaster8: "test 2" },
{ Id: 3, fieldMaster1: "10700", fieldMaster2: "22.01.2015", fieldMaster3: "25.01.2015", fieldMaster4: 2720.0, fieldMaster5: 2720.0, fieldMaster6: 0.0, fieldMaster7: "temp", fieldMaster8: "test 3" },
{ Id: 4, fieldMaster1: "10810", fieldMaster2: "24.01.2015", fieldMaster3: "27.01.2015", fieldMaster4: 0.0, fieldMaster5: 0.0, fieldMaster6: 0.0, fieldMaster7: "hlabuka", fieldMaster8: "test 4" },
{ Id: 5, fieldMaster1: "10101", fieldMaster2: "29.01.2015", fieldMaster3: "30.01.2015", fieldMaster4: 0.0, fieldMaster5: 0.0, fieldMaster6: 0.0, fieldMaster7: "descr", fieldMaster8: "test 5" },
{ Id: 6, fieldMaster1: "10364", fieldMaster2: "25.01.2015", fieldMaster3: "31.01.2015", fieldMaster4: 0.0, fieldMaster5: 0.0, fieldMaster6: 0.0, fieldMaster7: "TestNova", fieldMaster8: "" }
],
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
fieldMaster1: { type: "string" },
fieldMaster2: { type: "string" },
fieldMaster3: { type: "string" },
fieldMaster4: { type: "number" },
fieldMaster5: { type: "number" },
fieldMaster6: { type: "number" },
fieldMaster7: { type: "string" },
fieldMaster8: { type: "string" }
}
}
}
});
这是我的主网格：
var gridMaster = $("#gridMaster").kendoGrid({
columns: [
{ field: "Id", hidden: true },
{ field: "fieldMaster1", width: "50px" },
{ field: "fieldMaster2", width: "77px" },
{ field: "fieldMaster3", width: "70px" },
{ field: "fieldMaster4", hidden: true },
{ field: "fieldMaster5", width: "170px" },
{ field: "fieldMaster6", hidden: true },
{ field: "fieldMaster7", width: "80px" },
{ field: "fieldMaster8", width: "80px" }
],
dataSource: masterDataSource,
selectable: true,
filterable: true,
scrollable: true,
pageable: {
pageSize: 16
},
toolbar: [{
name: "create"
}]
});
这是我的详细信息数据源：
var detailsDataSource = new kendo.data.DataSource({
data: [
{ Id: 1, masterDataId: 1, fieldDetails1: "20.01.2015", fieldDetails2: "096680", fieldDetails3: "descr1", fieldDetails4: 1000.00, fieldDetails5: 1000.00, fieldDetails6: "ETF", fieldDetails7: "entry1", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
{ Id: 2, masterDataId: 1, fieldDetails1: "26.01.2015", fieldDetails2: "100258", fieldDetails3: "descr2", fieldDetails4: 900.00, fieldDetails5: 900.00, fieldDetails6: "TMP", fieldDetails7: "entry2", fieldDetails8: "tmp2", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
{ Id: 3, masterDataId: 2, fieldDetails1: "22.01.2015", fieldDetails2: "122554", fieldDetails3: "descr3", fieldDetails4: 970.00, fieldDetails5: 970.00, fieldDetails6: "TMP", fieldDetails7: "entry3", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
{ Id: 4, masterDataId: 3, fieldDetails1: "24.01.2015", fieldDetails2: "200148", fieldDetails3: "descr4", fieldDetails4: 2000.00, fieldDetails5: 2000.00, fieldDetails6: "ETF", fieldDetails7: "entry1", fieldDetails8: "tmp2", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
{ Id: 5, masterDataId: 2, fieldDetails1: "29.01.2015", fieldDetails2: "344688", fieldDetails3: "descr5", fieldDetails4: 1970.00, fieldDetails5: 1970.00, fieldDetails6: "TMP", fieldDetails7: "entry3", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
{ Id: 6, masterDataId: 2, fieldDetails1: "25.01.2015", fieldDetails2: "188366", fieldDetails3: "descr", fieldDetails4: 2250.00, fieldDetails5: 2250.00, fieldDetails6: "TMP", fieldDetails7: "entry2", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
{ Id: 7, masterDataId: 3, fieldDetails1: "24.01.2015", fieldDetails2: "264486", fieldDetails3: "descr1", fieldDetails4: 720.00, fieldDetails5: 720.00, fieldDetails6: "ETF", fieldDetails7: "entry2", fieldDetails8: "tmp", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 },
{ Id: 8, masterDataId: 2, fieldDetails1: "30.01.2015", fieldDetails2: "400822", fieldDetails3: "descr", fieldDetails4: 2800.00, fieldDetails5: 2800.00, fieldDetails6: "ETF", fieldDetails7: "entry1", fieldDetails8: "tmp2", fieldDetails9: "20.03.2016", fieldDetails10: "", fieldDetails11: 0.00 }
],
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
masterDataId: { type: "number" },
fieldDetails1: { type: "string" },
fieldDetails2: { type: "string" },
fieldDetails3: { type: "string" },
fieldDetails4: { type: "number" },
fieldDetails5: { type: "number" },
fieldDetails6: { type: "string" },
fieldDetails7: { type: "string" },
fieldDetails8: { type: "string" },
fieldDetails9: { type: "string" },
fieldDetails10: { type: "string" },
fieldDetails11: { type: "number" }
}
}
}
});
这是我的详细信息网格：
var gridDetails = $("#gridDetails").kendoGrid({
columns: [
{ field: "Id", hidden: true },
{ field: "masterDataId", hidden: true },
{ field: "fieldDetails1", width: "70px" },
{ field: "fieldDetails2", width: "65px" },
{ field: "fieldDetails3", width: "170px" },
{ field: "fieldDetails4", width: "80px" },
{ field: "fieldDetails5", width: "80px" },
{ field: "fieldDetails6", width: "90px" },
{ field: "fieldDetails7", width: "120px" },
{ field: "fieldDetails8", hidden: true },
{ field: "fieldDetails9", hidden: true },
{ field: "fieldDetails10", hidden: true },
{ field: "fieldDetails11", hidden: true }
],
dataSource: detailsDataSource,
selectable: true,
filterable: true,
scrollable: true,
pageable: {
pageSize: 10
},
toolbar: [{
name: "create",
text: "Add New"
}],
height: 205
});
details数据源具有 masterDataId 字段，该字段等于 masterDataSource 中的 Id。因此，当我在主网格中选择某些行时，我需要显示详细信息网格中的相应记录。例如：当我在主网格中选择第一行时，我需要显示详细信息网格中的前两条记录（masterDataId = 1）。如果我在主网格中选择第二行，我需要显示详细信息网格中的第三、第五、第六和第八行（masterDataId = 2）。实现这一点的最佳方法是什么？任何帮助表示赞赏。提前谢谢你。
我不确定我是否 100% 正确，但我根据您的情况做了一个简单的例子。关键是，当您change主网格的选定行时，您必须筛选详细信息网格，例如：
change: function() {
var gridDetails = $("#grid-detail").data("kendoGrid");
var dataItem = this.dataItem(this.select());
gridDetails.dataSource.filter({ field: "parentId", value: dataItem.id, operator: "eq" });
}
演示
相关文章：
- 如何在JqWidgets网格中获取所有未选中行索引的列表
- 如何使用jquery在网格视图中获取所选单选按钮的值
- 获取网格视图行中对象的类型
- 通过ID获取声明性dojo数据网格
- 如何获取网格格式的表中的下拉选定值
- 剑道网格:在Angular指令中获取一个实例
- jqGrid-如何获取当前网格的标题
- 剑道网格:如何在与Angular一起使用时从组合框单元格模板中获取所选项目
- 剑道网格 - 获取当前编辑行
- 如何使用Wijmo Flex网格获取选定的行值
- 光滑网格 - 获取选定的单元格值，ID和字段
- 如何通过双击从剑道网格获取行 ID
- 剑道网格获取列值数据的最大长度
- 从数据网格获取行数据的更好方法
- 剑道UI网格:获取当前分组状态的数据
- 剑道网格获取行和列索引更改事件
- Wijmo网格.获取具有匹配Id的行的行号
- 我如何在智能客户端从网格获取数据
- asp.net mvc-Kendo UI网格获取Javascript中的Cell值
- 从主网格获取数据以填充子网格
