我有一个可编辑的网格,并希望根据条件使某些行不可编辑。
有人可以建议我怎么做。
由于
答案 0 :(得分:7)
开箱即用,没有允许控制每行版本的功能。当你尝试编辑这行时,你可以做的就是退出版本。
一旦单元格进入编辑模式,就会触发一个事件edit
。一旦发现您的情况属实,您可以做的就是关闭该单元格。
示例:我们的网格具有以下schema
定义:
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
我们不希望允许City
为Seattle
的行的版本。 edit
处理程序应定义为:
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : true,
edit : function (e) {
// e.model contains the model corresponding to the row that is being edited.
var data = e.model;
if (data.City === "Seattle") {
// Close the cell (exit edition mode)
this.closeCell();
}
e.preventDefault();
},
pageable : true,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
]
}).data("kendoGrid");
问题是在单元格实际处于编辑模式后调用edit
处理程序,因此关闭可能会产生一些闪烁,但在大多数情况下它应该可以工作。
第二个选项是将网格定义为不可编辑的,如果条件为真,则手动调用editCell
:
在这种情况下,您将grid
定义为:
var grid = $("#grid").kendoGrid({
dataSource: ds,
editable : false,
pageable : true,
columns :
[
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
]
}).data("kendoGrid");
然后为单元格定义click
处理程序:
grid.tbody.on("click", "td", function (e) {
// Close any possible cell already in edit mode
grid.closeCell();
// Find data corresponding to clicked cell
var data = grid.dataItem($(e.target).closest("tr"));
// Check condition
if (data.City !== "Seattle") {
// Enter edition mode
grid.editCell(e.target);
}
});
我检索与所单击的表格单元格对应的data
的{{1}}并检查条件。如果条件匹配,那么我打开单元格。
尽管没有闪烁,但这不是我的首选,因为您需要小心触发row
来保存单元格,尽管您说网格不可编辑,但您正在编辑它。
在此处运行第一个实施的示例:http://jsfiddle.net/OnaBai/NWw7T/ 而对于第二个:http://jsfiddle.net/OnaBai/NWw7T/1/
对于“incell”以外的版本模式,最简单的实现相同功能的是创建自定义版本按钮,该按钮控制行是否应该进入编辑模式。
答案 1 :(得分:0)
对我来说,我想阻止用户在尝试添加新行时双击其他行。例如,考虑以下代码:
var IDS = {
myGrid: "#my-grid",
addRowBtn: "#add-btn",
deleteRowBtn: "#delete-btn",
saveRowBtn: "#save-btn",
cancelRowBtn: "#cancel-btn",
};
var Grids = {
MyGrid: null,
//...
};
然后在初始化函数中,我创建一个事件处理程序来响应双击事件:
function initMyGrid() {
$(IDS.myGrid).kendoGrid({
selectable: true,
scrolable: true,
sortable: false,
columns: [
{ field: "FirstName", title: "First Name", width: "20%", attributes: { tabindex: "1" } },
{ field: "LastName", title: "Last Name", width: "60%", attributes: { tabindex: "2" } }
]
});
//...
Grids.MyGrid = $(IDS.myGrid).data('kendoGrid');
Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
Grids.MyGrid.editCell($(this));
});
}
然后我在PageState中创建了一个值来测试:
var PageState = {
// ...
AddingRow: false
};
因此,当用户点击按钮添加新行时,我阻止他们点击以编辑任何其他行:
function addNewRow() {
PageState.AddingRow = true;
Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
if (PageState.Selected.RowId != null && PageState.Selected.RowId != "") {
Grids.RulesGrid.closeCell();
}
});
// ...
}
此外,每当用户保存行或取消添加新行时,我都会重新启用双击事件:
function saveRow() {
PageState.AddingRow = false;
// Allow user to edit other records now
Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) {
Grids.MyGrid.editCell($(this));
});
// ...
}
HTH。