jqgrid工具栏搜索或外部搜索功能

jqgrid toolbar search or external search feature

本文关键字:搜索 功能 外部 jqgrid 工具栏      更新时间:2023-09-26

你好,我正在使用jqgrid在.net MVC 3.0 C#应用程序中加载一些数据。

有一个材料网格需要在大约6个不同的地方加载。他们都一样。该网格列出了大约8700件商品的定价和详细信息。

我遇到的问题是,"成本"answers"价格"这两列的计算是从数据库中执行的。这两列使轴网负载极为缓慢。

我们正在处理的材料测试清单最初有大约730个项目。第一次如果没有某种优化,电网将需要大约1分30秒才能完全加载。在改变之后,这下降到大约4秒,这是可以接受的。

我们现在正在处理将用于材料的真实列表,该列表包含8500多个项目。在最初的装载后,它说的是大约2分钟的手表装载8500件物品。

这真的是不可接受的,所以我认为最好的解决方案是使用搜索工具栏功能或外部搜索来加载项目,但只加载搜索结果项目。

所以我想看到的是,在初始页面加载后,网格是空的,只有在搜索完成后才会被填充,并且只显示搜索结果。

如果可能的话,最好使用搜索工具栏功能来做到这一点。这已经正常工作了,但经过了一局的长负荷。

欢迎提出任何建议。我不是最初的程序员,只是想获得一些信息,所以如果可能的话,我不必为谷歌搜索付费。

感谢您的时间,如果需要当前代码的示例,请让我知道它是否会有所帮助,或者如果我需要的是可能的,您是否可以提供一些示例代码,

Serer侧代码:

 public ActionResult EstimateMaterialAddGridData(string sidx, string sord, int page, int rows)
    {
        IQueryable<Material> mats;
        mats = Material.Find(x => x.OwnerId == UserAccount.GetOwnerId && x.isDeletedFromCatalog == false).AsQueryable();
        int pageIndex = page - 1;
        int pageSize = rows;
        int totalRecords = mats.Count();
        int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
        var jsonData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = (
                from sub in mats
                select new
                {
                    i = sub.Id,
                    cell = new string[] {
                        sub.Id.ToString(),
                        sub.Id.ToString(),
                        sub.Id.ToString(),
                        sub.ProductCode,
                        sub.Description, 
                        sub.Units,
                        sub.Categories,
                        sub.UnitCost.ToString(),
                        sub.Price.ToString()
                    }
                }
            ).ToArray()
        };
        return Json(jsonData);
    }

JS网格代码`jQuery(document).ready(function(){var grid=jQuery("#mgrid");

grid.jqGrid({
    url: '/Material/EstimateMaterialAddGridData',
    datatype: 'json',
    mtype: 'POST',
    colNames: ['Id', '','View/Edit',  'Product Code', 'Description', 'Units', 'Categories', 'Cost', 'Price'],
    colModel: [
        { name: 'Id', index: 'Id', key: true, hidden: true, editrules: { edithidden: true} },
        { name: 'Add', index: 'Add', sortable: false, width: 50,search:false, resizable: false, editable: false, align: 'center', formatter: formatLink, classes: 'not-editable-cell' },
        { name: 'Open', index: 'Open', sortable: false, width: 90,search:false, resizable: false, editable: false, align: 'center', formatter: formatLinkNew, classes: 'not-editable-cell' },
        { name: 'ProductCode', index: 'ProductCode', sorttype: 'text',search:true, width: 100, resizable: false },
        { name: 'Description', index: 'Description', sorttype: 'text',search:true, width: 275, resizable: false },
        { name: 'Units', index: 'Units', sorttype: 'text', width: 75,search:true, resizable: false },
        { name: 'Categories', index: 'Categories', sorttype: 'text',search:true, width: 300, resizable: false, editable: false,  },
        { name: 'UnitCost', index: 'UnitCost', sorttype: 'float', width: 75,search:true, align: 'right', resizable: false, editable: false, formatter: 'currency' },
        { name: 'Price', index: 'Price', sorttype: 'float', width: 75, search:true,align: 'right', resizable: false, editable: false, formatter: 'currency' },
    ],
    pager: '#mpager',
    height: '100%',
    rowNum: 10,
    rowList: [10, 20, 50, 100],
    sortname: 'Id',
    sortorder: 'desc',
    sortable: true,
    loadonce: true,
    ignoreCase: true,
    viewrecords: true,
    caption: 'Material',
    cellEdit: false,
    hidegrid: false,
    viewrecords: true,
});
grid.jqGrid('navGrid', '#mpager',
    { resize: false, add: false, del: false, search: true, refresh: true, edit: false, alerttext: 'Please select an material' }
).jqGrid('navButtonAdd', '#mpager',
    { title: "Create New Material Catalouge", buttonicon: "ui-icon-plus", onClickButton: newMaterial, position: "First", caption: "" });`

我可以向您转发以下两个旧答案:this和this。答案包含演示项目,演示如何使用jqGrid中的搜索工具栏。

我应该提到以下几点,它们可以显著提高jqGrid 的性能

  • 您应该始终使用jqGrid的gridview: true选项。在我看来,它应该是jqGrid中的默认选项
  • 您应该明确使用服务器端分页。我认为一次向用户显示8500+(或730)个项目毫无意义。没有监视器可以显示项目,也没有用户可以从这么多项目中吸收信息。用户真正需要的是能够对数据进行智能过滤——这是你自己决定的方式。我主要使用搜索工具栏中的网格过滤和高级搜索的组合,帮助高级用户构建更复杂的搜索过滤器。此外,您可以考虑将一些常用的过滤器保存在预定义的命名过滤器模板中。您可以在官方演示页面的"搜索"/"搜索模板"下找到过滤器模板的示例。另一种方法是使用外部过滤器。在答案中,您会发现实现细节,这些细节可能会对您有所帮助
  • 如果你想阻止网格的第一次加载,你可以最初使用datatype: 'local',它会跳过对服务器的任何请求。要激活与服务器的通信,您可以随时根据需要将datatype更改为'json''xml'。例如,可以将$(this).jqGrid('setGridParam', {datatype: 'json'});直接放置在loadComplete内部