我正在尝试使用 KendoUi Grid 小部件完成以下任务:
- 显示分层网格 - 完成
- 添加自定义工具栏按钮，用于将详细信息项添加到特定行 - 完成
- 按下自定义按钮后，展开详细信息网格并添加项目。
这一切都在添加项目之前完成(即单击“添加项目”按钮会展开详细信息网格)。但是，如果我尝试在detailExpand函数中添加该项目，则详细信息网格会自动折叠。 我尝试过更改扩展\添加顺序的各种变体，但似乎没有任何效果正常。
<body>
<div id="example" class="k-content">
<div id="grid"></div>
</div>
</body>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: [
{Name: "first", Items: []},
{Name: "second", Items: []}
],
schema: {
model: {
fields: {
Name: { type: "string" }
}
}
},
pageSize: 20
},
height: 430,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
detailInit: detailInit,
detailExpand: detailExpand,
columns: [
{ field: "Name", title: "Name", width: "130px" },
{ command: [
{name: "edit"},
{name: "destroy"},
{ text: "Add item", click: addItem }],
title: " ", width: "172px" }
],
editable: "inline",
toolbar: ["create"]
});
});
var addItemNow = false;
function addItem(e) {
var row = $(e.currentTarget).closest("tr");
addItemNow = true;
var grid = $("#grid").data("kendoGrid");
grid.expandRow(row);
};
function detailInit(e) {
$("<div id='detailGrid'/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.Items,
schema: {
model: {
fields: {
Description: { type: "string" }
}
}
}
},
columns: [
{ field: "Description", title: "Description", width: "70px" },
{ command: [
{name: "edit"},
{name: "destroy"}
]}
]});
}
function detailExpand(e) {
var grid = e.detailRow.find("#detailGrid").data("kendoGrid");
if(addItemNow)
{
addItemNow = false;
grid.dataSource.add({Description: ""});
}
}
这是一个 jfiddle 显示此 jfiddle
最佳答案
请看一下这个JSBin查看如何添加嵌套网格子行。 “添加新行”按钮保留在子网格上，而不是主行上。
只要我知道您是否在主行上进行更改或执行任何操作，所有详细信息都会自动折叠。
关于jquery - 在kendo ui网格中添加详细项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23430894/