Question

不确定为什么搜索在网格中不起作用。单击“仅查找无响应”。但它可以弹出搜索表单。看图像。

我的代码：

 <script>
    $(document).ready(function () {
        function styleSearchForm(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable');
            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }
        function styleSearchFilters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }

        jQuery(gridSelector).jqGrid({
            url: API_URL + 'GetVendors',
            datatype: 'json',
            mtype: 'GET',
            height: 'auto',
            colNames: ['pkey', 'Company', 'ContactName', 'ContactPhone', 'UserName', 'UserKey', 'Active', 'FacilityId', 'ClientId', 'PhotoURL', 'PushToGP'],
            colModel: [
                {
                    key:true,
                    name: 'pkey', index: 'pkey', width: 50, hidden: true,
                    formatter: 'integer'
                },
                { name: 'Company', width: 120 },
                { name: 'ContactName', width: 110 },
                { name: 'ContactPhone', width: 120 },
                { name: 'UserName', align: "right", width: 90 },
                { name: 'UserKey', align: "right", width: 120, hidden: true },
                { name: 'Active', width: 50, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch },
                { name: 'FacilityId', align: "right", width: 100, formatter: "integer" },
                { name: 'ClientID', align: "right", width: 100, formatter: "integer" },
                { name: 'PhotoURL', align: "right", width: 80 },
                { name: 'PushToGP', align: "right", width: 80, edittype: "checkbox", editoptions: { value: "True:False" }, unformat: aceSwitch }
            ],
            cmTemplate: { autoResizable: true, editable: true },
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: pagerSelector,
            sortname: 'company',
            sortorder: "asc",
            viewrecords: true,
            jsonreader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records"
            },

            caption: "Vendor Managerment"
        });

        $(gridSelector).jqGrid('navGrid', pagerSelector,
                {
                    //navbar options
                    edit: true,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: true,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: true,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: true,
                    viewicon: 'ace-icon fa fa-search-plus grey'
                },

                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
                        styleSearchForm(form);
                    },
                    afterRedraw: function () {
                        styleSearchFilters($(this));
                    },
                    multipleSearch: true
                    /**
                                         multipleGroup:true,
                                         showQuery: true
                                         */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />');
                    }
                }
            );

        jQuery(gridSelector).jqGrid('inlineNav', pagerSelector, {search:true, edit: true, add: true, del: true });
    });


    }
</script>

修改

服务器端代码：

public dynamic GetVendors(string sidx, string sortOrder, int page, int rows, int pkey)
    {
        var vendors = _vendorRespository.GetAllVendors().AsQueryable();
        var pageIndex = Convert.ToInt32(page) - 1;
        var pageSize = rows;
        var totalRecords = vendors.Count();
        var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
        if (sidx != null)
        {
            vendors = sortOrder == "asc" ? vendors.OrderBy(sidx) : vendors.OrderBy(sidx + " descending");
        }
        else
        {
            vendors = vendors.OrderBy(x => x.pkey);
        }
        vendors = vendors.Skip(pageIndex * pageSize).Take(pageSize);
        return new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = (from vendor in vendors
                    select new
                    {
                        cell = new string[]
                        {
                        vendor.pkey.ToString(),
                        vendor.Company,
                        vendor.ContactName,
                        vendor.ContactPhone,
                        vendor.UserName,
                        Encoding.UTF8.GetString(vendor.UserKey),
                        vendor.Active.ToString(),
                        vendor.FacilityId.ToString(),
                        vendor.ClientID.ToString(),
                        vendor.PhotoURL,
                        vendor.PushToGP.ToString()
                        }
                    }).ToArray()
        };
    }

我错过了什么吗？

Answer 1

如果您的网格中需要显示大约120个项目，那么我建议您使用客户端排序，分页和过滤。选择的原因：本地排序，分页和过滤通常会更快地作为到服务器的往返。因此，如果您甚至拥有超级供电的服务器，那么数据的发送仍然会慢慢地与JavaScript中的120行一起使用。

要实施客户端排序，分页和过滤，您需要做两件事：

修改（简化）您的服务器代码（url: API_URL + 'GetVendors'），以便立即返回所有数据。如果您已经实现了访问数据的存储库，则典型代码将由一行组成。返回数据的格式可以只是所有项目的数组。
添加jqGrid的loadonce: true和forceClientSorting: true选项。最后一个选项仅存在于free jqGrid中。它强制对初始加载的数据进行排序，然后再显示在第一页上。

搜索在JqGrid中无效

1 个答案: