ExtJS4学习笔记(十八)---带复选框的树（Checkbox tree）

最新推荐文章于 2018-04-25 15:34:24 发布

zhaoqiliang527

最新推荐文章于 2018-04-25 15:34:24 发布

阅读量3.1k

点赞数

分类专栏： JS ExtJs4.0 ExtJs 文章标签： extjs tree function json ajax url

本文链接：https://blog.csdn.net/zhaoqiliang527/article/details/6733343

版权

ExtJs 同时被 3 个专栏收录

61 篇文章 0 订阅

订阅专栏

50 篇文章 0 订阅

订阅专栏

ExtJs4.0

22 篇文章 1 订阅

订阅专栏

实例显示了一个简单的带复选框的的树，通过返回的JSON数据来显示复选框是否是选中/不选中状态。例子中没有采用异步的方式展开节点。如果想使用异步方式加载节点，可以参考本站另一片文章来实现此功能，链接地址为：www.mhzg.net/a/20112/2011222109040.html

效果图

js代码：

      
  
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: 289, 
        height: 220, 
        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 
                    }); 
                } 
            } 
        }] 
    }); 
}); 

HTML代码：

      
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Tree Example</title> 
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
    <link rel="stylesheet" type="text/css" href="../shared/example.css" /> 

 
    <script type="text/javascript" src="../../bootstrap.js"></script> 
    <script type="text/javascript" src="check-tree.js"></script> 
     
    <style> 
        .x-tree-checked { 
            text-decoration: line-through; 
            color: #777; 
        } 
        .x-grid-row-selected .x-grid-cell { 
            background-color: #efefef !important; 
        } 
    </style> 
</head> 
<body> 
   <div id="tree-div"></div> 
</body> 
</html>

JSON：

      
  
[{ 
    "text": "To Do",  
    "cls": "folder", 
    "expanded": true, 
    "children": [{ 
        "text": "Go jogging", 
        "leaf": true, 
        "checked": true
    },{ 
        "text": "Take a nap", 
        "leaf": true, 
        "checked": false
    },{ 
        "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
    }] 
}]

OK。。实例中，当我们选择了某个节点的复选框，点击 Get checked nodes 按钮，我们可以得到此节点的text值，本例当点击Get checked nodes按钮，弹出的对话框会显示Go jogging。可我们在实际操作中，显示的文本并不能满足我们的需求，一般来说，我们需要获取此节点的ID值，然后传到服务端，进行操作。下面改造下我们的JS代码：

      
  
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: 289, 
        height: 220, 
        dockedItems: [{ 
            xtype: 'toolbar',  
            items: { 
                text: 'Get checked nodes', 
                handler: function(){ 
                    var records = tree.getView().getChecked(), 
                        names = []; 
                        //为存储ID而创建数组  
                        ids   = []; 
                     
                    Ext.Array.each(records, function(rec){ 
                        names.push(rec.get('text')); 
                        //将选中的节点的ID保存 
                        ids.push(rec.get('id')); 
                    }); 
                     
                    Ext.MessageBox.show({ 
                        title: 'Selected Nodes', 
                        msg: names.join('<br />')+ids.join('<br />'), 
                        icon: Ext.MessageBox.INFO 
                    }); 
                } 
            } 
        }] 
    }); 
}); 

例子中我们增加了一个数组ids,并在循环中将被选中的节点压入ids中，最后在对话框中显示选中节点的text值和id值。在尝试之前，我们还需要将我们的JSON数据做下调整。调整后的JSON数据如下：

      
  
[{ 
    "text": "To Do",  
    "cls": "folder", 
    "expanded": true, 
    "children": [{ 
        "text": "Go jogging", 
        "id"  : "3", 
        "leaf": true, 
        "checked": true
    },{ 
        "text": "Take a nap", 
        "leaf": true, 
        "id"  : "4", 
        "checked": false
    },{ 
        "text": "Climb Everest", 
        "leaf": true, 
        "id"  : "5", 
        "checked": false
    }] 
},{ 
    "text": "Grocery List", 
    "cls": "folder", 
    "children": [{ 
        "text": "Bananas", 
        "leaf": true, 
        "id"  : "8", 
        "checked": false
    },{ 
        "text": "Milk", 
        "leaf": true, 
        "id"  : "10", 
        "checked": false
    },{ 
        "text": "Cereal", 
        "leaf": true, 
        "id"  : "15", 
        "checked": false
    },{ 
        "text": "Energy foods", 
        "cls": "folder", 
        "children": [{  
            "text": "Coffee", 
            "leaf": true, 
            "id"  : "52", 
            "checked": false
        },{ 
            "text": "Red Bull", 
            "leaf": true, 
            "id"  : "13", 
            "checked": false
        }] 
    }] 
},{ 
    "text": "Remodel Project",  
    "cls": "folder", 
    "children": [{ 
        "text": "Finish the budget", 
        "leaf": true, 
        "id"  : "34", 
        "checked": false
    },{ 
        "text": "Call contractors", 
        "leaf": true, 
        "id"  : "103", 
        "checked": false
    },{ 
        "text": "Choose design", 
        "leaf": true, 
        "id"  : "6", 
        "checked": false
    }] 
}]

是的，在JSON数据中，要返回id的值，这样才能确保代码可以获取正确的值。

zhaoqiliang527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4学习笔记(十八)---带复选框的树（Checkbox tree）

实例显示了一个简单的带复选框的的树，通过返回的JSON数据来显示复选框是否是选中/不选中状态。例子中没有采用异步的方式展开节点。如果想使用异步方式加载节点，可以参考本站另一片文章来实现此功能，链接地址为：www.mhzg.net/a/20112/2011222109040.htm
复制链接

扫一扫

专栏目录