jqgrid 4.5.4 formatter：选择不在组合框中的重复值

Question

我正在使用jqGrid 4.5.4来构建一个jqGrid。我在编辑组合框时遇到问题。 我的组合框有城市名称。 在组合框中，有两个城市名称相同但键值不同。在jqgrid下拉列表中编辑一行时填充了不同kay值的城市。我用了formatter:'select'。但它没有用。

我的代码如下::

var jQuery = $.noConflict();
var lastSel = 0;
jQuery(document).ready(function(){
    jQuery.ajax({
        // The link we are accessing.
        url: <%= "'" +url_1.toString()+"'"%>,
        // The type of request.
        type: "get",
        // The type of data that is getting returned.
        dataType: "json"
    }).done(function(data){
            jQuery("#list2").jqGrid({
                url:<%= "'" +url.toString()+"'"%>,
                datatype:"json",
                mtype:"POST",
                colNames:['localityId','City','Locality'],
                colModel:[
                    {
                            name:'localityId',
                            index:'localityId',
                            width:240,
                            key:true,
                            editrules:{edithidden:false, required:true},
                            editable:true,
                            hidden:true
                    },
                    {
                            name:'cityId',
                            index:'cityId',
                            width:240,
                            editable:true, 
                            edittype:'select',
                            formatter:'select',
                            sortable:true,
                            editrules:{ required:true},
                            editoptions: {  
                                value:  data                                            
                            }       
                    },
                    {
                            name:'locality',
                            index:'locality', 
                            width:240,
                            sortable:true,
                            editable:true, 
                            edittype:'text'
                    }
                ],
                rowNum:10, 
                rowList:[10,20,30], 
                pager: '#pager2', 
                sortname: 'locality',
                editurl:<%= "'" +url_edit.toString()+"'"%>,
                viewrecords: true,
                multiselect: true, 
                sortorder: "desc", 
                caption:"Locality Master"
            });

            jQuery("#list2").navGrid(
                                      '#pager2',
                                      {add:true, edit:true, del:true},
                                      {},
                                      {},
                                      {},
                                      {}
                                    );
    });
});

如果删除了formatter ='select'，则屏幕上会显示cityId，然后如果编辑了该行，则会在下拉列表中选择正确的城市。 formatter ='select'和editoption有什么问题。

Answer 1

我可以重现您描述的问题。问题很明显：jqGrid使用formatter: "select"将值（如2，4，35）替换为将保存在网格单元格中的字符串（在{ {1}}）。单元格没有关于select的原始值的信息。

因此，它只是在初始化表单编辑时调用格式化程序“select”的格式化。如果您对不同的选择值有相同的文本，则标准的非格式化程序无法区分具有原始不同值<td>和2的“Mollem”。所以unformatter总是返回第一个找到的值：`2。

我对印度的地理位置并不熟悉，但我可以想象存在两个同名的城市。我建议您选择不同的文本，以便用户可以清楚地看到选择了哪一个“Mollem”。另一方面，可以在不同的选项组（35）下包含不同的“Mollem”。如果问题与原始问题完全相同。

我在the answer中描述了如何将<optgroup>属性分配给行（data）以保存自定义附加信息。我建议对细胞使用相同的方法（<tr>）。我希望网格看起来像

相应的代码非常简单。可以将<td>列定义为

cityId

此外，我使用自定义实现覆盖{ name: "cityId", formatter: "select", edittype: "select", editrules: { required: true }, editoptions: { value: data }, cellattr: function (rowId, value, rawObject, cm, rdata) { return ' data-val="' + rawObject.cityId + '"'; }, unformat: function (cellText, options, $cell) { return String($cell.data("val")); } } 的默认非格式化版，该实现直接从formatter: select属性获取值：data-val。

The demo（您可以将another demo与原始问题进行比较）另外String($cell.data("val"))使用dataUrl: "ManOptGroup.htm"：

ManOptGroup.htm

它仅提高了选择的可见性，以便更容易区分<select> <optgroup label="Group 1"> <option value="1" title="Arambol (Group 1)">Arambol</option> <option value="2" title="Mollem (Group 1)">Mollem</option> <option value="3" title="Bicholim (Group 1)">Bicholim</option> </optgroup> <optgroup label="Group 2"> <option value="4" title="Mapusa (Group 2)">Mapusa</option> <option value="35" title="Mollem (Group 2)">Mollem</option> </optgroup> </select> 。生成的编辑表单现在看起来像