JQGrid Edittype: 'select' 使用 dataurl 返回 <select>与 <optgroup>不保存选择值 [英] JQGrid Edittype: 'select' using dataurl returns <select> with <optgroup> not saving select value
问题描述
我有一个带有 edittype:'Select' 的 JQGrid 列，它使用 dataUrl 返回包含不同帐户组的组的帐户列表.
我的问题:保存行时，没有值传递给我的 Select 列的 editurl.如果我删除 's 一个值将传递给我的 Select 列的 editurl.
说明:对于我的列数据，我返回帐户名称，而不是值，因此在加载网格时会显示名称.
当编辑一行时(内联编辑)，调用 dataUrl 并显示选择列表，并为行数据选择我的帐户.
然后我从选择"列表中选择一个新帐户并按 Enter 键保存.选定的 Account 值不会传递给该列的 editurl 函数.如果我从 Account 值中删除 's，则将其传递给 editurl 函数.
我不确定我是否做错了什么，即没有设置网格参数，
希望你能帮帮我.
提前致谢，
克里斯
我的网格代码:
$(document).ready(功能 () {var lastSelection;var grid = jQuery("#BankTransactions");grid.jqGrid({url: '/DropDown/GridData/',数据类型:'json'，mtype: 'GET',colNames: ['TransactionLineId', 'TransactionId', 'BankTransactionId', 'Number', 'Amount', 'Category'],col型号:[{名称:'transactionLineId'，索引:'transactionLineId'，可true，editrules:{edithidden:true}，隐藏:true，宽度:40，对齐:'left'}，{名称:'transactionId'，索引:'transactionId'，可true，editrules:{edithidden:true}，隐藏:true，宽度:40，对齐:'left'}，{名称:'bankTransactionId'，索引:'bankTransactionId'，可true，editrules:{edithidden:true}，隐藏:true，宽度:40，对齐:'left'}，{ name: 'Number', index: 'Number', width: 100, align: 'left', sortable: false },{名称:'Amount'，索引:'SubAmount'，可true，宽度:100，对齐:'right'，可排序:false，cellattr:函数(rowId，tv，rawObject，cm，rdata){返回'class ="BankTranEdit"' }, 格式化程序:'currency'，formatoptions: { decimalSeparator: '.', crowdSeparator: ',', decimalPlaces: 2, defaultValue: ' '} },{ 名称:'CategoryIdURL'，索引:'CategoryIdURL'，可真，编辑类型:'选择'，//格式化程序:'选择'，编辑选项:{ dataUrl:/DropDown/CategorySelectList"}，宽度:220，对齐:'左'},],寻呼机:jQuery('#pager')，行数:100，行列表:[25,50,100]，editurl: "/Dropdown/GridSave",排序名称:'数字'，排序顺序:desc"，观看记录:真实，宽度:1250，身高:450，onCellSelect: 函数 (rowid, iCol, cellContent, e) {grid.restoreRow(lastSelection);grid.editRow(rowid, true, null, null, null, null, null);最后选择 = 行号；}});});/Dropdown/GridData 的输出:
{"total":1,页面":1，记录":6，行":[{"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","银行费用"]},{"id":185,"cell":["185","269","145","SM000269","750.00","现金折扣"]},{"id":194,"cell":["194","278","154","SM000278","13.29","Rent"]},{"id":211,"cell":["211","295","171","SM000295","100.00","Rent"]}]}/Dropdown/CategorySelectList 的输出
<选择><optgroup label='费用'><option value='42'>会计费用</option><option value='60'>银行手续费</option><option value='23'>银行服务费</option><option value='24'>书籍和出版物</option><option value='25'>现金折扣</option><option value='43'>租金</option></optgroup><optgroup label='收入'><option value='19'>销售额</option><option value='20'>服务</option><期权价值='21'>利息收入</option><option value='22'>其他收入</option></optgroup></选择>当前版本的 jqGrid 不支持 <optgroup> inside <select>.
我发现在某些情况下使用 <optgroup> 可能会有所帮助.所以我稍微调试了一下jqGrid代码，发现只需要更改jqGrid的两行代码(行 ) 的 grid.inlinedit.js 具有 "select>option:selected".要使具有 multiple: true 属性的 jqGrid 与 dataUrl 属性一起使用，必须再修复一行(第 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());}此更改将阻止在 $.ajax 请求从 加载它之前设置选择 的非常小的 .可能应该将相同的 width>dataUrlwidth 修复放在 success 从 grid.common.js 调用相应的 $.ajax 事件处理程序，其中 的数据dataUrl 将被加载.我在 IE9 中测试了我的演示，不需要对 IE9 进行修复.
您可以在此处查看带有固定 jqGrid 代码的演示:单选演示，多选演示.您应该考虑到，服务器上没有将在 editurl 中使用的/Dropdown/GridSave"代码.尽管如此，您会在 Firebug 的 Fiddler 中看到将发送到服务器的已发布数据确实包含有关所选项目的信息.如果您想让演示在本地工作，您应该将 editurl 修改为 'clientArray' 并可能另外设置 loadonce:true.
I have a JQGrid column with edittype:'Select' using dataUrl to return a list of Accounts with groups for the different Account groups.
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.
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.
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.
I'm not sure if I'm doing something wrong, ie not setting a grid parameter,
Hoping you can help me out.
Thanks in advance,
Chris
My Grid code:
$(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;
}
});
});
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"]}]
}
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>
The current version of jqGrid don't works with <optgroup> inside of <select>.
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();
to
tmp[nm] = $("select>option:selected,select>optgroup>option:selected",this).val();
tmp2[nm] = $("select>option:selected,select>optgroup>option:selected",this).text();
or just to
tmp[nm] = $("select option:selected",this).val();
tmp2[nm] = $("select option:selected",this).text();
to fix the problem.
If one need have support of selects having multiple: true attribute:
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());
}
to for example the following
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());
}
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.
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 Edittype: 'select' 使用 dataurl 返回 <select>与 <optgroup>不保存选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
