使用Coldfusion cfc如何在编辑表单中为jqgrid相关选择格式返回数据格式？ [英] Using a Coldfusion cfc how do you format return data for jqgrid dependent selects in the edit form?
问题描述
我想弄清楚如何设置动态依赖选择。这是我的原始帖子的一个编辑，以使它更加可读和清晰。我已经包括我的整个网格，以防它的帮助，但它可能是太多的信息。网格完美显示。
I am trying to figure out how to set up dynamic dependent selects. This is an edit of my original post to try to make it more readable and clear. I have included my whole grid in case it helps but it might be too much information. The grid displays perfectly.
<!---stylesheets --->
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="grid.locale-en.js" type="text/javascript"></script>
<!--- The language file --->
<script src="jquery.jqGrid.min.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
$("#list").jqGrid(
{
url:'Users2.cfc?method=getUsers', //CFC that will return the users
datatype: 'json', //We specify that the datatype we will be using will be JSON
cmTemplate:{resizable:false, width:124},
colNames:['Bill To Code','User ID', 'GL_comp_key', 'Branch ID', 'Warehouse ID', 'Final Approver', 'Active', 'Primary Approver', 'Administrative','Secondary Approver'], //Column Names
//The Column Model
colModel :[
{name:'ar_bill_key',index:'ar_bill_key',editable:true,searchoptions:{sopt: ['eq','lt','le','gt','ge','bw','ew','cn']},
editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
{name:'userID',index:'userID',searchoptions:{sopt:['eq','bw','ew','cn']},
editable:true,edittype:"text",editoptions:{size:50},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
下面是我要设置为动态依赖选择的3个字段。选择gl_cmp_key和SO_BRNCH_KEY，并且so_whs_key选择将显示相关列表。我需要有2个不同的网格吗？一个用于添加动态下拉列表，一个用于编辑动态依赖下拉列表？
Below are the 3 fields I am trying to set up as dynamic dependent selects. Choose the gl_cmp_key and the SO_BRNCH_KEY and so_whs_key selects would display dependent lists. Do I need to have 2 different grids? One for add with dynamic dropdowns and one for edit with dynamic dependent dropdowns?
{name:'gl_cmp_key',index:'gl_cmp_key',searchoptions:{sopt:['eq','bw','ew','cn']},
//the values are hard-coded here to get something started.
editable:true,edittype:"select",editoptions:{value:['37','36','CM','35']},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
{name:'SO_BRNCH_KEY',index:'SO_BRNCH_KEY',searchoptions:{sopt:['eq','bw','ew','cn']},editable:true,edittype:"select",editoptions:{dataUrl:'Users2.cfc?method=getBrnchKey'},
buildSelect: function(data) {
var response = jQuery.parseJSON(data.responseText);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l=response.length; i<l ; i++) {
var ri = response[i];
s += '<option value="'+ri+'">'+ri+'</option>';
}
}
return s + "</select>";
},
这是我在firebug JSON响应。选择：
{COLUMNS：[SO_BRNCH_KEY]，DATA：[[BC30]，[BM35]，[BF50]， BF51]，[BF53]，[BF54]，[BTCO]，[BF55]，[BF56]， BI80]，[BI81]，[BCFG]，[BI78]， BC43]，[BC44]，[BC48]，[BC49]，[BCCO]，[BCMN]，[BCSA]]}
This is the data I get in the firebug JSON response from cfc shown below . This does not display in the select:
{"COLUMNS":["SO_BRNCH_KEY"],"DATA":[["BC30"],["BM35"],["BF50"],["BF51"],["BF53"],["BF54"],["BTCO"],["BF55"],["BF56"],["BD65"],["BW66"],["BI75"],["BI76"],["BI77"],["BI78"],["BI79"],
["BI80"],["BI81"],["BCFG"],["BC43"],["BC44"],["BC48"],["BC49"],["BCCO"],["BCMN"],["BCSA"]]}
如何格式化以显示为html。我实现列，数据格式不工作。这里是CFC：
选择so_brnch_key
从so_brnch_tbl
How do I format this to display as html. I realize the columns, data format does not work. Here is is the CFC: Select so_brnch_key FROM so_brnch_tbl
</cffunction>
我已尝试更改返回格式。虽然我看到firebug数据的变化，然后，没有显示。
I have tried changing the return format. Although I see changes in the data in firebug then, no display.
editrules:{required:true},formoptions:{elmprefix:"(*)"}},
{name:'so_whs_key',index:'so_whs_key',searchoptions:{sopt:['eq','bw','ew','cn']},
editable:true,edittype:"select",editoptions:{dataUrl:'Users2.cfc?method=getWhsKey'},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
//网格选择的字段yes或no
//fields for grid select yes or no
{name:'final_approver',index:'final_approver',searchoptions:{sopt:['eq','bw','ew','cn']},
editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
{name:'active',index:'active',searchoptions:{sopt:['eq','bw','ew','cn']},
editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
{name:'primary_approver',index:'primary_approver',align:"left",sorttype:"text",searchoptions:{sopt:['eq','bw','ew','cn']},
editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
{name:'admin',index:'admin',searchoptions:{sopt:['eq','bw','ew','cn']},
editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
{name:'secondary_approver',index:'secondary_approver',searchoptions:{sopt:['eq','bw','ew','cn']},
editable:true,edittype:"select",editoptions:{value:"1:Yes;0:No"},editrules:{required:true},formoptions:{elmprefix:"(*)"}},
],
pager: $('#pager'), //The div tells jqGrid where to put the pager
rowNum:20, //Number of records to show per page
rowList:[20,30,40,50], //Row List, to select how many rows to see per page
sortorder: "asc", //Default sort order
sortname: "ar_bill_key", //Default sort column
viewrecords: true, //Shows the message on the pager
caption: 'Permissions', //Grid Name
recordtext: "Record {0} - {1} of {2}",
// Pager信息
//Pager information
rownumbers: true,
rownumWidth: "30",
sortable: true,
height:'auto',
mtype:'POST',
toolbar:[true,"top"],
//The JSON reader. defines the JSON data returned from the CFC
jsonReader: {
root: "ROWS", //our data
page: "PAGE", //current page
total: "TOTAL", //total pages
records:"RECORDS", //total records
userdata:"USERDATA", //Userdata we will pass back for feedback
cell: "", //Not Used
ar_bill_key: "0",//Will default to first column
id:"10"
},
editurl:"Users2.cfc?method=addeditUser" //The Add/Edit function call
}
).navGrid('#pager',
{
search:true,searchtitle:"Search",//title set for hover
edit:true,edittitle:"Edit User",viewPagerButtons:false,
add:true,addtitle:"Add User",
del:false,deltitle:"Delete User"
},
//编辑选项savekey参数将keybind Enter键提交。 / p>
//Edit Options. savekey parameter will keybind the Enter key to submit.
{editCaption:"Edit User",edittext:"Edit",closeOnEscape:true, savekey: [true,13],errorTextFormat:commonError,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"70",width:500},
//Add Options
{width:500,addCaption:"Add User",edittext:"Add",closeOnEscape:true,savekey: [true,13],errorTextFormat:commonError,reloadAfterSubmit:true,bottominfo:"Fields marked with (*) are required",top:"60",left:"70"},
//搜索
{errorTextFormat:commonError,Find:"Search",closeOnEscape:true,caption:"Search Users",multipleSearch:true,closeAfterSearch:true}
);
//添加/编辑遇到错误时调用的函数。返回的消息将显示给用户
//Function called when add/edit encounters an error. The returned message is what will be shown to user
function commonError(data)
{
return "Error Occured during Operation. Please try again";
}
});
</script>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll"></div>
如何格式化表单编辑的数据或从cfc中添加选择，如何显示动态选择以及如何将它们设置为表单编辑的依赖。使用dataUrl和value I获得列名称和要显示但不正确的值的列表（未示出）。任何方向的教程，或帖子将不胜感激。我会发布我的解决方案时，发现。感谢
I have a few problems: how to format the data for form edit or add selects from the cfc, how to display dynamic selects and how to set them up as dependent for the form edit. Using dataUrl and value I have gotten the column name and a list of values to display but incorrectly (not shown). Any direction to tutorials, or posts would be appreciated. I will post my solution when found. Thanks
推荐答案
是的，您应该使用editoptions：dataUrl参数，就像您在发布的colModel中一样。但是，您的CFC的响应不正确。从 jqGrid文档：
Yes, you should use the editoptions: dataUrl parameter, just as you've done for in your posted colModel. However, the response from your CFC is incorrect. From the jqGrid docs:
editoptions dataUrl参数仅对
的元素有效：edittype：select。 dataUrl参数表示应从中获取HTML选择元素的
的URL。当设置此选项时，
元素将使用AJAX请求中的值填充。数据
应该是具有期望选项的有效HTML选择元素 -
，例如：
The editoptions dataUrl parameter is valid only for element of edittype:select. The dataUrl parameter represent the url from where the html select element should be get. When this option is set, the element will be filled with values from the AJAX request. The data should be a valid HTML select element with the desired options - something like:
<select>
<option value='1'>One</option>
<option value='2'>Two</option>
...
</select>
因此，在您的情况下，不需要从CFC返回一个查询对象作为JSON，返回HTML。目前，您的CFC返回此：
So, in your case, rather than returning a query object as JSON from your CFC, you need to return HTML. Currently, your CFC returns this:
{"COLUMNS":["glKEY"],"DATA":[[""],[35.0],[""],[""],[""]]}
但是你应该返回这个（纯粹基于你的示例数据）：
But you should return this (based purely on your example data):
<select>
<option></option>
<option>35.0</option>
<option></option>
<option></option>
<option></option>
</select>
这篇关于使用Coldfusion cfc如何在编辑表单中为jqgrid相关选择格式返回数据格式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
