JQGrid Edittype：使用dataurl'select'返回<select>，<optgroup>不保存选择值</optgroup> </select>

Question

我有一个带有edittype的JQGrid列：'选择'使用dataUrl返回一个包含不同帐户组的组的帐户列表。

我的问题：保存行时，没有值传递给我的Select列的editurl。如果我删除's，则将值传递给我的Select列的editurl。

描述：对于我的列数据，我返回帐户名称，而不是值，因此当网格加载时，显示名称。

当编辑一行（在线编辑）时，将调用dataUrl并显示选择列表，并为行数据选择我的帐户。

然后，我从“选择”列表中选择一个新帐户，然后按Enter保存。选定的帐户值不会传递给列的editurl函数。如果我从帐户中移除了's值，则传递给editurl函数。

我不确定我是否做错了，即没有设置网格参数，

希望你能帮助我。

提前致谢，

克里斯

我的网格代码：

$(document).ready(
function () {
    var lastSelection;
    var grid = jQuery("#BankTransactions");
    grid.jqGrid({
        url: '/DropDown/GridData/',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['TransactionLineId', 'TransactionId', 'BankTransactionId', 'Number', 'Amount', 'Category'],
        colModel: [
                    { name: 'transactionLineId', index: 'transactionLineId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'transactionId', index: 'transactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'bankTransactionId', index: 'bankTransactionId', editable: true, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                    { name: 'Number', index: 'Number', width: 100, align: 'left', sortable: false },
                    { name: 'Amount', index: 'SubAmount', editable: true, width: 100, align: 'right', sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'class="BankTranEdit"' }, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: ' '} },
                    { name: 'CategoryIdURL', index: 'CategoryIdURL',
                        editable: true,
                        edittype: 'select',
                        //formatter: 'select',
                        editoptions: { dataUrl: "/DropDown/CategorySelectList" },
                        width: 220,
                        align: 'left'
                    },
                  ],
        pager: jQuery('#pager'),
        rowNum: 100,
        rowList: [25, 50, 100],
        editurl: "/Dropdown/GridSave",
        sortname: 'Number',
        sortorder: "desc",
        viewrecords: true,
        width: 1250,
        height: 450,
        onCellSelect: function (rowid, iCol, cellContent, e) {
                        grid.restoreRow(lastSelection);
                        grid.editRow(rowid, true, null, null, null, null, null);
                        lastSelection = rowid;  
                      }

    });
});

输出/ Dropdown / GridData：

{"total":1,
"page":1,
"records":6,
"rows":[
    {"id":165,"cell":["165","249","125","DM000249","1500.00","Sales"]},
    {"id":145,"cell":["145","229","105","SM000229","100.00","Rent"]},
    {"id":153,"cell":["153","237","113","SM000237","38.07","Bank Fees"]},
    {"id":185,"cell":["185","269","145","SM000269","750.00","Cash Discounts"]},
    {"id":194,"cell":["194","278","154","SM000278","13.29","Rent"]},
    {"id":211,"cell":["211","295","171","SM000295","100.00","Rent"]}]
}   

输出/ Dropdown / CategorySelectList

<select>
<optgroup label='Expenses'>
<option value='42'>Accounting Fees</option>
<option value='60'>Bank Fees</option>
<option value='23'>Bank Service Charges</option>
<option value='24'>Books and Publications</option>
<option value='25'>Cash Discounts</option>
<option value='43'>Rent</option>
</optgroup>
<optgroup label='Income'>
<option value='19'>Sales</option>
<option value='20'>Services</option>
<option value='21'>Interest Income</option>
<option value='22'>Other Income</option>
</optgroup>
</select>

Answer 1

当前版本的jqGrid不适用于<optgroup>内的<select>。

我发现在某些情况下使用<optgroup>可能会有所帮助。所以我稍微调试了jqGrid代码，发现只需更改jqGrid的两行代码（grid.inlinedit.js的行143-144或{{1}的行8262-8263来自jqGrid 4.1.1）来自

jquery.jqGrid.src.js

到

tmp[nm] = $("select>option:selected",this).val();
tmp2[nm] = $("select>option:selected", this).text();

或只是

tmp[nm] = $("select>option:selected,select>optgroup>option:selected",this).val();
tmp2[nm] = $("select>option:selected,select>optgroup>option:selected",this).text();

解决问题。

如果需要支持具有tmp[nm] = $("select option:selected",this).val(); tmp2[nm] = $("select option:selected",this).text(); 属性的选项：

应该以与上面multiple: true grid.inlinedit.js "select>option:selected"的另一行（line 149）相同的方式进行修改。要使jqGrid的multiple: true属性与dataUrl属性一起使用，必须再修复grid.inlinedit.js的另一行（line 67）。一个需要改变

if(cm[i].edittype == "select" && cm[i].editoptions.multiple===true && $.browser.msie){
    $(elc).width($(elc).width());
}

例如以下

if(cm[i].edittype === "select" && typeof(cm[i].editoptions)!=="undefined" &&
   cm[i].editoptions.multiple===true &&
   typeof(cm[i].editoptions.dataUrl)==="undefined" && $.browser.msie) {

    $(elc).width($(elc).width());
}

此更改将阻止在width来自$.ajax的{​​{1}}请求加载 前选择的非常小的dataUrl。可能应该width来自$.ajax的{​​{1}}来自grid.common.js调用的dataUrl事件处理程序中editurl的相同修补程序，其中editurl的数据将被加载。我在IE9中测试了我的演示，并且不需要为IE9进行修复。

您可以在此处看到包含固定jqGrid代码的演示：success，the single select demo。您应该考虑到，服务器上没有“/ Dropdown / GridSave”代码，将在loadonce:true中使用。然而，您将在Firebug的Fiddeler中看到，将发送到服务器的发布数据确实包含有关所选项目的信息。如果您想让演示在本地工作，您应该将{{1}}修改为'clientArray'，并可能另外设置{{1}}。