假设我有几行数据填充了数字。我想选择多个单元格,然后单击网格外的按钮将它们的值更改为其他数字,比方说“8”。查看sample .
Telerik 的人给了我这个解决方案:
$(".change").click(function () {
var grid = $("#Grid").data("kendoGrid");
var cellsToChange = grid.select();
for (var i = 0; i < cellsToChange.length; i++) {
var item = grid.dataItem($(cellsToChange[i]).closest("tr"));
item.ProductName = "new value";
}
grid.refresh();
});
但问题是我不知道将选择哪些单元格,因此我无法使用 item.ProductName
等。有没有办法直接设置所有选定单元格的值,比如 cellsToChange[i].value
?
最佳答案
您可以从 grid.columns
中获取列名或来自相应的th
元素。使用 grid.cellIndex
选择正确列的方法:
$("#change").click(function() {
var selected = grid.select();
var header = grid.thead;
for (var i = 0, max = selected.length ; i < max ; i++) {
var index = grid.cellIndex(selected[i]);
var th = $(header).find("th").eq(index);
// could also use grid.columns[index].field
// (not sure if this gets reordered on column reorder though)
var field = $(th).data("field");
var item = grid.dataItem($(selected[i]).closest("tr"));
item[field] = "new value";
}
grid.refresh();
});
关于您的评论:
dataItem.set()
导致<tr>
从上下文中删除的元素(因为 grid.refresh()
将为 View 创建新行),因此,grid.dataItem()
使用您仍然引用的旧 DOM 元素不会给您预期的结果。
如果你想使用dataItem.set()
,您可以尝试这样的解决方法:
$("#change").click(function () {
var selected = grid.select(),
header = grid.thead,
dataItem,
index,
field,
value,
th;
for (var i = 0, max = selected.length; i < max; i++) {
dataItem = grid.dataItem($(selected[i]).closest("tr"));
index = $(selected[i]).index();
th = $(header).find("th").eq(index);
field = $(th).data("field");
value = "new value " + i;
setTimeout(function (dataItem, field, value) {
return function () {
dataItem.set(field, value);
}
}(dataItem, field, value), 5);
}
});
( demo )
关于javascript - Kendo 网格更改多个选定的单元格值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22330122/