Question

我是JQgrid的新手，我们正在使用Perl Catalyst来构建应用程序。我需要有一个操作系统字段的下拉列表

请找到JQgrid的代码

<title>Server Details </title>
<link rel="stylesheet" type="text/css" media="screen" href="[%         c.uri_for('/static/css/cupertino/jquery-ui-1.10.3.custom.css') %]" />
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/plugins/jqGrid/css/ui.jqgrid.css') %]" /> 
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/plugins/jqGrid/css/print-container.css') %]" />

<script src="[% c.uri_for('/static/plugins/jqGrid/js/i18n/grid.locale-en.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/jquery.printElement.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/printing.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/export_to_excel.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/jquery.jqGrid.src.js') %]" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("#list").jqGrid({ 
        url:"[% c.uri_for("server_details_json") %]",
        datatype:'json',
        mtype:'GET',
    colNames:['Server Id' , 'Host Name', 'IP Address','Operating System','Operating  System Version', 'Network Domain','Business Unit'],
        colModel:[ 

        {name:'server_id', index:'server_id', align:'centre',editable:false},
            {name:'server_name', index:'server_name', align:'left',editable:true},
            {name:'ip_address', index:'ip_address', align:'left',editable:true}, 
            {name:'operating_system', index:'operating_system', align:'left',editable:true, edittype: 'select', 
                searchoptions: {value:getOptionsList(),
                                sopt:['eq']}},

            {name:'operating_system_version', index:'operating_system_version', align:'left',editable:true},
            {name:'domain', index:'domain', align:'left',editable:true},
            {name:'business_unit', index:'business_unit', align:'left',editable:true},

 ],
pager:'#pager',
rowNum:10,
autowidth:true,
autoheight:true,
rowList:[10,20,30,1000000000000000000],
loadComplete: function() {
    $("option[value=1000000000000000000]").text('All');
},
sortname:'server_id',
sortorder:'asec',
shrinkToFit:true,
viewrecords:true,
gridview:true,
height:'auto',
editurl:"[% c.uri_for("postrow") %]",
caption:'Server List '
}); 

$("#list").jqGrid('navGrid', '#pager',{
        view:false, 
        del:true, 
        add:true, 
        edit:true, 
        search: true, 
        refresh: true,
        print:true 
        },

{height:250,width:500,reloadAfterSubmit:true}, // edit options
{height:480,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
)
// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('list','pager','Server Details');
setExcelGrid('list','pager','/tams/Server_Details_CSV','Server Details1');
}); 

</script>

 <script>
 function getOptionsList(){
 $.ajax({
type: "POST",
url:"[% c.uri_for("OS_json") %]",
async:false,
dataType: 'json',
success: function(data){
    options=data.value;
},
failure :function(xhr,status,msg) {
    alert("Unexpected error occured. !!!"+msg);
}
});
return options;
}
</script>

<body>
<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 
</body>`

Json Data就像这样

[{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}]

有人可以帮助我提前感谢您的宝贵时间

Answer 1

首先，您为searchoptions.value列定义了operating_system，该列将在搜索期间使用，而不是在编辑期间使用。此外，只有在添加其他属性stype: "select"时，该属性才能在“搜索”对话框中使用。因此，您应该在编辑期间添加editoptions: {value: getOptionsList() }以获得<select>。

value和editoptions.value的{{1}}格式可以是字符串

searchoptions.value

或像

这样的对象

"86:Windows;87:AIX"

而不是您当前使用的{"86": "Windows", "87": "AIX"}。

您应该更改[{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}]的代码以构建相应的结果。顺便说一句，我更喜欢使用String表单而不是Object表单，因为它允许在getOptionsList中指定<option>元素的确切顺序。在不同的Web浏览器中，使用对象表单的选项顺序可以不同。

我建议您更改代码，以免不使用同步Ajax请求。而不是你可以使用<select>。您还应该定义editoptions {dataUrl: "[% c.uri_for("OS_json") %]", buildSelect: function (data) {...}}。回调函数ajaxSelectOptions: {dataType: "json"}获取服务器响应（buildSelect），它应返回包含所有data元素的<select>的HTML片段。您可以找到一些示例here，here和here。

更新：<option>的代码可能类似

buildSelect

如果您希望编辑select的结果将作为选择ID（如buildSelect: function (data) { var html = "<select>", length = data.length, i, item; for (i = 0; i < length; i++) { item = data[i]; html += '<option value=' + item.id + '>' + item.value + '</option>'; } return html + "/<select>"; } 86）发送到服务器（请参阅the demo）。如果您希望该服务器获取名称（例如"Windows"），则需要使用"Windows"属性填充value个<option>元素并忽略value值：< / p>

id

见the demo。您可以使用Fiddler，IE的开发人员工具或其他免费工具来跟踪编辑期间的确切HTTP流量。

Answer 2

您的colModel必须是，

{ name: 'Decision', width: 200, editable: true, formatter: 'select', edittype: 'select',
editoptions: {
                        value: {
                            '1': 'Option 1',
                            '2': 'Option 2',
                            '3': 'Option 3'
                        }
               }
},

我猜，它必须是editoptions而不是searchoptions。这是一个example网格，感谢Oleg

在JQGrid中下载

2 个答案: