Ext.tree.Panel显示checkbox并且级联选择或者取消选择

  ext4,ext5 Ext.data.TreeStore如何显示复选框checkbox,勾选复选框checkbox时如何级联选中子节点的复选框。

Ext.tree.Panel显示checkbox并且级联选择

  ext4,ext5实现check tree级联选择源代码如下

提示:checkchange事件参数node,5+返回的是Ext.data.TreeModel,ext4是Ext.data.NodeInterface对象

    Ext.onReady(function () {
        store = Ext.create('Ext.data.TreeStore', { root: { expanded: true }, proxy: { type: 'ajax', url: 'data.json' } });
        Ext.create('Ext.tree.Panel', {
            listeners: {
                checkchange: function (node, checked, opts) {
                    if (checked) checkParentNode(node.parentNode, checked);
                    checkChildNode(node, checked);
                }
            },
            store: store,
            rootVisible: false,
            renderTo: document.body
        });
    });
    function checkChildNode(node, checked) {
        if (!node) return;
        node.set('checked', checked);
        node.eachChild(function (child) {
            checkChildNode(child, checked);
        });
    }
    function checkParentNode(node, checked) {
        if (!node) return;
        node.set('checked', checked);
        checkParentNode(node.parentNode);
    }

data.json,Ext.tree.Panel显示复选框很简单,每个节点增加checked属性(布尔值)即可。

[
    {
        "id": 1,
        "text": "Class 1",
        "leaf": false,"checked":false,
        "children": [
            {
                "id": 2,
                "text": "Class 1.1",
                "leaf": true,
                "children": [ ],"checked":false
            },
            {
                "id": 3,
                "text": "Class 1.2",
                "leaf": true,
                "children": [ ],"checked":false
            }
        ]
    },
    {
        "id": 4,
        "text": "Class 2",
        "leaf": false,
        "children": [
            {
                "id": 5,
                "text": "Class 2.1",
                "leaf": true,
                "children": [ ],"checked":false
            }
        ],"checked":false
    }
]

 


原创文章,转载请注明出处:Ext.tree.Panel显示checkbox并且级联选择或者取消选择

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