基于ext2.0的含有checkBox的tree

http://www.smellcode.cn/index.php/javascript/jiyuext20dehanyoucheckboxdetree/

评论

8 楼 wangangonline 2008-08-09  

ie出不来，firebox可以，但是中为不显示

7 楼 379548695 2008-08-09  

<div class='quote_title'>小蚯蚓 写道</div>
<div class='quote_div'>
<div class='quote_title'>smellcode 写道</div>
<div class='quote_div'>
<div class='quote_title'>引用</div>
<div class='quote_div'>mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊</div>
你其实可以用最简单的树来实现，不用什么extend<br/>
<pre name='code' class='html'>&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
        &lt;title&gt;Reorder TreePanel&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" /&gt;

        &lt;script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript" src="../../../support/js/ext-all-debug.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript"&gt;
            Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
            var tree = null;
            Ext.onReady(function(){
                // shorthand
                var Tree = Ext.tree;
               
                tree = new Tree.TreePanel({
                    el:'tree-div',
                    autoScroll:true,
                    animate:true,
                    enableDD:true,
                    containerScroll: true,
                    loader: new Tree.TreeLoader({
                        dataUrl:'xmmapjson.json'
                    }),
                    rootVisible: false
                });

               
                tree.on('checkchange', function(node, checked) {
                    node.expand();
                    node.attributes.checked = checked;
                    node.eachChild(function(child) {
                        child.ui.toggleCheck(checked);
                        child.attributes.checked = checked;
                        child.fireEvent('checkchange', child, checked);
                    });
                }, tree);

                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'root',
                    draggable:false,
                    id:'root'
                });

                tree.setRootNode(root);

                // render the tree
                tree.render();
                root.expand();
            });


            var fn = function() {
                alert(tree.getChecked('id'));
            };

    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body scroll="no"&gt;
        &lt;b&gt;Checked Nodes: &lt;/b&gt; &lt;input type="text" id="cn" value="" size="40" autocomplete="off" /&gt;&lt;br /&gt;
        &lt;div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"&gt;&lt;/div&gt;
        &lt;input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" /&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p> 这是json数组：</p>
<pre name='code' class='xml'>[
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
"children":[
{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
]
},
{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
]
}
]
},
{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
]
}
]
}
]
</pre>
 
<p> </p>
<p> </p>
</div>
</div>
<div class='quote_div'><br/>但是发现一个问题就是，当你将节点收拢的后，再展开节点，节点下的构选项无法保存，也就是说，child.ui.toggleCheck(checked);根本没有保存变化，我用的版本是2.0b</div>
<div class='quote_div'><br/></div>
<div class='quote_div'><br/></div>
<div class='quote_div'>你把<span>animate:false,  看看。就可以啦！<br/></span></div>

6 楼 aiwobucuo 2008-06-28  

你的JSON数据组是怎么样生成的啊

5 楼 [e-mail] 2008-06-15  

我也写了一个复选框的树
但是我想 知道怎么实现、特定情况下把页面变成灰色 就是不可以对chenked  或是当前这棵树进行操作。

4 楼 小蚯蚓 2008-03-19  

<div class='quote_title'>smellcode 写道</div><div class='quote_div'><div class='quote_title'>引用</div><div class='quote_div'>mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊</div>你其实可以用最简单的树来实现，不用什么extend<br/><pre name='code' class='html'>&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
        &lt;title&gt;Reorder TreePanel&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" /&gt;

        &lt;script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript" src="../../../support/js/ext-all-debug.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript"&gt;
            Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
            var tree = null;
            Ext.onReady(function(){
                // shorthand
                var Tree = Ext.tree;
               
                tree = new Tree.TreePanel({
                    el:'tree-div',
                    autoScroll:true,
                    animate:true,
                    enableDD:true,
                    containerScroll: true,
                    loader: new Tree.TreeLoader({
                        dataUrl:'xmmapjson.json'
                    }),
                    rootVisible: false
                });

               
                tree.on('checkchange', function(node, checked) {
                    node.expand();
                    node.attributes.checked = checked;
                    node.eachChild(function(child) {
                        child.ui.toggleCheck(checked);
                        child.attributes.checked = checked;
                        child.fireEvent('checkchange', child, checked);
                    });
                }, tree);

                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'root',
                    draggable:false,
                    id:'root'
                });

                tree.setRootNode(root);

                // render the tree
                tree.render();
                root.expand();
            });


            var fn = function() {
                alert(tree.getChecked('id'));
            };

    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body scroll="no"&gt;
        &lt;b&gt;Checked Nodes: &lt;/b&gt; &lt;input type="text" id="cn" value="" size="40" autocomplete="off" /&gt;&lt;br /&gt;
        &lt;div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"&gt;&lt;/div&gt;
        &lt;input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" /&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre><p> 这是json数组：</p><pre name='code' class='xml'>[
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
"children":[
{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
]
},
{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
]
}
]
},
{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
]
}
]
}
]
</pre> <p> </p><p> </p></div><br/>但是发现一个问题就是，当你将节点收拢的后，再展开节点，节点下的构选项无法保存，也就是说，child.ui.toggleCheck(checked);根本没有保存变化，我用的版本是2.0b

3 楼 smellcode 2008-02-23  

<div class='quote_title'>引用</div><div class='quote_div'>mercuryzhang:看你给的连接，只指出了一个方法。不知道checkboxtree的实现和普通的tree的实现有啥区别，能不能把这个发出来看看啊</div>你其实可以用最简单的树来实现，不用什么extend<br/><pre name='code' class='html'>&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
        &lt;title&gt;Reorder TreePanel&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="../../../support/resources/css/ext-all.css" /&gt;

        &lt;script type="text/javascript" src="../../../support/adapter/ext/ext-base.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript" src="../../../support/js/ext-all-debug.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript"&gt;
            Ext.BLANK_IMAGE_URL = "../../../support/resources/images/default/s.gif"
            var tree = null;
            Ext.onReady(function(){
                // shorthand
                var Tree = Ext.tree;
               
                tree = new Tree.TreePanel({
                    el:'tree-div',
                    autoScroll:true,
                    animate:true,
                    enableDD:true,
                    containerScroll: true,
                    loader: new Tree.TreeLoader({
                        dataUrl:'xmmapjson.json'
                    }),
                    rootVisible: false
                });

               
                tree.on('checkchange', function(node, checked) {
                    node.expand();
                    node.attributes.checked = checked;
                    node.eachChild(function(child) {
                        child.ui.toggleCheck(checked);
                        child.attributes.checked = checked;
                        child.fireEvent('checkchange', child, checked);
                    });
                }, tree);

                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'root',
                    draggable:false,
                    id:'root'
                });

                tree.setRootNode(root);

                // render the tree
                tree.render();
                root.expand();
            });


            var fn = function() {
                alert(tree.getChecked('id'));
            };

    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body scroll="no"&gt;
        &lt;b&gt;Checked Nodes: &lt;/b&gt; &lt;input type="text" id="cn" value="" size="40" autocomplete="off" /&gt;&lt;br /&gt;
        &lt;div id="tree-div" style="overflow:auto; height:300px;width:300px;border:1px solid #c3daf9;"&gt;&lt;/div&gt;
        &lt;input type="button" id="gacv" value="getAllCheckedValue" onclick="fn()" /&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre><p> 这是json数组：</p><pre name='code' class='xml'>[
{"text":"请选择","id":"all1","leaf":false,"checked":false,"depth":"0",
"children":[
{"text":"资产价值","id":"zichanjiazhi","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"100万以下","id":"100yixia","leaf":true,"checked":false,"depth":"2"},
{"text":"100万-500万","id":"100zhi500","leaf":true,"checked":false,"depth":"2"},
{"text":"500万-1000万","id":"500zhi1000","leaf":true,"checked":false,"depth":"2"},
{"text":"1000万以上","id":"1000yishang","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产类型","id":"zichanleixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"生产类","id":"shengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"tudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"shebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"jianzhulei","leaf":true,"checked":false,"depth":"3"}
]
},
{"text":"非生产类","id":"feishengchanlei","leaf":false,"checked":false,"depth":"2",
"children":[
{"text":"土地类","id":"feitudilei","leaf":true,"checked":false,"depth":"3"},
{"text":"设备类","id":"feishebeilei","leaf":true,"checked":false,"depth":"3"},
{"text":"建筑类","id":"feijianzhulei","leaf":true,"checked":false,"depth":"3"}
]
}
]
},
{"text":"单位类型","id":"danweileixing","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"工业","id":"gongye","leaf":true,"checked":false,"depth":"2"},
{"text":"商业","id":"shangye","leaf":true,"checked":false,"depth":"2"},
{"text":"直属企业","id":"zhisuqiye","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"使用状态","id":"shiyongzhuangtai","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"在建","id":"zaijian","leaf":true,"checked":false,"depth":"2"},
{"text":"在用","id":"zaiyong","leaf":true,"checked":false,"depth":"2"},
{"text":"租出","id":"zuchu","leaf":true,"checked":false,"depth":"2"},
{"text":"调拨","id":"diaobo","leaf":true,"checked":false,"depth":"2"},
{"text":"闲置","id":"xianzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"报废","id":"baofei","leaf":true,"checked":false,"depth":"2"}
]
},
{"text":"资产来源","id":"zichanlaiyuan","leaf":false,"checked":false,"depth":"1",
"children":[
{"text":"购买","id":"gongmai","leaf":true,"checked":false,"depth":"2"},
{"text":"项目","id":"xiangmu","leaf":true,"checked":false,"depth":"2"},
{"text":"融资","id":"rongzhi","leaf":true,"checked":false,"depth":"2"},
{"text":"租入","id":"zuru","leaf":true,"checked":false,"depth":"2"}
]
}
]
}
]
</pre> <p> </p><p> </p>

2 楼 mercuryzhang 2008-02-22  

看不懂啊，能不能把整个tree地实现给出来啊。谢谢

1 楼 kaki 2008-02-20  

node.eachChild(function(child) {
		child.ui.toggleCheck(checked);
		child.attributes.checked = checked;
		child.fireEvent('checkchange', child, checked);
	});

感谢分享，这一句很关键！