ext4/ext5 tree树节点搜索展开示例

  extjs如何通过关键字查找树节点,并且展开找到的tree节点。本示例在ext-5.1.0,ext-4.1.1a下测试通过。

ext4/ext5 tree树节点搜索展开示例

<title>ext4,ext5的tree树节点搜索示例</title>
关键字:<input type="text" id="t" /><input type="button" value="搜索所有节点并展开" onclick="findNode()" />
<script>
    var rootNode,store,tree;
    Ext.onReady(function () {
        store = Ext.create('Ext.data.TreeStore', { root: { expanded: true }, proxy: { type: 'ajax', url: 'data.json' }, listeners: { load: function () { rootNode=store.getRootNode()}} });
        tree=Ext.create('Ext.tree.Panel', {
            store: store,
            rootVisible: false,
            renderTo: document.body
        });
    });
    function findNode() {
        var v = document.getElementById('t').value;
        if (v == '') { alert('请输入关键字!'); return }
        var hitNodes = [];
        //findChildBy只返回第一个命中的节点,如果要查找所有节点不返回true即可,自己判断包含关键字就压入命中节点数组中
        rootNode.findChildBy(function (node) {
            if (node.get('text').toLowerCase().indexOf(v) != -1) hitNodes.push(node);
        }, window, true);
        var pNode
        if (hitNodes.length > 0)
            for (var i = 0; i < hitNodes.length; i++) 
                if (!hitNodes[i].isExpanded()) {//不是展开状态
                    //如果每个节点有ID,调用getPath()【默认为id列数据】获取路径后调用tree的方法expandPath
                    //tree.expandPath(hitNodes[i].getPath());
                    //没有id配置,需要指定生成路径的列名称,并且expandPath也要指定列明
                    tree.expandPath(hitNodes[i].getPath('text'), 'text');
                }
    }
</script>

data.json

[
    {
        "text": "编程语言",
        "children": [
            {
                "text": "服务器端语言",
                "children": [ { "text": "C#","leaf": true }, { "text": "Java","leaf": true}, { "text": "PHP","leaf": true } ]
            },
            {
                "text": "客户端语言","id": 12,
                "children": [ { "text": "JavaScript","leaf": true }, { "text": "VBScript" ,"leaf": true} ]
            }
        ]
    },
    {
        "text": "设计软件",
        "children": [ { "text": "CorelDraw","leaf": true }, { "text": "PhotoShop","leaf": true }, { "text": "3D Max","leaf": true} ]
    }
]

 


原创文章,转载请注明出处:ext4/ext5 tree树节点搜索展开示例

评论(0)Web开发网
阅读(385)喜欢(0)不喜欢(0)extjs开发技巧