首页 > 代码库 > ExtJS 动态加载树treepanel
ExtJS 动态加载树treepanel
先来看看效果：
一、新建一个TreeStore，并添加根节点
Ext.define(‘Demo1.store.TreeDemoStore‘, { extend: ‘Ext.data.TreeStore‘, root: { text: ‘目录树‘, id: 0 }});
二、在view中添加treepanel，绑定TreeDemoStore
Ext.define(‘Demo1.view.MyViewport‘, { extend: ‘Ext.container.Viewport‘, initComponent: function () { var me = this; Ext.applyIf(me, { items: [ { xtype: ‘treepanel‘, id: ‘treeDemo‘, height:500, store: ‘TreeDemoStore‘, autoScroll: true } ] }); this.callParent(arguments); }});
三、在controller的onLaunch方法中加载树
Ext.define(‘Demo1.controller.MyController‘, { extend: ‘Ext.app.Controller‘, init: function (application) { }, onLaunch: function () { //请求数据列表(数据保存在哪里就随你了，这里我先写死)id:节点id;text:节点名称;pid:父节点id var info = [ { id: ‘1‘, text: ‘二级节点1‘, pid: ‘0‘ }, { id: ‘2‘, text: ‘二级节点2‘, pid: ‘0‘ }, { id: ‘3‘, text: ‘二级节点3‘, pid: ‘0‘ }, { id: ‘4‘, text: ‘二级节点1-三级节点1‘, pid: ‘1‘ }, { id: ‘5‘, text: ‘二级节点1-三级节点2‘, pid: ‘1‘ }, { id: ‘6‘, text: ‘二级节点2-三级节点1‘, pid: ‘2‘ }, { id: ‘7‘, text: ‘二级节点2-三级节点2‘, pid: ‘2‘ }, { id: ‘8‘, text: ‘二级节点2-三级节点1-四级节点1‘, pid: ‘6‘ }, { id: ‘9‘, text: ‘二级节点2-三级节点1-四级节点2‘, pid: ‘6‘ } ]; var store = Ext.data.StoreManager.lookup(‘TreeDemoStore‘); var root = store.getRoot(); appendTreeChildNodes(root, 0, info); }});//根据父节点id加载子节点function appendTreeChildNodes(node, pid, infos) { var children = []; var childModel = {}; for (var i = 0; i < infos.length; i++) { if (infos[i].pid == pid) { childModel = {}; childModel.text = infos[i].text;; childModel.id = infos[i].id; childModel.pid = infos[i].pid; children.push(childModel); infos.splice(i, 1); i--; } } node.appendChild(children); if (node.hasChildNodes()) { node.eachChild(function (child) { appendTreeChildNodes(child, child.get(‘id‘), infos); //递归 }); } else { node.set(‘leaf‘, true); }}
ok了，就这么简单，下面附上源码：ExtJSDemo-TreePanel
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。