只是在頁(yè)面中演示tree的使用,寫死在頁(yè)面中,未從數(shù)據(jù)庫(kù)中調(diào)用數(shù)據(jù)
<script type="text/javascript"> Ext.onReady(function() { var tree = Ext.create('Ext.tree.Panel', { title : '樹(shù)面板簡(jiǎn)單示例',//標(biāo)題 width : 200, height : 500, rootVisible: true,//是否顯示root renderTo : Ext.getBody(), root : { text : '樹(shù)根',//節(jié)點(diǎn)名稱 expanded : true,//默認(rèn)展開(kāi)根節(jié)點(diǎn) //創(chuàng)建子節(jié)點(diǎn) children : [ //第一個(gè)子節(jié)點(diǎn) { text : '節(jié)點(diǎn)1',//節(jié)點(diǎn)名稱 leaf : false,//說(shuō)明不是葉子節(jié)點(diǎn),可以加子節(jié)點(diǎn) children : { text : '節(jié)點(diǎn)1',//節(jié)點(diǎn)名稱 leaf : true,//說(shuō)明為葉子節(jié)點(diǎn),后面不再有子節(jié)點(diǎn) } }, //第二個(gè)子節(jié)點(diǎn) { text : '節(jié)點(diǎn)2',//節(jié)點(diǎn)名稱 leaf : true,//說(shuō)明為葉子節(jié)點(diǎn) } ] } }); }); </script>
效果圖
多列樹(shù)
<script type="text/javascript"> Ext.onReady(function() { var tree = Ext.create('Ext.tree.Panel', { title : '樹(shù)面板簡(jiǎn)單示例',//標(biāo)題 width : 300, height : 500, rootVisible: true,//是否顯示root fields : ['text','description'], columns : [ { xtype: 'treecolumn',//樹(shù)狀表格列 text: '名稱', dataIndex: 'text', //設(shè)置顯示的名稱 width: 150, sortable: true }, { text: '描述', dataIndex: 'description', flex: 1, sortable: true } ], renderTo : Ext.getBody(), root : { text : '樹(shù)根',//節(jié)點(diǎn)名稱 description : '根目錄', expanded : true,//默認(rèn)展開(kāi)根節(jié)點(diǎn) //創(chuàng)建子節(jié)點(diǎn) children : [ //第一個(gè)子節(jié)點(diǎn) { text : '節(jié)點(diǎn)1',//節(jié)點(diǎn)名稱 description : '第一個(gè)節(jié)點(diǎn)', leaf : false,//說(shuō)明不是葉子節(jié)點(diǎn),可以加子節(jié)點(diǎn) children : { text : '節(jié)點(diǎn)1的節(jié)點(diǎn)',//節(jié)點(diǎn)名稱 description : '第一個(gè)節(jié)點(diǎn)的節(jié)點(diǎn)', leaf : true,//說(shuō)明為葉子節(jié)點(diǎn),后面不再有子節(jié)點(diǎn) } }, //第二個(gè)子節(jié)點(diǎn) { text : '節(jié)點(diǎn)2',//節(jié)點(diǎn)名稱 description : '第二個(gè)節(jié)點(diǎn)', leaf : true,//說(shuō)明為葉子節(jié)點(diǎn) } ] } }); }); </script>
效果圖
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
