javascript 编辑网格时,如何按行禁用特定字段?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14221670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When editing a grid, how do I disable specific fields by row?
提问by jermny
I have a kendo grid with data in it and multiple columns (say col 1, 2, and 3). Columns 1, 2, 3 need to be able to be edited (or preventing editing) based off the values of each other. This is row specific.
我有一个剑道网格,其中包含数据和多列(比如第 1、2 和 3 列)。第 1、2、3 列需要能够根据彼此的值进行编辑(或阻止编辑)。这是特定于行的。
For instance, if column 1 (date) is < column 2 (date) then column 3 is not allowed to be edited.
例如,如果第 1 列(日期)<第 2 列(日期),则不允许编辑第 3 列。
I know it's simple enough to disable or enable an entire column but my requirements are row specific. So row 1 could have column 3 enabled and row 2 could have column 3 disabled.
我知道禁用或启用整列很简单,但我的要求是特定于行的。所以第 1 行可以启用第 3 列,第 2 行可以禁用第 3 列。
Any thoughts?
有什么想法吗?
回答by OnaBai
My suggestion is creating an editor function that validates the condition. This of course has the disadvantage that is an ad-hoc solution but ... it works!
我的建议是创建一个验证条件的编辑器功能。这当然有一个临时解决方案的缺点,但是......它有效!
Lets have the following entries (data of the DataSource):
让我们有以下条目(数据源的数据):
var entries = [
{ id:1, col1: new Date(2012, 11, 31), col2: new Date(2013, 0, 1), col3: "Yes" },
{ id:2, col1: new Date(2013, 0, 1), col2: new Date(2013, 0, 1), col3: "No" },
{ id:3, col1: new Date(2013, 0, 2), col2: new Date(2013, 0, 1), col3: "No" }
];
Then I define the grid as:
然后我将网格定义为:
var grid = $("#grid").kendoGrid({
dataSource : {
data : entries,
schema : {
model: {
id : "id",
fields: {
col1: { type: "date"},
col2: { type: "date"},
col3: { editable: true }
}
}
},
pageSize: 3
},
columns : [
{ field: "col1", title: "Col1", format: "{0:yyyy-MM-dd}" },
{ field: "col2", title: "Col2", format: "{0:yyyy-MM-dd}" },
{ field: "col3", title: "Edit?", editor: checkAndEdit }
],
editable : "incell",
navigatable: true,
pageable : true
}).data("kendoGrid");
Where col1
and col2
are dates and col3
is a string that can be edited if and only ifcol1
is less than col2
.
其中col1
和col2
是日期并且col3
是一个字符串,当且仅当col1
小于 时可以编辑col2
。
I define checkAndEdit
function as follow:
我定义checkAndEdit
函数如下:
function checkAndEdit(container, options) {
if (options.model.col1 < options.model.col2) {
$('<input data-bind="value:' + options.field + '" ' +
'data-format="' + options.format + '" ' +
'class="k-input k-textbox"/>')
.appendTo(container);
} else {
grid.closeCell(container);
}
}
Where I generate the corresponding input
field if col1
< col2
and otherwise invoke closeCell
for exiting edit
mode.
我在哪里生成相应的input
字段 if col1
<col2
否则调用closeCell
退出edit
模式。
You can see it running here
你可以看到它在这里运行
回答by atik sarker
Keep it simple just use (Which you bind in your grid column)
保持简单只是使用(你绑定在你的网格列中)
[Editable(false)]
public string ob_name { get; set; }
[Editable(false)]
public string ob_name { get; set; }
In your Costume class which using for your Kendo Ui Grid.
在用于您的剑道 Ui 网格的服装课程中。
For details you can also see this
有关详细信息,您还可以查看此