我有一个可编辑的网格,并希望根据条件使某些行不可编辑。
任何人都可以请建议我该怎么做。
谢谢
开箱即用,没有允许基于每行控制版本的功能。您可以做的是在尝试编辑该行时退出版本。
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
格row
对应的位置并检查条件。如果条件匹配,那么我打开单元格。
尽管这没有闪烁,但它不是我的首选,因为您需要仔细触发save
以保存单元格,尽管您说您的网格不可编辑,但您正在编辑它。
第一个实现的运行示例:http: //jsfiddle.net/OnaBai/NWw7T/ ,第二个实现:http: //jsfiddle.net/OnaBai/NWw7T/1/
对于“incell”以外的版本模式,实现相同功能的最简单方法是创建一个自定义定义的版本按钮,该按钮控制一行是否应该进入编辑模式。
对我来说,我想防止用户在尝试添加新行时双击其他行。例如,考虑以下代码:
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。