Extjs实现树形结构三连选

浏览数：33 / 时间：2015年06月09日

当项目中需要一个部门人员选择或者省市县地域连选时，就需要树形结构的连选。

 

再此，写了一个简单的树形结构三连选功能，模拟从后台读取数据和处理数据（欢迎大家交流指正）。

 

代码如下：

循环创建三棵树，其中只有第一棵树有数据，并从后台读取。

　　　　　　　var root = new Array();
            var tree = new Array();
            var loader = new Ext.tree.TreeLoader({
                dataUrl: ‘datatree.aspx‘
            })
            for (var i = 0; i < 3; i++) {
                root[i] = new Ext.tree.AsyncTreeNode({
                    id: ‘root‘ + i + ‘‘,
                    text: ‘树‘ + i + ‘‘
                })
                tree[i] = new Ext.tree.TreePanel({
                    animate: true, //是否展开有动画效果
                    title: ‘我是第‘ + i + ‘棵树‘,
                    collapsible: true,
                    enableDD: true, //是否可以拖放
                    enableDrag: true, //节点是否可以拖动
                    rootVisible: true, //根节点是否禁用
                    autoScroll: true, //是否有滚动条
                    autoHeight: true,
                    width: 200,
                    lines: true,
                    useArrows: true,
                    root: root[i]
                })
            }

 

配置treePanel属性:

这里需要注意的是:一定要为第二三棵树的根节点设置leaf=true属性，否则加载页面后默认这两棵树根节点下有节点，将会影响程序正常运行

　　　　　　　root[1].leaf = true;
　　　　　　　root[2].leaf = true;
            tree[0].region = ‘west‘;
            tree[0].loader = loader;
            tree[1].region = ‘center‘;
            tree[2].region = ‘east‘;

 

创建window:

 

var win = new Ext.Window({
                title: "window",
                height: 500,
                width: 600,
                plain: true,
                layout: ‘border‘,
                defaults: {
                    split: true,                 //是否有分割线
                    collapsible: true,           //是否可以折叠
                    bodyStyle: ‘padding:15px‘
                },
                items: [tree[0], tree[1], tree[2]]
            })
            win.show();

 

为treePanel添加双击事件:

分别为第一棵和第二棵树添加事件:

　　　　　　　tree[0].on(‘dblclick‘, function (node, event) {
                tree[1].loader.dataUrl = ‘treeNode/tree1_1.aspx?name=‘ + node.text + ‘‘;
                tree[1].getRootNode().setText(‘‘ + node.text + ‘‘);
                tree[1].root.reload();
                tree[1].root.expand(true);
            });
            tree[1].on(‘dblclick‘, function (node, event) {
                tree[2].loader.dataUrl = ‘treeNode/tree1_1.aspx?name=‘ + node.text + ‘‘;
                tree[2].getRootNode().setText(‘‘ + node.text + ‘‘);
                tree[2].root.reload();
                tree[2].root.expand(true);
            });

 

后台数据处理页面:

tree1_1.aspx页面:
string param = Request.Params["name"];
data = "[{text:‘" + param + ".1‘,leaf:true},{text:‘" + param + ".2‘,leaf:true},{text:‘" + param + ".3‘,leaf:true}]";

 

datatree.aspx页面：
data = "[{text:‘10.1‘,leaf:true},{text:‘10.2‘,leaf:true},{text:‘10.3‘,leaf:true}]";

 

效果图：

技术分享

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log com 代码 src http si it class style log com 代码 src http si it

相关文章

随机文章

您可能还喜欢

您可能还喜欢