jqGrid,编辑模式,序列化多选

时间:2013-01-18 13:33:23

标签: jquery jqgrid

使用edittype: selectmultiple: true编辑列时,jqGrid会将数据作为逗号分隔值发送到服务器。是否可以将某个事件绑定到此特定列,这将返回数组而不是逗号分隔值?

我想避免使用 serializeEditData 事件,因为

  1. 这个是网格特定的,而不是特定于列的,这对我来说是一个麻烦 - 我正在尝试将列逻辑与网格逻辑分开
  2. 将数组转换为字符串并将字符串转换为完全相同的数组听起来不是一个好主意。

1 个答案:

答案 0 :(得分:2)

我认为您必须在案例中使用edittype: 'custom',并提供custom_element custom_valueeditoptions方法的自定义实施。如果需要读取自定义输入元素的值,则jqGrid将使用参数custom_value参数调用'get'方法。您对custom_value方法的实现可以返回案例中的项目数组。

重要的是要理解,一般来说,您需要实现自定义格式化程序,它允许显示为多选项输入的数据数组。幸运的是formatter: "select"the line

cellval = cellval + "";

将数组转换为逗号分隔的项目。由于该行将通过使用.join(",")转换为字符串,并且formatter: "select"成功接受数组作为输入。

The demo

enter image description here

演示了上述方法。它使用以下代码:

{
    name: "Subcategory",
    width: 250,
    formatter: "select",
    edittype: "custom",
    editoptions: {
        value: {"1": "football", "2": "formula 1", "3": "physics", "4": "mathematics"},
        custom_element: function (value, options) {
            return $.jgrid.createEl.call(this, "select",
                $.extend(true, {}, options, {custom_element: null, custom_value: null}),
                value);
        },
        custom_value: function ($elem, operation, value) {
            if (operation === "get") {
                return $elem.val();
            }
        },
        multiple: true
    }
}

在上面的代码中,我使用$.jgrid.createEl通过现有的jqGrid代码创建多值选择。唯一需要做的就是从选项中删除custom_elementcustom_value,以防止从setAttributes中不必要地调用方法。如果要修改setAttributes"custom_value"代码,并在排除属性列表中包含"custom_element"$.extend(true, {}, options, {custom_element: null, custom_value: null}),则表达式options可以缩减为<select> }。

我们获得与edittype: "select"几乎相同的<select>。只有两个不同之处:

  • edittype: "custom"内创建的class="customelement"元素将具有其他属性<select>
  • edittype: "custom"内创建的<span class="editable">...</span>元素将被setAttributes
  • 包裹起来(将是直接子项)

在我们的案例中,这种差异似乎并不重要。

更新custom_element方法的代码现已在gtihub上的jqGrid主代码中修复(请参阅the linethe suggestion)。因此,在jqGrid的下一个版本(更高版本为4.4.1)中,可以将custom_element: function (value, options) { return $.jgrid.createEl.call(this, "select", options, value); } 的代码减少为

{{1}}

请参阅the commit