• 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,
                     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: '窗口',
                     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()获取每个节点的数据 。
  • 相关阅读:
    smarty对网页性能的影响
    php-fpm正在生成页面时,浏览器刷新后,php-fpm会退出吗?
    为什么日志记录到别的目录了?
    一个空格引发的bug
    linux内核--页高速缓存
    radix树
    linux内核--用户态内存管理
    linux内核--内核内存管理
    linux内核--软中断与tasklet
    linux内核--几个上下文(context)
  • 原文地址:https://www.cnblogs.com/dragon-L/p/4435106.html
Copyright © 2020-2023  润新知