最新項目中用到TreeGrid,查閱了很多資料,總的來說有些心得,願意拿出來和大家一起分享一下:
一、在頁面中引入 :ext-all.css、treegrid.css、ext-base-debug.js、ext-all-debug.js、TreeGridSorter.js、TreeGridColumnResizer.js、TreeGridNodeUI.js、TreeGridLoader.js、TreeGridColumns.js、TreeGrid.js
二、為了保持代碼規范,創建一個myTreeGrid.js,引入頁面。
三、myTreeGrid.js中的代碼:
對於處理數據量小的,可以把數據一次性加載進來,代碼如下:
Ext.onReady(function() { Ext.QuickTips.init(); //定義樹的加載器,采用的MVC取的數據,返回的是JSON數據格式 var treeloader = new Ext.ux.tree.TreeGridLoader({ dataUrl: "/TreeData/GetTreeJsonData" }); var treeGrid = new Ext.ux.tree.TreeGrid({ title: 'Core Team Projects', width: 500, height: 300, renderTo: Ext.getBody(), //渲染 enableDD: true, //節點是否可移動 columns:[{ header: 'Task', dataIndex: 'task', //索引,與JSON數據中的某個名稱對應 width: 230 },{ header: 'Duration', width: 100, dataIndex: 'duration', align: 'center', },{ header: 'Assigned To', width: 150, dataIndex: 'user' }], loader: treeloader //加載數據 }); });
實現異步加載數據,代碼如下:
Ext.onReady(function() { Ext.QuickTips.init();//實現智能提示的作用 var treeGrid = new Ext.ux.tree.TreeGrid({ title: 'Core Team Projects', width: 500, height: 300, renderTo: Ext.getBody(), //渲染 enableDD: true, //節點是否可移動 columns:[{ header: 'Task', dataIndex: 'task', //索引,與JSON數據中的某個名稱對應 width: 230 },{ header: 'Duration', width: 100, dataIndex: 'duration', align: 'center', },{ header: 'Assigned To', width: 150, dataIndex: 'user' }], requestUrl: '/TreeData/GetTreeJSONData/?NodeName=' listeners: { //監聽事件 'beforeload': function (node) {//節點加載前 if (node.isRoot) { //首次加載 this.loader.dataUrl = this.requestUrl; }else { var nodeText = node.attributes["text"]; //取得點擊節點名稱 var rqtUrl = this.requestUrl + nodeText; //得到新的URL地址 if (node.attributes.loader.dataUrl) { this.loader.dataUrl = rqtUrl //點擊節點,后台請求數據 } } this.root.attributes.loader = null; //防止節點的重復加載 } } }); });
四、JSON數據
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於JavaScript的一個子集。Extjs中應用較多的,例如Tree、Gridview、Combo等,一般都會用到JSON提供數據,簡單方便。
五、以上都是個人的心得,用的是.NET MVC2開發環境。