ExtJs学习笔记 根据数据库生成动态多级树
来源:互联网 发布:网络打印机显示错误 编辑:程序博客网 时间:2024/05/22 01:50
Ext.tree.TreePanel
The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to a Ext.data.TreeStore. TreePanel's support multiple columns through the columns configuration.
Ext.data.TreeStore是Ext.tree.TreePanel的数据源,可以提供proxy(数据代理)方法来加载节点,一个treestore的构建方式如下:
var tree_store = Ext.create('Ext.data.TreeStore', { id:'tree_store', proxy: { type: 'ajax', url: '../services/Tree.ashx', reader: { type: 'json' } }, root: { expanded: false },// autoLoad: false});
这里把需要注意autoLoad这个配置项,这里即使配置了false,treestore还是会自动加载,如果要实现在事件里面手动加载而不是自动加载除了把autoLoad设置成false还必须把root: { expanded: false }这样设置。
这里的ajax请求返回的必须是满足树形结构的json格式如下:
[{'id':'1','text':'云南供电局','children':[{'id':'403351','text':'测试','children':[{'id':'403352','text':'测试小区','children':[{'id':'403360','text':'53001232','leaf':true},{'id':'403359','text':'53001231','leaf':true},{'id':'403353','text':'测试台区','leaf':true},{'id':'403355','text':'53001236','leaf':true},{'id':'403356','text':'53001237','leaf':true},{'id':'403357','text':'53001238','leaf':true},{'id':'403358','text':'53001239','leaf':true},{'id':'403361','text':'53001240','leaf':true}]}]},{'id':'402930','text':'成都军区昆明解甲园','children':[{'id':'402931','text':'解甲园','children':[{'id':'401752','text':'解甲园','leaf':true}]}]},{'id':'401741','text':'个旧市供电局','children':[{'id':'401742','text':'个旧市','children':[{'id':'402929','text':'53010001','leaf':true},{'id':'403333','text':'53010002','leaf':true},{'id':'401743','text':'丽水金湾一号变压器','leaf':true},{'id':'401751','text':'丽水金湾二号变压器','leaf':true}]}]}]}]
对应界面截图及Firebug截图:
所以后台如何生成这个json返回给前段treestore才是技术关键(这里略去,主要实现方法是设计的数据库表示有树形结构的,比如id,pid,查询这个表得到一个datatable,再根据这个datatable递归的方法去组合得到json字符串)
最后,就可以用这个treestore给treepanel做加载,这里代码完成了手动加载的方式,采用监听load事件,完成节点的展开,并且监听单击节点所要完成的一些工作,还有加上手动刷新tools按钮,并且刷新时候完成节点展开。
var treePanel = Ext.create('Ext.tree.Panel', { //layout:'fit', stateId: 'navigation-panel', id: 'tree-panel', title: '拓扑结构', region: 'west', split: true, width: 200, minWidth: 175, maxWidth: 400, animCollapse: true, rootVisible: false, //默认不显示根节点 //singleExpand: true, // //containerScroll:true, useArrows: true, store: tree_store, //root: {expanded: true}, tools: [{ type: 'refresh', tooltip: '刷新', // hidden:true, handler: function() {//Ext.data.Store load tree_store.load({ scope: this, callback: function(records, operation, success) { //Ext.Msg.alert('refresh success!'); treePanel.getRootNode().eachChild(function(child) { child.expand(); }); } }); } } ], collapsible: true, listeners: { 'load' : function(){ treePanel.expandAll(); }, 'itemclick': function(view, record, item, index, e) { nodeId = record.raw.id; //获取点击的节点id nodeText = record.raw.text; //获取点击的节点text //Ext.Msg.alert('info', nodeId + nodeText); if (tree_store.getNodeById(nodeId).hasChildNodes() === true) { ReloadMainCollectionGridTab(nodeId, 'QB', Ext.getCmp('datepicker').getRawValue(), 1, 0, 0, 1, 0, 0, 0, 0, nodeText); // } else { LoadConcentratorInfoStore(nodeId); Ext.Msg.alert('设备管理', nodeId + nodeText); } //Ext.Msg.alert('text', nodeText); } }});
- ExtJs学习笔记 根据数据库生成动态多级树
- ExtJs学习笔记 根据数据库生成动态多级树
- ExtJs学习笔记 根据数据库生成动态多级树
- 通过数据库生成多级树
- 根据数据库动态生成 title
- easyUI动态生成多级菜单树
- 动态生成多级菜单
- 动态生成多级菜单
- Extjs中动态生成树
- extjs动态树的生成。
- SQL应用之根据数据库表生成Extjs的model
- 动态生成多级菜单功能
- 【GDB调试学习笔记】Makefile多级目录生成可执行文件
- 根据数据库表生成树。
- 从一张表中动态生成多级别的树
- extjs 开始菜单动态生成
- Extjs 动态生成表格
- Extjs动态生成表头
- OSX: 实用脚本程序(bash scripts)系列-19
- 数学之路(3)-数据分析(1)
- python格式化dict输出
- DirectX 性能优化
- Block编程值得注意的那些事儿
- ExtJs学习笔记 根据数据库生成动态多级树
- 不可见索引
- Effective C++ (01)
- 复杂的心情
- 函数索引
- hibernate中一对多等关系映射图和主键生成策略
- 【HTML】使用Iframe标签显示目标网页(内容)的某区域
- 购物车3种实现方式
- 递归-汉诺塔