编辑行时,jqGrid与动态colModel一起出现问题

时间:2014-04-07 07:45:30

标签: javascript jquery jqgrid

我使用jqGrid作为通用的表格式可编辑控件。我的目标是在name -> value s可编辑的表格中成对value

只要我不熟悉colModel,一切顺利:如果我有一个混合价值类型的表格,我强迫更改colModel以便将其与正在编辑的值进行匹配。例如,在包含3个值的表格中:NameSurnameMarried?,最后一个属于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不是实现目标的最佳选择,但我被迫使用它。

1 个答案:

答案 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
});