【问题标题】:jqGrid Treegrid does not expand and collapse rows after dynamic load of datajqGrid Treegrid 在动态加载数据后不会展开和折叠行
【发布时间】:2016-10-21 16:17:08
【问题描述】:

我有大量的材料清单 (BOM),我已将它们加载到 jqGrid Treegrid 中。它有大约500行。出于各种原因,我试图将数据块保持在 64K 以下,因此在较大的 BOM 上,我没有加载最深的叶子,例如比 6 级更深的任何叶子。我想在用户选择扩展最初的节点时动态加载这些叶子开始折叠,因为它没有加载。大多数一切都按预期工作。用户可以折叠和展开任何已加载的节点。但是,当用户单击展开缺少子节点的节点时,服务器会返回它的所有子节点,并在树形网格中正确显示。如果这些子节点中的任何一个具有折叠节点,则用户可以将这些节点展开到分支的末尾。但这就是正常行为停止的地方。一旦用户单击展开任何缺少子节点的节点,则只能展开最近服务器响应中包含的节点。什么都不能倒塌。报错是:

An unexpected error has occurred: 
 'Unable to get property 'isleaf' of undefined or null reference'
 The url is ''
 The line number is 92

行号所指的源文件是grid.treegrid.js

以下是扩展缺少子节点的小节点的示例响应。

{"page":"1", 
 "total":"1", 
 "records":"3", 
 "rows":[
     {"id":"491","hide":false,"cell":["491","M-065934-1","BRACKET","M","1","1",".00","","$.00","478","7","false","false"]},
     {"id":"492","hide":false,"cell":["492","M-065934-2","COLLAR","M","1","1",".00","","$.00","478","7","false","true"]},
     {"id":"493","hide":false,"cell":["493","PD M6 X 20","PIN,DOWEL","P","2","2",".00","","$.00","478","7","false","true"]}
 ]}

每行中的最后四个值是 parent、level、expanded 和 isleaf。在这种情况下,一旦加载数据,只有行 491 是可展开的,并且围绕这三行的行(包括父行 478)都不可折叠。我需要看什么来确定问题?加载有影响吗?我没有手动设置加载任何行。当我加载网格时,我知道哪些行已卸载子项。我需要手动设置该值吗?

jqGrid(免费):4.4.3
jQuery:1.9.0
jQuery UI:1.8.23

编辑:我已升级到以下版本: jqGrid(免费):4.11.1
jQuery:1.12.4
jQuery UI:1.10.4

在这些版本之外,我遇到了正在加载的 require.js 的问题,但似乎与我的配置不匹配。我得到了同样的错误(虽然行号不同)现在是错误:

An unexpected error has occurred: 
 'Unable to get property 'expanded' of undefined or null reference'
 The url is 'http://as400/rui/scripts/jqgrid-4.11.1/js/jquery.jqgrid.min.js?v=5.15b'
 The line number is 554

问题的根源还是一样。虽然 treegrid 数据在网格中仍然可见,但它似乎对 jqgrid 脚本不可见。无法访问加载之前存在的行的属性,但在更新期间加载的行确实可用、可扩展(一次),并且位于网格中的正确位置。

【问题讨论】:

  • 您使用(可以使用)哪个版本的 jqGrid 以及 jqGrid 的哪个分支(free jqGrid、商业Guriddo jqGrid JS 或版本 grid.treegrid.js中的第92行在不同版本的jqGrid中有不同的内容。此外,您发布的数据应与 JavaScript 代码相对应,您也应将其包含在内。我建议您尝试从CDN 加载免费的 jqGrid 4.13.4 并重复您的测试。
  • 4.13.4 有什么特别之处吗?我从 github 下载了 4.13.5,但是没有用。我使用的软件是一个包含 jqGrid 的开源框架。我猜它已经很老了。
  • 1) 4.4.3 版本太旧,很久没有支持了。 2)我在免费的jqGrid fork中更改了TreeGrid的代码以提高它的性能。您写道,您在 TreeGrid 中加载了许多节点。因此,它可能对您有所帮助。 3) 如果您的代码不起作用,那么您应该创建演示,它使用非缩小的 jqGrid (jquery.jqgrid.src.js) 并重现问题。或者,您应该至少发布创建 jqGrid 的 JavaScript 代码。
  • 我将尝试在我的项目中升级 jQuery 和 jqGrid。我可能会有问题。
  • 我现在尽可能地升级了。为了更进一步,我将不得不为 require.js 制定适当的依赖关系这是否让您更接近能够帮助我?

标签: javascript jqgrid


【解决方案1】:

好的,调试了很多,但我找到了答案。秘诀在于treegrid 的loadonce 属性。此属性的值必须为 false 以允许树形网格动态加载其他节点。这与行的 isleaf 属性密切相关。我发现如果treegrid有loadonce: true,并且任何行有isleaf: false并且没有加载子节点,那么当你展开那个子节点时,所有的本地数据都被删除并被子行数据替换,但是网格本身被正确操作并与本地数据不同步。 loadonce: false 禁止删除本地数据,本地数据和网格保持同步。

也许这是一个错误。如果您有loadonce: true,也许treegrid 应该禁止发布其他节点。而不是让网格和本地数据不同步。

顺便说一句,我正在为此使用邻接模型。

【讨论】:

  • 我建议您在折叠节点后检查有关 Web 浏览器开发者工具的网格。如果删除了节点,那么您应该看不到任何带有旧节点的隐藏行(您应该看不到 <tr role="row" id="someid" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr" style="display: none;"> 元素)。通过在免费 jqGrid 4.13.5 中使用 unloadNodeOnCollapse: false,您可以强制执行该行为。任何关于孩子的数据都将从内部data 参数和网格的 DOM 中删除。
  • 我就是这样找到它的。在 Chrome 开发者工具中,通过调试脚本。设置loadonce: true时,清除本地数据,并替换为子行,展开未加载的节点。这发生在grid.base.js 中的函数addJSONData 中。这是执行它的代码locdata = (ts.p.datatype != "local" && ts.p.loadonce) || ts.p.datatype == "jsonstring"; if(locdata) { ts.p.data = []; ts.p._index = {}; ts.p.localReader.id = locid;}。稍后,这些行被添加到 DOM 中的网格中。这会使网格和本地数据不同步。
  • 抱歉,我不确定您在上一条评论中写了哪个版本的 jqGrid。我再说一遍,loadonce: true 的使用在所有版本的 jqGrid 中都是错误的:有些版本可以忽略该选项,但有些版本会产生副作用。 TreeGrid 总是在使用 TreeGrid 的情况下填充data,并且可以通知 jqGrid 仅通过使用服务器响应的loaded 属性已经加载了完整数据。因此选项loadonce: true 在使用TreeGrid 的情况下绝对没有意义。
  • 我正在使用 4.4.3,因为这是我正在使用的框架中的内容,我无法升级。不是因为 jqGrid 有任何问题,而是因为我对 javascript 不太了解。无论如何,应该在免费的 jqGrid wiki 页面上指出这一点,因为除了 guriddo.net/demo/treegridjs 上的一个示例之外,所有示例都是错误的,并且没有迹象表明您所说的是这种情况。我相信你,我以后会使用loadonce:false
  • loadonce:false 只是默认值。在使用 TreeGrid 的情况下,最好不要使用 loadonce
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-02-29
  • 2014-12-18
  • 1970-01-01
  • 2020-02-22
  • 1970-01-01
  • 2012-10-23
  • 2018-12-28
相关资源
最近更新 更多