extjs3的treepanel级联效果

最新推荐文章于 2019-06-21 17:36:54 发布

Johnny_Muger

最新推荐文章于 2019-06-21 17:36:54 发布

阅读量662

点赞数

分类专栏：技术类

本文链接：https://blog.csdn.net/JohnnyMuger/article/details/18844043

版权

技术类专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Ext.js库配置TreePanel组件，使其支持级联选中特性，并通过事件监听实现节点选择状态的同步更新。文章包含组件属性设置、事件响应及数据加载流程，适合前端开发者深入理解Ext.js在复杂树形结构应用中的使用。

摘要由CSDN通过智能技术生成

有两处需要注意"---级联选中"

selectTree = new Ext.tree.TreePanel({
        checkModel: 'cascade',---级联选中
        border : false,
        id : 'ext-tree',
        autoScroll : true,
        anchor : '100% 100%',
        width : 200,
        animate : true,
        frame : false,
        // autoHeight :true,
        enableDD : false,
        containerScroll : true,
        rootVisible : false,
        root : new Ext.tree.AsyncTreeNode({
         text : '根',
         draggable : false,
         id : Global.Config.dept.root
        }),
        loader : new Ext.tree.TreeLoader({
         dataUrl : 你的数据源'
        })

       });
       ---级联选中
       selectTree.on('checkchange', function(node, checked){
           node.attributes.checked = checked;
                         node.expand();
                         node.eachChild(function(child){
                         child.ui.toggleCheck(checked);
                         child.attributes.checked = checked;
                         child.fireEvent('checkchange', child, checked);
                     });
                 }, selectTree);
            selectTree.on(
                   'beforeload',
                     function(node){
                    loading = new Ext.LoadMask(Ext.get(treeWin.getEl()), { msg: "正在加载数据,请等待..." });
                       loading.show();
                     }, selectTree);
            selectTree.on(
                 'load',
                 function(node){
                 node.eachChild(function(child){
                   if(child.leaf&&child.departPriviType=='enable'){
                    child.ui.toggleCheck(true);
                         child.attributes.checked = true;
                         child.attributes.checked = false;
                   }
                     });
                 loading.hide();
                 }, selectTree);
             treeWin.add(selectTree);