【问题标题】:Add data on the client side to Jqgrid在客户端添加数据到 Jqgrid
【发布时间】:2012-04-27 16:44:36
【问题描述】:

我正在使用 Jqgrid 显示一些数据,使用 DataType 作为本地,我不想回发到服务器并返回 jsonString 与要绑定的数据。我将 Json 字符串传递给客户端,并使用 addRowData 将数据一一添加。如果由于我在每个单元格中的信息而导致数据数量很大,那么用户似乎需要花费大量时间。

   for (var i = 0; i < gridData.length; i++)
       jQuery("#jqgInventory").jqGrid('addRowData', i + 1, JSON.parse(gridData[i]));

有没有其他方法可以将数据绑定到 jqgrid,例如只需将 JsonString 作为数据源,它会更快地绑定它或任何其他建议。

注意:使用 DataType 作为 Json 并设置 postUrl 会比上述方法更快。

请帮忙! 提前致谢, 唉

【问题讨论】:

    标签: jquery jquery-plugins jqgrid jqgrid-asp.net


    【解决方案1】:

    这句话直接来自jqGrid文档:“一个数组,存储本地传递给网格的数据。你可以直接指向这个变量,以防你想加载一个数组数据。它可以代替慢的addRowData方法关于相对大数据”。这正是你所说的。

    在这里查看:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

    这是您的工作示例:http://jsfiddle.net/yNw3C/649/

    您只需输入选项:

    data: my_data
    

    其中my_data 是信息数组。

    【讨论】:

    • +1 来自我。你的答案是正确的。我只建议您 1) 在网格选项列表中包含 gridview: true 以提高性能,2) 添加 height: 'auto' 以提高可见性和 3) 添加具有较大值的 rowNum 选项,例如 10000 或添加寻呼机到网格。例如添加toppager: true。默认情况下,没有分页器的代码将仅显示前 20 行(默认值为 rowNum)并删除其余部分。
    • 感谢您的提示,是的,我刚刚解决了问题中提出的问题。我还建议使用寻呼机或增加显示的最大行数。我只是从 jqgrid 示例中获取了该示例:trirand.com/blog/jqgrid/jqgrid.html。在加载数据 -> 数组数据下并将其转换为使用data 参数。出于某种原因,他们在示例中使用了addRowData 约定……可能有一段时间没有更新了。
    • 糟糕,我找到了正确的例子,在“3.7 版中的新功能”下,它还有一个寻呼机,我会更新小提琴。
    • @jeffery_the_wind 非常感谢您提供的这些信息,它帮助很大
    • @jeffery_the_wind:我同意来自the official jqGrid demo 的信息有很多缺点。最旧的页面(如使用addRowData 的页面)与另一个页面混合在一起。顺便addRowData添加的数据会添加到当前页面。来自“加载数据”/“数组数据”的页面在for(var i=0;i&lt;=mydata.length;i++) 行中出现了自年份错误(应该使用&lt; 而不是&lt;=)。这些信息是按历史组织的(例如“自 beta 3.0 以来的新内容”),而不是显示当前版本中的最佳做法。
    【解决方案2】:

    我同意 Jeffery_The_Wind 的另一个回答。他没有只写他推荐的选项的名称:data参数。重要的是要补充一点,应该使用gridview: true 选项,不要使用afterInsertRow 回调。

    供理解:addRowData的用法是填充网格最慢、最无效的方式。最大的问题是,如果您在页面上插入元素或更改元素至少所有现有元素的位置必须由网络浏览器重新计算。您在页面上放置的元素越多,在下一个页面中插入的速度就越慢。

    解决问题的方法主要有两种:

    • 使用DocumentFragment 准备分离的DOM 元素层次结构,然后将片段放在页面上的一个操作中。
    • 将所有或大部分更改的内容创建为代表 HTML 片段的字符串,并使用innerHTML 属性在页面上的一个操作中放置许多元素。

    jqGrid 使用第二种方法。使用gridview: true 来获得这种行为很重要。所以推荐的填充局部网格的方法是:

    • datatype: 'local'data 参数与数据的用法。输入data 参数值的标准格式是包含行项目的数组。每个项目都具有相同的属性,例如colModelname 属性的值。此外,每个项目都应该有id 属性,它定义了“rowid”——网格的&lt;tr&gt; 元素(行)的id。如果您有其他格式的输入数据,您必须使用对应的localReader 参数来描述数据的格式。
    • datatype: 'jsonstring'datastr 参数的用法指定输入数据。 datastr 参数的值可以是 JSON 字符串,也可以是内容相同的 JavaScript 对象。因此,如果您将数据作为对象,则无需使用 JSON.stringify 将其转换为 JSON 字符串。您还可以使用与datatype: 'json' 相同的格式使用jsonReader

    data参数(datatype: 'local'的情况下)和datastr参数(datatype: 'jsonstring'的情况下)插入数据的主要区别是输入数据将按jqGrid排序以防使用data 参数,如果是 datastr 参数,将不排序。

    【讨论】:

      猜你喜欢
      • 2018-06-28
      • 1970-01-01
      • 1970-01-01
      • 2011-01-09
      • 2018-04-21
      • 2012-04-13
      • 2011-05-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多