JQGrid Edittype:使用dataurl'select'返回<select>,<optgroup>不保存选择值

Question

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

我的问题:保存行时,没有值传递给我的Select列的editurl.如果我删除'sa值传递给我的Select列的editurl.

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

编辑一行(在线编辑)时,将调用dataUrl并显示选择列表,并为行数据选择我的帐户.

然后,我从"选择"列表中选择一个新帐户,然后按Enter键保存.选定的帐户值不会传递给列的editurl函数.如果我删除了来自Account的值,则传递给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的代码只有两行(行143-144的grid.inlinedit.js或线的8262-8263 jquery.jqGrid.src.js从jqGrid的4.1.1)

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属性的选择:

应该以同样的方式修改与上述一个以上线(线149的)的grid.inlinedit.js具有"select>option:selected".要使具有multiple: true属性的jqGrid使用属性,dataUrl必须再修复一行(行67)grid.inlinedit.js.一个需要改变

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的选择.可能应该对将要加载数据的相应调用的成功事件处理程序内部进行相同的修复.我在IE9中测试了我的演示,并且不需要为IE9进行修复.$.ajaxdataUrlwidth$.ajaxgrid.common.jsdataUrl

你可以在这里看到带有固定jqGrid代码的演示:单选演示,多选演示.您应该考虑到,服务器上没有"/ Dropdown/GridSave"代码,将在其中使用editurl.然而,您将在Firebug的Fiddeler中看到,将发送到服务器的发布数据确实包含有关所选项目的信息.如果你想让demo在本地工作,你应该修改editurl为'clientArray'并可能另外设置loadonce:true.