javascript - 编辑行时使用动态 colModel 的 jqGrid 问题

Question

我正在使用 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 不是实现我目标的最佳选择，但我不得不使用它。

Answer 1

要解决您可以使用的问题

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