easyui樹形表格是一種可以展示大量數(shù)據(jù)的高效方式,它通過樹形結(jié)構(gòu)的方式呈現(xiàn)數(shù)據(jù),使得數(shù)據(jù)更加清晰易懂。而使用json格式來傳遞數(shù)據(jù),則是一種簡便、高效的實現(xiàn)方式。
下面是一段使用json格式傳遞數(shù)據(jù)的easyui樹形表格代碼:
$(function(){ $('#tt').treegrid({ url:'treegrid_data.json', idField:'id', treeField:'name', columns:[[ {title:'Name',field:'name',width:180}, {title:'Size',field:'size',width:80,align:'right'}, {title:'Type',field:'type',width:80}, {title:'Date Modified',field:'date',width:150} ]] }); });
在這段代碼中,我們使用了idField和treeField兩個參數(shù)來指定需要展示的數(shù)據(jù),其中idField代表節(jié)點的唯一標(biāo)識符,而treeField則代表節(jié)點的名稱。在columns數(shù)組中,則列出需要展示的列,并可以指定它們的寬度和對齊方式等。
同時,我們也需要提供一個treegrid_data.json文件來提供數(shù)據(jù):
[{ "id":1, "name":"Folder 1", "size":"10 KB", "type":"Folder", "date":"01/01/2021", "children":[{ "id":11, "name":"File 1", "size":"5 KB", "type":"File", "date":"01/01/2021" },{ "id":12, "name":"File 2", "size":"3 KB", "type":"File", "date":"01/01/2021" }] },{ "id":2, "name":"Folder 2", "size":"20 KB", "type":"Folder", "date":"01/01/2021", "children":[{ "id":21, "name":"File 3", "size":"8 KB", "type":"File", "date":"01/01/2021" }] }]
在這個文件中,我們通過id和children來建立樹形結(jié)構(gòu),children則代表該節(jié)點下的子節(jié)點,因此它也是一個數(shù)組。同時,我們也提供了每個節(jié)點的具體數(shù)據(jù),如名稱、大小、類型和修改日期等。
使用以上的代碼和數(shù)據(jù),我們可以輕松地創(chuàng)建一個easyui樹形表格,并展示我們所需要的數(shù)據(jù)。
上一篇vue全家桶卸載
下一篇vue excel表