【问题标题】:JQGrid Edittype: 'select' using dataurl returns <select> with <optgroup> not saving select valueJQGrid Edittype: 'select' 使用 dataurl 返回 <select> 和 <optgroup> 不保存选择值
【发布时间】:2011-06-27 11:24:19
【问题描述】:

我有一个带有 edittype:'Select' 的 JQGrid 列,它使用 dataUrl 返回包含不同帐户组的组的帐户列表。

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

说明:对于我的列数据,我返回帐户名称,而不是值,因此在加载网格时会显示名称。

当编辑一行时(内联编辑),调用 dataUrl 并显示选择列表,并为行数据选择我的帐户。

然后我从“选择”列表中选择一个新帐户并按 Enter 键保存。选定的 Account 值不会传递给该列的 editurl 函数。如果我从 Account 值中删除 '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: '&nbsp;'} },
                    { 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>

【问题讨论】:

  • 您能否修改您的问题并将其附加到“/DropDown/CategorySelectList”和“/DropDown/GridData/”的输出中。拥有数据可以尝试重现您的问题。
  • 感谢 Oleg,我已经用请求的输出更新了问题。第一次应该这样做,我的错。

标签: jqgrid optgroup


【解决方案1】:

当前版本的 jqGrid 不适用于 &lt;optgroup&gt; 内的 &lt;select&gt;

我发现在某些情况下使用&lt;optgroup&gt; 可能会有所帮助。所以我稍微调试了一下jqGrid代码,发现只需要更改jqGrid的两行代码(grid.inlinedit.js143-144行或来自jqGrid 4.1.1的jquery.jqGrid.src.js的8262-8263行) 来自

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 的另一行 (line 149) 具有 "select&gt;option:selected"。要使具有multiple: true 属性的jqGrid 与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 它由来自dataUrl$.ajax 请求加载。可能应该将相同的 width 修复程序放置在来自 grid.common.js 的相应 $.ajax 调用的 success 事件处理程序中,dataUrl 的数据将被加载。我在 IE9 中测试了我的演示,不需要对 IE9 进行修复。

您可以在此处查看带有固定 jqGrid 代码的演示:the single select demothe multiselect demo。您应该考虑到,服务器上没有将在editurl 中使用的“/Dropdown/GridSave”代码。尽管如此,您会在 Firebug 的 Fiddler 中看到将发送到服务器的已发布数据确实包含有关所选项目的信息。如果您想让演示在本地工作,您应该将editurl 修改为“clientArray”,并且可能另外设置loadonce:true

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-12-25
    • 1970-01-01
    • 2015-09-09
    • 1970-01-01
    • 1970-01-01
    • 2012-08-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多