我正在使用 jqGrid 作为通用的类似表格的可编辑控件。我的目标是拥有一对 name -> value
在 value
所在的表中s 是可编辑的。
只要我不搞砸 colModel
一切都会顺利: 如果我有一个包含混合值类型的表,我被迫更改 colModel
为了将其与正在编辑的值相匹配。例如,在具有 3 个值的表中:Name
, Surname
, Married?
, 最后一个是 checkbox
类型而其他的是 string
类型.
编辑字段后Married?
,如果我们点击其他字段,它们的内容将变为 Yes:No
在编辑模式下,字符串 Yes:No
是复选框字段使用的那个;有人知道我做错了什么吗?:
var data =
[
{name:"Name", value:"John"},
{name:"Surname", value:"Doe"},
{name:"Married", value:"No"}
];
var currentrow = 0;
function edit(id)
{
if (id && id !== currentrow)
{
var table = jQuery("#grid");
function colProp(id)
{
switch (id)
{
case "1":
case "2":
return { editable: true, edittype: 'text', editoptions: {} };
case "3":
return { editable: true, edittype: 'checkbox', editoptions: {value: 'Yes:No'} };
}
}
table.jqGrid('restoreRow', currentrow);
table.setColProp('value', colProp(id));
table.jqGrid('editRow', id, true,
undefined, undefined, 'clientArray');
currentrow = id;
}
}
$("#grid").jqGrid
({
datatype: "local",
data: data,
colNames: ['Name', 'Value'],
colModel:
[
{ name: 'name' },
{ name: 'value' }
],
onSelectRow: edit
});
起初,我在想用 edittype: checkbox
编辑字段后正在编辑的下一个字段继承之前的 edittype
,这就是我设置 editoptions
的原因在编辑文本字段时添加到一个空对象,但它不起作用。
我已经粘贴了 code into a Fiddle为了分享我的问题的一个工作示例。
PS:也许 jqGrid 不是实现我目标的最佳选择,但我不得不使用它。
最佳答案
要解决您可以使用的问题
editoptions: {value: null}
删除 value
属性。相应的演示包含一些其他最小修改,您可以在这里找到:http://jsfiddle.net/y9KHY/2/ .
对应的代码是
var data = [
{id: "10", name:"Name", value:"John", edittype: "text"},
{id: "20", name:"Surname", value:"Doe", edittype: "text"},
{id: "30", name:"Married", value:"No", edittype: "checkbox"}
],
currentrow = 0;
function edit(id) {
var table = jQuery(this),
item = table.jqGrid("getLocalRow", id);
function colProp(id) {
switch (item.edittype) {
case "checkbox":
return { editable: true, edittype: 'checkbox', editoptions: {value: 'Yes:No'} };
default:
return { editable: true, edittype: 'text', editoptions: {value: null} };
}
}
if (id && id !== currentrow) {
table.jqGrid('restoreRow', currentrow);
table.setColProp('value', colProp(id));
table.jqGrid('editRow', id, true);
currentrow = id;
}
}
$("#grid").jqGrid({
datatype: "local",
data: data,
colNames: ['Name', 'Value'],
colModel: [
{ name: 'name' },
{ name: 'value', editable: true }
],
rowNum: 10000,
autoencode: true,
gridview: true,
height: "auto",
editurl: "clientArray",
onSelectRow: edit
});
关于javascript - 编辑行时使用动态 colModel 的 jqGrid 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22906400/