我使用jqGrid作为通用的表格式可编辑控件。我的目标是在name -> value
s可编辑的表格中成对value
。
只要我不熟悉colModel
,一切顺利:如果我有一个混合价值类型的表格,我强迫更改colModel
以便将其与正在编辑的值进行匹配。例如,在包含3个值的表格中:Name
,Surname
,Married?
,最后一个属于checkbox
类型,而其他值属于{{1}类型}}
修改字段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
});
修改字段后,下一个字段为editet 继承之前的edittype: checkbox
,这就是为什么我设置了<{1}}在编辑文本字段时为空对象,但它无法正常工作。
我已粘贴code into a Fiddle,以便分享我的问题的实例。
PS:也许jqGrid不是实现目标的最佳选择,但我被迫使用它。答案 0 :(得分:2)
要解决此问题,您只需使用
即可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
});