Question

我试图找出如何设置动态相关选择。这是我原始帖子的编辑，旨在使其更具可读性和清晰度。我已经包含了我的整个网格，以防它有所帮助，但它可能是太多的信息。网格显示完美。

<!---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个不同的网格吗？一个用于添加动态下拉列表，一个用于编辑动态相关下拉列表？

                {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>"; 
             },

这是我在cfc的firebug JSON响应中得到的数据，如下所示。这不会显示在选择中：
{ “列”：[ “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

 </cffunction>

我试过更改返回格式。虽然我看到firebug中的数据发生了变化，但没有显示。

                 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:"(*)"}},

//网格字段选择是或否

                {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}",

//寻呼机信息

     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参数将键入Enter键以提交。

{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 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和值我得到了列名和要显示但未正确显示的值列表（未显示）。任何教程或帖子的方向将不胜感激。我发现时会发布我的解决方案。感谢

Answer 1

是的，您应该使用editoptions：dataUrl参数，就像您在发布的colModel中所做的那样。但是，CFC的响应不正确。来自jqGrid docs:

editoptions dataUrl参数仅对元素有效 edittype：请选择。 dataUrl参数表示从哪里开始的url 应该得到html select元素。设置此选项时，元素将填充AJAX请求中的值。数据应该是具有所需选项的有效HTML select元素 - 类似的东西：

<select> 
<option value='1'>One</option> 
<option value='2'>Two</option> 
...
</select>

因此，在您的情况下，您需要返回HTML，而不是从CFC返回查询对象作为JSON。目前，您的CFC会返回此信息：

{"COLUMNS":["glKEY"],"DATA":[[""],[35.0],[""],[""],[""]]}

但你应该返回这个（完全基于你的例子数据）：

<select>
  <option></option>
  <option>35.0</option>
  <option></option>
  <option></option>
  <option></option>
</select>

使用Coldfusion cfc如何在编辑表单中格式化jqgrid相关选择的返回数据？

1 个答案: