jQuery jqGrid TreeGrid 无法正常工作
我无法构建 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
TreeGrid 文档中还有其他警告,其中大多数似乎适用于您尝试执行的操作。
看来这三个警告都适用于您。您使用
addRowData
尝试将节点添加到“空”树中,并尝试使用本地数据而不是“从服务器返回的数据”。因此,我建议您构建示例以匹配 Treegrid 现实世界示例(可以在左侧“3.5 版本中的新增功能”下找到)
您链接到的 TreeGrid 文档说明:
你这样做了吗? 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.
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:
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)