Jquery easyUI treeGride用js初始化后不显示树结构的解决方案

最新推荐文章于 2023-03-16 22:31:38 发布

原创最新推荐文章于 2023-03-16 22:31:38 发布 · 5.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #treeGride #不显示 #树

WEB前端专栏收录该内容

13 篇文章

订阅专栏

本文探讨了在treeGride1.44及之前的版本中使用JS加载JSON数据初始化treeGrid时可能出现的问题，并提供了确保数据结构正确性的解决方法。

问题:

已知treeGride 1.44以及之前的版本中,用js的方式加载json数据来初始化一个treeGride可能会出现没有树结构的情况;

原因以及解决方法:

js初始化时候,treeField中指定的字段,一定要在columns中出现,如果没有出现,则不会有树形结构;

如下列子中:treeField:'name'和columns:[[
{title:'Task Name',field:'name',width:180}中字段name的对应;

其要求的数据格式如下:

[{
    "id":1,
    "name":"C",
    "size":"",
    "date":"02/19/2010",
    "children":[{
        "id":2,
        "name":"Program Files",
        "size":"120 MB",
        "date":"03/20/2010",
        "children":[{
            "id":22,
            "name":"MySQL",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "children":[{
                "id":221,
                "name":"my.ini",
                "size":"10 KB",
                "date":"02/26/2009"
            }]
        }]
    },{
        "id":3,
        "name":"eclipse",
        "size":"",
        "date":"01/20/2010",
        "children":[{
            "id":31,
            "name":"eclipse.exe",
            "size":"56 KB",
            "date":"05/19/2009"
        }]
    }]
}]

用js方式初始化如下,其中数据data_data代表上面那种树形结构的数据:

$('#tt').treegrid({
	data:data_data,
	idField:'id',
	treeField:'name',
	columns:[[
		{title:'Task Name',field:'name',width:180},
		{field:'persons',title:'Persons',width:60,align:'right'},
		{field:'begin',title:'Begin Date',width:80},
		{field:'end',title:'End Date',width:80}
	]]
});

<table id="tt" style="width:600px;height:400px"></table>