Extjs4.0 实现 checkTree 选中一行是,复选框选中

JSON数据

复制代码
[{
    "text": "To Do", 
    "cls": "folder",
    "expanded": true,
    "children": [{
        "id":"test1",
        "text": "Go jogging",
        "leaf": true,
        "checked": true
    },{
        "id":"test2",
        "text": "Take a nap",
        "leaf": true,
        "checked": false
    },{
        "id":"test3",
        "text": "Climb Everest",
        "leaf": true,
        "checked": false
    }]
},{
    "text": "Grocery List",
    "cls": "folder",
    "children": [{
        "text": "Bananas",
        "leaf": true,
        "checked": false
    },{
        "text": "Milk",
        "leaf": true,
        "checked": false
    },{
        "text": "Cereal",
        "leaf": true,
        "checked": false
    },{
        "text": "Energy foods",
        "cls": "folder",
        "children": [{
            "text": "Coffee",
            "leaf": true,
            "checked": false
        },{
            "text": "Red Bull",
            "leaf": true,
            "checked": false
        }]
    }]
},{
    "text": "Remodel Project", 
    "cls": "folder",
    "children": [{
        "text": "Finish the budget",
        "leaf": true,
        "checked": false
    },{
        "text": "Call contractors",
        "leaf": true,
        "checked": false
    },{
        "text": "Choose design",
        "leaf": true,
        "checked": false
    }]
}]
复制代码

treeJs

复制代码
Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.window.MessageBox'
]);

Ext.onReady(function() {
    var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'check-nodes.json'
        },
        sorters: [{
            property: 'leaf',
            direction: 'ASC'
        }, {
            property: 'text',
            direction: 'ASC'
        }]
    });

    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible: false,
        useArrows: true,
        frame: true,
        title: 'Check Tree',
        renderTo: 'tree-div',
        width: 200,
        height: 250,
        dockedItems: [{
            xtype: 'toolbar',
            items: {
                text: 'Get checked nodes',
                handler: function(){
                    var records = tree.getView().getChecked(),
                        names = [];
                    
                    Ext.Array.each(records, function(rec){
                        names.push(rec.get('text'));
                    });
                    
                    Ext.MessageBox.show({
                        title: 'Selected Nodes',
                        msg: names.join('<br />'),
                        icon: Ext.MessageBox.INFO
                    });
                }
            }
        }],
        listeners: {
            
            itemclick: function (view, record, index, e)
            {
                var id = record.get("id");
                var node = store.getNodeById(id);
                if (node.data.checked != null) {
                    if (node.data.checked) {
                        return;     //节点已选中,则返回
                    }
                    else {
                        node.set('checked', true);  //设置节点选中
                    }
                }

                //找到根节点
                var rootNode = tree.getRootNode();

                var childNodes = rootNode.childNodes;

                this.changeChecked(childNodes, node);  //遍历根节点,将其他节点复选框checked设置为false
            }
        },
        changeChecked:function(childNodes,node)
        {
            for (var i = 0; i < childNodes.length;i++)
            {
                if (childNodes[i] == node) {
                    continue;
                }
                else {
                    if (childNodes[i].data.checked != null) {
                        childNodes[i].set('checked', false);
                    }
                }

                if (childNodes[i].childNodes.length > 0)
                {
                    this.changeChecked(childNodes[i].childNodes,node);
                }
            }
        }
    });
});
复制代码

 

posted @   雨~桐  阅读(452)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
点击右上角即可分享
微信分享提示