从 Jquery UI 对话框中搜索 jqGrid 会导致请求中的搜索字符串为空字符串答案

【问题标题】：Searching a jqGrid from Jquery UI Dialog causes search string from request to be an empty string从 Jquery UI 对话框中搜索 jqGrid 会导致请求中的搜索字符串为空字符串
【发布时间】：2014-10-16 06:44:22
【问题描述】：

我的要求需要我在 Jquery UI 弹出对话框中显示一个 jqGrid。

行为注意：
我能够执行分页、排序、搜索，但是当我在 Jquery UI 对话框中调用它时，它不会搜索。它只进行分页和排序。

我的研究：
我注意到当我调用相同的 JgGrid 时，它没有显示在 Jquery UI 对话框中，它会进行搜索、分页和排序。

HTML 代码如下：

 <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

    <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>

    <script type="text/javascript">
        var curRowNum = 0;
        var curPressedButton = '';
        var curPressedNum = 0;

        $(function () {

            $("#test").click(function () {
                $("#dialog-form-lookup-site").dialog('open');             
            })

            $("#tblSiteLookup").jqGrid({

                url: 'Handlers/SitesHandler.ashx?l=sa',
                datatype: "json",
                height: 200,
                width: 600,
                mtype: 'post',
                loadonce : true,
                colNames: ['Guid', 'Company', 'Customer Site', 'Annual Consumption (kWh)'],
                                    ],
                colModel: [
                            { name: 'Guid', index: 'Guid', search: true, searchoptions: { sopt: ['eq']} },
                //{ name: 'price', index: 'price', width: 60, search: true, stype: 'text', searchoptions: { dataInit: datePick, attr: { title: 'Select Date'}} },
                            {name: 'Company', index: 'Company', width: 70, sortable: true, editable: false, searchtype: "number", search: true, stype: 'text', searchoptions: { sopt: ['eq']} },
                            { name: 'CustomerSite', index: 'CustomerSite', width: 70, sortable: true, editable: false, search: true, stype: 'text', searchoptions: { sopt: ['eq']} },
                            { name: 'AnnualConsumption', width: 100, sortable: true, editable: false }
                          ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pager11',
                sortname: 'Company',
                viewrecords: true,
                sortorder: "desc",             
                caption: "Site"
            });

            $("#tblSiteLookup").jqGrid('navGrid', '#pager11', { search: true, edit: false, add: false, del: false, searchtext: "search" });

            $("#dialog-form-lookup-site").dialog({
                autoOpen: false,
                height: 450,
                width: 700,
                modal: true,
                dialogClass: 'no-close',
                buttons: {
                    "OK": function () {

                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                }
            });

        });
    </script>
    <title></title>
</head>
<body>
    <form id="HtmlForm" runat="server">
     <div>    
    <input id="test" type="button" value="Test Sites List" />
    </div>
    <div id="dialog-form-lookup-site" title="Lookup Site"> 
        <table id="tblSiteLookup" cellpadding="0" cellspacing="0">
        </table>
        <div id="pager11" style="width:500px">
        </div>
    </div>
   </form>
</body>
</html>

SitesHandler.ashx 中服务器端的代码：

public class SitesHandler : IHttpHandler , IRequiresSessionState
    {

        /// <summary>
        /// Handle the request
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {            
            HttpResponse response = context.Response;


           string siteLists = GetSitesList();
           response.Write(siteLists);
       }
 }

问题：

如何从上面的 JQuery UI 弹出窗口中调用它，以便搜索有效吗？

【问题讨论】：

标签： c# jquery jquery-ui jqgrid jqgrid-asp.net

【解决方案1】：

将 jQuery 库从 1.11.1 降级到 1.9.1 解决了这个问题。看起来新的 Jquery 库可能与 JgGrid 的搜索功能不兼容。

下面的代码显示了已注释的库代码和正在使用的库代码，它们解决了这个问题，希望这有助于以防万一你们都遇到这个问题：

  <%--<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
        <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>--%>


        <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
        <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
        <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>

【讨论】：