Extjs Ext.TreePanel

 TreePanel 简单实例。

技术分享

 <link  rel="stylesheet"  href="Js/ext-4.2/resources/css/ext-all-neptune.css"/>
    <script src="Js/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Js/ext-4.2/ext-all-dev.js" type="text/javascript"></script> 
    
    <script type="text/javascript">

        var tree;
        $(document).ready(function() {
            
            //Ext.create(‘Ext.tree.Panel‘, {  });

            tree = new Ext.tree.TreePanel({
                renderTo: tree1,
                title: Simple Tree,
                multiSelect: true,
                width: 200,
                height: 450,
                viewConfig: {
                    onCheckboxChange: function(e, t) {
                        var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record;

                        if (item) {
                            record = this.getRecord(item);
                            var check = !record.get(checked);
                            //getSelectedNodes()
                            record.set(checked, check);
                            if (check) {
                                record.bubble(function(parentNode) {
                                    parentNode.set(checked, true);
                                });
                                record.cascadeBy(function(node) {
                                    node.set(checked, true);
                                });
                                //                                record.expand();  联动效果 自动收起 自动展开
                                //                                record.expandChildren();
                            } else {
                                //                                record.collapse();
                                //                                record.collapseChildren();
                                record.cascadeBy(function(node) {
                                    node.set(checked, false);
                                });
                                record.bubble(function(parentNode) {
                                    var childHasChecked = false;
                                    var childNodes = parentNode.childNodes;
                                    if (childNodes || childNodes.length > 0) {
                                        for (var i = 0; i < childNodes.length; i++) {
                                            if (childNodes[i].data.checked) {
                                                childHasChecked = true;
                                                break;
                                            }
                                        }
                                    }
                                    if (!childHasChecked) {
                                        parentNode.set(checked, false);
                                    }
                                });

                            }
                        }
                    }
                },
                root: {
                    text: Root,
                    expanded: true, //是否展开子节点,默认为false
                    checked: true,
                    children: [
                                { id: 1, text: Child 1, checked: true, leaf: true },
                                { id: 2, text: Child 2, checked: true, leaf: true },
                                { id: 3, text: Child 3, checked: true, expanded: true, children: [{ id: 4, text: Grandchild, checked: true, leaf: true}] }
                              ]
                }
            });
 

            //窗体
            var win = new Ext.Window({
                title: 窗口,
                width: 476,
                height: 574,
                resizable: true,
                modal: true,
                closable: true,
                maximizable: true,
                minimizable: true,
                items: tree
            });
            win.show();

            var attr = tree.getChecked();
            
            for (var le = 0; le < attr.length; le++) {
                var json = eval(attr[le].getData());
            json.text; } });
</script>
root:是树的根节点。
checked: true 树有选择框。
onCheckboxChange:设置树连及效果,父级选中后 所有子集也全部选中。
getChecked():获取所有选择的 树节点数据。
getChecked()下的getData()获取每个节点的数据 。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。