在 JQGrid 中下拉答案

【问题标题】：Drop Down in JQGrid在 JQGrid 中下拉
【发布时间】：2013-10-29 11:00:41
【问题描述】：

我是 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"}]

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

【问题讨论】：

标签： perl jqgrid dropdownbox

【解决方案1】：

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

editoptions.value 和searchoptions.value 的value 格式可以是类似字符串

"86:Windows;87:AIX"

或类似的对象

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

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

你应该改变getOptionsList的代码来构造相应的结果。顺便说一句，我更喜欢使用字符串形式而不是对象形式，因为它允许在<select> 中指定<option> 元素的确切顺序。使用对象形式的选项顺序在不同的网络浏览器中可能不同。

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

已更新：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（如 86 用于 "Windows"）发送到服务器（请参阅 the demo）。如果您希望该服务器获得名称（如 "Windows"），则需要使用 value 属性填充 value 的 <option> 元素并忽略 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.value + '>' + item.value + '</option>';
    }
    return html + "/<select>";
}

见the demo。您可以使用 Fiddler、IE 的开发者工具或其他免费工具来跟踪编辑过程中的确切 HTTP 流量。

【讨论】：

嗨 Oleg，感谢您的解释，此 Json 数据是否有效 [{"86":"Windows"},{"87":"AIX"}] 我不知道如何删除方块来自催化剂中 json 数据的括号。
@PravishJayasundar：不客气！ [{"86":"Windows"},{"87":"AIX"}] 将不工作。正如我写的那样，数据可以是 object ，其属性类似于 select {"86": "Windows", "87": "AIX"} 中的选项，而不是对象数组。此外，对象窗体不能保存项目的顺序。如果您使用dataUrl，您可以轻松地将buildSelect 任何服务器响应内部转换为HTML片段。
，再次感谢您的及时回复，这让我抓狂......有没有办法直接从表中获取数据？我正在使用 MYSQL 很抱歉很痛苦。
@PravishJayasundar：不，jqGrid 是纯 jQuery 插件，所以它不能直接访问 MYSQL 数据库。我不确定您目前遇到的是哪个问题。我简短地描述了解决您的问题的许多方法。最简单的一种是修改success 回调以从[{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}] 对象生成"86:Windows;87:AIX"。您只需要编写简单的for 循环即可。
@PravishJayasundar：另一种（更好的方法）是在colModel 中为operating_system 列使用editoptions {dataUrl: "[% c.uri_for("OS_json") %]", buildSelect: function (data) {...}}。您需要另外添加 jqGrid 选项ajaxSelectOptions: {dataType: "json"}。回调函数buildSelect 也很简单。您需要将相同的输入 data ([{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}]) 转换为字符串 <select><option value="86">Windows</option><option value="87">AIX</option></select>。所以我不明白你的问题在哪里。

【解决方案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

【讨论】：

嗨，当我对值进行硬编码时，使用 editoption 它工作正常，但我需要从表中显示数据。
跟随奥列格的解决方案，花时间检查他的链接，他的解释比我的更深入、更清晰！ :)
感谢 AthibaN，我正在关注的是解释...:-)感谢您的帮助