jQuery jqGrid TreeGrid 无法正常工作

发布于 2024-08-26 07:04:23 字数 1518 浏览 1 评论 0原文

我无法构建 jqGrid TreeGrid 使用本地数据。如果您注释掉 treeGrid 和 ExpandColumn 属性,则此方法可以像常规网格一样工作,但是一旦您添加这些属性以尝试使其成为树形网格,它不会创建树形网格(它只是创建一个“普通”网格) ),并且它不再正确排序。

我确保在 jqGrid 下载过程中下载了正确的 TreeGrid 文件。

jQuery(function(){

  var gridOptions = {
    datatype: "local",
    height: 250,
    colNames: ['Name', 'Type', 'Last Modified On', 'Last Modified By'],
    colModel: [{name: 'name', index: 'name', width: 200, sorttype: 'text'},
           {name: 'type', index: 'type', width: 200, sorttype: 'text'},
           {name: 'modifiedon', index: 'modifiedon', width: 200, sorttype: 'date'},
           {name: 'modifiedby', index: 'modifiedby', width: 200, sorttype: 'text'}],
    treeGrid: true,
    ExpandColumn: 'name',
    caption: "My Grid"
};

    jQuery("#treeGrid").jqGrid(gridOptions);

var gridData = [
    {name: "My File", type: "My File Type", modifiedon: "03/10/2010", modifiedby"Strong Sad", lft: "1", rgt: "8", level: "0"},
    {name: "One of Everything", type: "Word Document", modifiedon: "02/12/2009", modifiedby: "Strong Bad", lft: "2", rgt: "5", level: "0"},
    {name: "My Presentation", type: "PowerPoint", modifiedon: "01/23/2009", modifiedby: "The Cheat", lft: "3", rgt: "4", level: "0"}
];

for (var i = 0; i < gridData.length; i++) {
    jQuery("#treeGrid").jqGrid('addRowData', i + 1, gridData[i]);
}

});

I am having trouble constructing a jqGrid TreeGrid using local data. This method works just fine as a regular grid if you comment out the treeGrid and ExpandColumn attributes, but once you add those to try to make it a tree grid, it doesn't create a tree grid (it just creates a "normal" grid), and it no longer sorts properly.

I ensured that I downloaded the proper TreeGrid files during the jqGrid download.

jQuery(function(){

  var gridOptions = {
    datatype: "local",
    height: 250,
    colNames: ['Name', 'Type', 'Last Modified On', 'Last Modified By'],
    colModel: [{name: 'name', index: 'name', width: 200, sorttype: 'text'},
           {name: 'type', index: 'type', width: 200, sorttype: 'text'},
           {name: 'modifiedon', index: 'modifiedon', width: 200, sorttype: 'date'},
           {name: 'modifiedby', index: 'modifiedby', width: 200, sorttype: 'text'}],
    treeGrid: true,
    ExpandColumn: 'name',
    caption: "My Grid"
};

    jQuery("#treeGrid").jqGrid(gridOptions);

var gridData = [
    {name: "My File", type: "My File Type", modifiedon: "03/10/2010", modifiedby"Strong Sad", lft: "1", rgt: "8", level: "0"},
    {name: "One of Everything", type: "Word Document", modifiedon: "02/12/2009", modifiedby: "Strong Bad", lft: "2", rgt: "5", level: "0"},
    {name: "My Presentation", type: "PowerPoint", modifiedon: "01/23/2009", modifiedby: "The Cheat", lft: "3", rgt: "4", level: "0"}
];

for (var i = 0; i < gridData.length; i++) {
    jQuery("#treeGrid").jqGrid('addRowData', i + 1, gridData[i]);
}

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

╭⌒浅淡时光〆 2024-09-02 07:04:23

TreeGrid 文档中还有其他警告,其中大多数似乎适用于您尝试执行的操作。

  • 目前不支持使用 addRowData 添加节点。
  • 目前不支持添加节点。
  • 目前 jqGrid 只能处理从服务器返回的数据。

看来这三个警告都适用于您。您使用 addRowData 尝试将节点添加到“空”树中,并尝试使用本地数据而不是“从服务器返回的数据”。

因此,我建议您构建示例以匹配 Treegrid 现实世界示例(可以在左侧“3.5 版本中的新增功能”下找到)


您链接到的 TreeGrid 文档说明:

为了使用此模块,您应该
下载时标记树形网格
网格。欲了解更多信息,请参阅
下载。对于开发人员 - 这是
src 中的 grid.treegrid.js
目录。

你这样做了吗? TreeGrid 的相关 js 文件是否包含在 jqGrid 的 js 文件中?

在 jsbin 上快速复制/粘贴代码对我来说很有效

http://jsbin.com/afuza/edit(然后点击预览按钮)

There are also other warnings in the TreeGrid documentation and most of them seem to apply to what you try to do.

  • Currently adding nodes with addRowData is not supported.
  • Adding nodes is currently not supported.
  • Currently jqGrid can work only with data returned from server.

It seems all of these three warnings apply to you. You use addRowData you try to add nodes to an "empty" Tree and you try to use local data instead of "data returned from server".

So I advise you to construct your sample to match the Treegrid real world example (can be found on the left side under "New in version 3.5")


The documentation for TreeGrid you linked to states:

In order to use this module you should
mark the Treegrid when you download
the grid. For more information refer
to Download. For Developers - this is
the grid.treegrid.js in the src
directory.

Did you do this? Are the relevant js-files for TreeGrid included in your js-files for jqGrid?

A quick copy/paste of your code on jsbin works for me

http://jsbin.com/afuza/edit (then hit the preview button)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文