Question

在我的JQGrid中，我需要动态地将数据加载到“公司”列中的下拉列表中。

查看：

<title>jqGrid for ASP.NET MVC - Demo</title>
    <!-- The jQuery UI theme that will be used by the grid -->    
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" />
    <!-- The Css UI theme extension of jqGrid -->
    <link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" />    
    <!-- jQuery library is a prerequisite for jqGrid -->
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <!-- language pack - MUST be included before the jqGrid javascript -->
    <script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script>
    <!-- the jqGrid javascript runtime -->
    <script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script>  

    <link rel="stylesheet" type="text/css" href="../../Content/MyStyle.css" />

    <script type="text/javascript">
        var myGrid = $('#list');
        $(function () {
            $("#list").jqGrid({
                url: '/JqGridClients/DynamicGridData/',
                datatype: 'json',
                mtype: 'GET',

                colNames: ['Edit', 'Address', 'Company', 'Name','Delete'],
                colModel: [
          { name: 'ClientID', index: 'ClientID', search: false, width:30 ,  align: 'left', formatter: PKId_formatter },
          { name: 'Address', index: 'Address', search: true, sortable: true, align: 'left' },
          { name: 'Company', index: 'Company', search: true, align: 'left', stype: 'select', searchoptions: { dataUrl:'<%= Url.Action("GetDestinationList","JqGridClients") %>'}},
          { name: 'Name', index: 'Name', search: true, sortable: true, align: 'left', searchoptions: { sopt: ['cn' ,'eq', 'ne']}},
          { name: 'DelClientID', index: 'DelClientID', search: false, width:45,  align: 'left', formatter: PKId_delete_formatter}],
                pager: jQuery('#pager'),
                rowNum: 10,
                 width: '100%',
                height: '100%',
                rowList: [5, 10, 20, 50],
                sortname: 'ClientID',
                sortorder: "desc",
                viewrecords: true,
                loadonce: true,
                caption: 'Clients',

            }).navGrid('#pager', { search: true, edit: true, add: false, del: true, searchtext: "Search" });

              $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });

              $("#list").setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');

             // $("#pager").jqGrid('search', {multipleSearch: true,multipleGroup: true,recreateFilter: true,overlay: 0});
        });

       function PKId_formatter(cellvalue, options, rowObject) {
    return '<a href="JqGridClients/Edit?id=' + cellvalue + '" class="ui-icon ui-icon-pencil" ></a>';
}

 function PKId_delete_formatter(cellvalue, options, rowObject) {
   // return '<a href="JqGridClients/Delete?id=' + cellvalue + '" onclick="return confirm("Are you sure want to delete?");" class="ui-icon ui-icon-trash"></a>';
return '<a href="JqGridClients/Delete?id=' + cellvalue + '" onclick="return confirm(\'Are you sure want to delete?\');" class="ui-icon ui-icon-trash"></a>';
}

  </script>  

    <h2>Index</h2>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

将数据加载到下拉列表的控制器方法

public JsonResult GetDestinationList()
{
    JqGridClientRepository rep = new JqGridClientRepository();
    IEnumerable<Client> clients = rep.GetClients();
    var li = from s in clients
             select new
             {
                 Company = s.Company
             };
    return Json(li, JsonRequestBehavior.AllowGet);
}

目前我无法在JQGrid上看到下拉列表

Answer 1

如果dataUrl以JSON格式返回字符串数组，您可以使用buildSelect将数据转换到<select>，并使用<option>列表。您可以在the answer中找到相应的代码示例。考虑参考答案的 UPDATED 2 部分中描述的jqGrid中的更改。所以

{
    name: "Company",
    stype: "select",
    searchoptions: {
        dataUrl: '<%= Url.Action("GetDestinationList","JqGridClients") %>',
        buildSelect: function (data) {
             var s = "<select>", i, l, item;
             if (data && data.length) {
                 for (i = 0, l = data.length; i < l; i++) {
                     item = data [i];
                     s += '<option value="' + item + '">' + item + '</option>';
                 }
             }
             return s + "</select>";
         }
    }
}

Answer 2

您已为下拉列表指定了以下网址：

dataUrl: '<%= Url.Action("GetDestinationList", "JqGridClients") %>' }

因此，请确保存在此类控制器操作，并返回包含要在标题中显示的DropDown的HTML的部分视图：

public ActionResult GetDestinationList()
{
    return PartialView();
}

和相应的部分（GetDestinationList.ascx）：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

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

在浏览器中查看网络控制台时，您应该能够看到发送到服务器的GET /JqGridClients/GetDestinationList AJAX请求，以便检索下拉列表的标记。

JQGrid Load下拉列表数据

2 个答案: