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

时间:2012-02-13 10:17:48

标签: c# javascript asp.net-mvc jqgrid

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

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

我遇到的问题是“cost”和“price”中的两列具有从数据库执行的计算。这两列使网格负载极慢。

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

我们正在使用将用于材料的真实列表,此列表包含8500多个项目。在初始负载之后,它通过观察加载8500项目谈论约2分钟。

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

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

如果可能,最好能够使用搜索工具栏功能执行此操作。这已经正常工作但是在长期负载之后。

任何建议都会受到欢迎。我不是原来的程序员只是想获取一些信息,所以如果可能的话,我不需要支付我的开发谷歌搜索。

感谢您的时间,如果需要当前代码的示例,请告诉我它是否有用,或者如果您可以提供一些示例代码,如果我需要的话,

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: "" });`

1 个答案:

答案 0 :(得分:1)

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

我应该提到以下可以显着改善jqGrid

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