1

我正在使用 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 有什么问题。

4

1 回答 1

1

我可以重现您描述的问题。问题很清楚：jqGrid 使用formatter: "select"它将值（如2, 4, 35）替换为将保存在网格单元格中的字符串（in <td>）。该单元格没有关于 select 的原始值的信息。

在此处输入图像描述

所以它只是在表单编辑的初始化时调用格式化程序“选择”的取消格式化程序。如果您对不同的选择值有相同的文本，那么标准的 unformatter 无法区分具有最初不同值的“Mollem”2和35. 所以 unformatter 总是返回第一个找到的值：`2.

我不熟悉印度的地理，但我可以想象确实存在两个同名的不同城市。我建议您使用不同的文本进行选择，以便用户可以清楚地看到选择了哪个“Mollem”。另一方面，可以在不同的选项组 ( <optgroup>) 下包含不同的“Mollem”。在这种情况下，问题将与您原来的问题完全相同。

我在答案中描述了如何将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"));
    }
}

此外，我用我的自定义实现覆盖了默认的 unformatter ，formatter: select它直接从data-valattribute:获取值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>

它提高了 select 的可见性，只是为了更容易区分两者Mollem。生成的编辑表单现在看起来像

在此处输入图像描述

于 2013-10-25T23:57:26.400 回答