ExtJS是一款流行的Javascript框架,其中的tree組件可以很方便地顯示層級數(shù)據(jù)。在使用tree組件時,可以通過json數(shù)據(jù)來動態(tài)構(gòu)建樹形結(jié)構(gòu)。
以下是一個用ExtJS的tree組件展示json數(shù)據(jù)的實例:
var treeData = { text: '頂級節(jié)點', expanded: true, children: [ { text: '第一級節(jié)點1', children: [ { text: '第二級節(jié)點1', leaf: true }, { text: '第二級節(jié)點2', leaf: true } ] }, { text: '第一級節(jié)點2', children: [ { text: '第二級節(jié)點3', leaf: true }, { text: '第二級節(jié)點4', leaf: true } ] } ] }; var tree = Ext.create('Ext.tree.Panel',{ title: '樹形數(shù)據(jù)示例', height: 300, width: 400, store: Ext.create('Ext.data.TreeStore', { root: treeData }), rootVisible: false }); Ext.getBody().add(tree);
代碼中,先定義了一個json格式的treeData,其中包含多個層級的節(jié)點信息。通過Ext.create方法創(chuàng)建了一個tree組件,并指定了顯示的標(biāo)題、高度、寬度和數(shù)據(jù)源。根據(jù)treeData數(shù)據(jù)創(chuàng)建了一個TreeStore,并傳入tree組件中的store屬性中。同時,通過設(shè)置rootVisible為false,使根節(jié)點不顯示在tree組件中。
以上是用ExtJS tree組件展示json數(shù)據(jù)的簡單實例,通過json數(shù)據(jù)動態(tài)構(gòu)建樹形結(jié)構(gòu),可以方便地展示層級數(shù)據(jù)。