JQGrid编辑类型:使用dataurl'select'返回< select>与< optgroup>不保存选择值 [英] JQGrid Edittype: 'select' using dataurl returns <select> with <optgroup> not saving select value
问题描述
我有一个使用dataUrl的edittype:'Select'的JQGrid列，以返回带有不同帐户组的帐户列表.
I have a JQGrid column with edittype:'Select' using dataUrl to return a list of Accounts with groups for the different Account groups.
我的问题:保存行时，没有值传递给选择"列的editurl.如果我删除，则会将一个值传递给我的选择"列的editurl.
My issue: when saving the row no value is passed to the editurl for my Select column. If i remove the 's a value is passed to editurl for my Select column.
说明:对于我的列数据，我返回帐户名称"，而不是值，因此在网格加载时显示名称.
Description: For my column data I return the Account Name, not the value, so when the grid loads the name is displayed.
在编辑一行(直接编辑)时，将调用dataUrl并显示选择列表，并为行数据选择我的帐户.
When a line is edited (in-line editing), the dataUrl is called and the select list is displayed and my Account is selected for the rows data.
然后我从选择"列表中选择一个新帐户，然后按Enter键保存.所选的帐户"值不会传递到该列的editurl函数.如果我从帐户值中删除，则将其传递给editurl函数.
I then select a new Account from the Select list and press enter to save. The selected Account value is not passed to the editurl function for the column. if i remove the 's from the the Account value is passed to the editurl function.
我不确定是否做错了事，即未设置grid参数，
I'm not sure if I'm doing something wrong, ie not setting a grid parameter,
希望您能帮助我.
预先感谢
克里斯
我的网格代码:
$(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的输出:
Output of /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的输出
Output of /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>
推荐答案
jqGrid的当前版本不适用于<select>内的<optgroup>.
The current version of jqGrid don't works with <optgroup> inside of <select>.
我发现在某些情况下使用<optgroup>可能会有所帮助.所以我稍微调试了jqGrid代码，发现只需要更改jqGrid的两行代码(这两行
I find that the usage of <optgroup> could be helpful in some cases. So I debugged the jqGrid code a little and found out that one need to change only two lines of code of jqGrid (the lines 143-144 of the grid.inlinedit.js or the lines 8262-8263 of the jquery.jqGrid.src.js from jqGrid 4.1.1) from
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属性的选择:
If one need have support of selects having multiple: true attribute:
应该以与上面一行相同的方式进行修改(grid.inlinedit.js具有"select>option:selected"的="nofollow noreferrer">第149 行.为了使具有multiple: true属性的jqGrid与dataUrl属性一起使用，必须修复另一行(
one should modify in the same way as above one more line (line 149) of the grid.inlinedit.js having the "select>option:selected". To make jqGrid with multiple: true attribute working with dataUrl property one have to fix one more line (the line 67) of the grid.inlinedit.js. One need change
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());
}
此更改将阻止设置由dataUrl请求的$.ajax请求加载的很小的 .可能应该将width的相同修补程序放在grid.common.js的相应$.ajax调用的nofollow noreferrer>成功事件处理程序，其中将加载dataUrl的数据.我在IE9中测试了我的演示，不需要为IE9进行修复.
This change will prevent setting of the very small width of the select before it is loaded by the $.ajax request from dataUrl. Probably one should place the same fix of the width inside of success event handler of the corresponding $.ajax call from grid.common.js where the data for dataUrl will be loaded. I tested my demos in IE9 and it is not needed to make the fix for IE9.
您可以在此处查看带有固定jqGrid代码的演示:单选演示，多选演示.您应考虑到，在editurl中将使用的服务器上没有用于"/Dropdown/GridSave"的代码.但是，您将在Firebug的Fiddeler中看到将被发送到服务器的已发布数据确实包含有关所选项目的信息.如果要使演示在本地工作，则应将editurl修改为"clientArray"，并可能另外设置loadonce:true.
You can see the demos with the fixed jqGrid code here: the single select demo, the multiselect demo. You should take in the consideration, that there are no code for the "/Dropdown/GridSave" on the server which will be used in the editurl. Nevertheless you will see in Fiddeler of Firebug that the posted data, which will be send to the server, do contain the information about the selected item. If you want make the demo working locally you should modify the editurl to 'clientArray' and probably set additionally loadonce:true.
这篇关于JQGrid编辑类型:使用dataurl'select'返回< select>与< optgroup>不保存选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
