EXTJS4 checkbox树

最新推荐文章于 2017-08-19 16:20:38 发布

原创最新推荐文章于 2017-08-19 16:20:38 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

85 篇文章

订阅专栏

本文介绍如何使用Ext.js创建一个树形面板，并实现节点的选中、展开等功能，包括节点选中状态的传递和获取所有已选中节点的方法。

var store = Ext.create('Ext.data.TreeStore', {
                fields : ["id", "text"],
                root : {
                    expanded : true,
                    children : respText.data
                }
            });

            var navTree = Ext.create('Ext.tree.Panel', {
                title : '树',
                store : store,
                border : 0,
                autoScroll : true,
                width : '100%',
                height : '100%',
                rootVisible : false,
                multiSelect : true,
                lines : true,
                useArrows : true
            });

            navTree.on('checkchange', function (node, checked) {
                treeclick(node, checked);
                findPointByGroupId(navTree)
            }, navTree);

function treeclick(node, checked)
    {
        node.expand();
        node.checked = checked;
        if (node.hasChildNodes()) {                 //是否有子节点
            node.eachChild(function(child) {         //循环下一级的所有子节点
                child.set('checked', checked);     //赋值
                treeclick(child, checked);                   //递归选中子节点
            });
        }
    }


    function getAllCheckedNode(node, idArray) {
        var checked = node.checked;
        if (checked) {
            idArray.push(node.data.id);
        }
        if (node.hasChildNodes()) {                 //是否有子节点
            node.eachChild(function(child) {         //循环下一级的所有子节点
                getAllCheckedNode(child, idArray);                   //递归选中子节点
            });
        }
    }