jqGrid，编辑模式，序列化多选 [英] jqGrid, edit mode, serialize multi select

问题描述

当使用edittype: select和multiple: true编辑列时，jqGrid将数据作为逗号分隔的值发送到服务器.可以将某些事件绑定到此特定列，该事件将返回一个数组而不是逗号分隔的值吗?

When editing column with edittype: select and multiple: true, jqGrid sends the data to the server as comma-separated values. Is that possible to bind some event to this specific column, which will return an array instead of comma-separated values?

自

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

推荐答案

我认为您必须使用edittype: 'custom'并提供custom_element和editoptions方法的自定义实现.如果需要读取来自自定义输入元素的值，则jqGrid将使用参数'get'调用custom_value方法.您实现的custom_value方法可以在这种情况下返回项目数组.

I think that you will have to use edittype: 'custom' in the case and provide your custom implementations of custom_element and custom_value methods of editoptions. If the value from the custom input element will be need to read jqGrid will call custom_value method with the parameter 'get' parameter. Your implementation of custom_value method could return array of items in the case.

重要的是要理解，通常您将需要实现自定义格式化程序，该格式化程序允许显示输入为多选的数据数组.幸运的是formatter: "select"有该行

It's important to understand that in general you will need to implement custom formatter which allows to display array of data which are input for multiselect. Fortunately formatter: "select" has the line

cellval = cellval + "";

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

which convert array to comma separated items. Because of the line the array will by converted to string by usage of .join(",") and formatter: "select" successfully accepts arrays as input.

演示

展示了上述方法.它使用以下代码:

demonstrates the described above approach. It uses the following code:

{
    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_element和custom_value，以防止不必要地调用该行的setAttributes代码，并在排除的属性列表中包含"custom_value"和"custom_element"，表达式$.extend(true, {}, options, {custom_element: null, custom_value: null})可以简化为options.

In the above code I use $.jgrid.createEl to create multivalue select by existing code of jqGrid. The only thing which one need to do is removing of custom_element and custom_value from the options to prevent unneeded call of the methods from setAttributes. If one would modify the line of setAttributes code and include "custom_value" and "custom_element" in the list of excluded attributes the expression $.extend(true, {}, options, {custom_element: null, custom_value: null}) could be reduced to options.

通过这种方式，我们得到与使用edittype: "select"几乎相同的<select>.仅有两个区别:

In the way we get almost the same <select> as using edittype: "select". There are two differences only:

• 在edittype: "custom"内部创建的<select>元素将具有附加属性class="customelement"
• 在edittype: "custom"内部创建的<select>元素将被包装(将是直接子级)在<span class="editable">...</span>内部

• the <select> element created inside of edittype: "custom" will have additional attribute class="customelement"
• the <select> element created inside of edittype: "custom" will be wrapped (will be direct child) inside of <span class="editable">...</span>

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

Such differences seems be not important in our case.

已更新:setAttributes方法的代码现已固定在gtihub上的jqGrid的主代码中(请参见提交).因此，在下一版的jqGrid(更高版本为4.4.1)中，可以将custom_element的代码减少为

UPDATED: The code of setAttributes method is now fixed in the main code of jqGrid on the gtihub (see the suggestion and the commit). So in the next version of jqGrid (higher as 4.4.1) one could reduce the code of custom_element to

custom_element: function (value, options) {
    return $.jgrid.createEl.call(this, "select", options, value);
}

请参见相应的演示.

这篇关于jqGrid，编辑模式，序列化多选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！