0

我是 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 数据是这样的

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

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

4

2 回答 2

1

首先，您为将在搜索期间而不是在编辑期间使用searchoptions.value的列定义。此外，仅当您添加其他属性时，该属性才会在“搜索”对话框中起作用。所以你应该在编辑过程中添加。operating_systemstype: "select"editoptions: {value: getOptionsList() }<select>

valueforeditoptions.value和的格式searchoptions.value可以是字符串

"86:Windows;87:AIX"

或类似的对象

{"86": "Windows", "87": "AIX"}

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

您应该更改代码getOptionsList以构造相应的结果。顺便说一句，我更喜欢使用 String 形式而不是 Object 形式，因为它允许<option>指定<select>. 使用对象形式的选项顺序在不同的网络浏览器中可能不同。

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

更新：的代码buildSelect可以是

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

如果您希望选择的编辑结果将作为选择 ID（如86for "Windows"）发送到服务器（参见演示）。如果您希望该服务器获得名称（如） ，"Windows"那么您需要使用属性填充元素并忽略该值：value<option>valueid

buildSelect: function (data) {
    var html = "<select>", length = data.length, i, item;
    for (i = 0; i < length; i++) {
        item = data[i];
        html += '<option value=' + item.value + '>' + item.value + '</option>';
    }
    return html + "/<select>";
}

看演示。您可以使用 Fiddler、IE 的开发者工具或其他免费工具在编辑期间跟踪确切的 HTTP 流量。

于 2013-10-29T11:32:24.833 回答
0

你colModel一定是这样的，

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

我想，它必须editoptions代替searchoptions. 这是一个示例网格，感谢 Oleg

于 2013-10-29T11:19:33.757 回答