`

带复选框(checkbox)的树

EXTCSSJavaScriptPHPjson 
阅读更多

带复选框(checkbox)的树

<!-- start node.tpl.php -->
Posted 周日, 08/10/2008 - 00:36 by admin

官方实例中有介绍如何将json数据变成一棵树的简单例子。
该例子可以满足我们的一般需求。很多时候我们需要用到带checkbox的树。
其实加个checkbox框先简单，只需要在返回来的json数据中加上 checked 项（为true/false）。要实现我们想要的选中父节点的checkbox后，自动选中子节点也很简单，只需要加上下面这一段代码就可以了。

view source
print?
01.tree.on('checkchange', function(node, checked) {   
02.        node.expand();   
03.        node.attributes.checked = checked;   
04.        node.eachChild(function(child) {   
05.            child.ui.toggleCheck(checked);   
06.            child.attributes.checked = checked;   
07.            child.fireEvent('checkchange', child, checked);   
08.        });   
09.    }, tree);

 

演示(demo)地址在文章最后.

效果图如下:

源代码包括 0005_checkbox_reorder.html,0005_checkbox_reorder_tree.php.

0005_checkbox_reorder.html

view source
print?
01.<html>
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
04.<title>带复选框(checkbox)的树</title>
05.<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
06.<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
07.<script type="text/javascript" src="../../ext-all.js"></script>
08.<link rel="stylesheet" type="text/css" href="../../examples/examples.css" />
09.<script type="text/javascript" src="../../examples.js"></script>
10.<script type="text/javascript">
11.Ext.onReady(function(){
12.    Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif"    
13.    // shorthand
14.    var Tree = Ext.tree;
15.      
16.    var tree = new Tree.TreePanel({
17.        el:'tree-div',
18.        useArrows:true,
19.        autoScroll:true,
20.        animate:true,
21.        enableDD:true,
22.        containerScroll: true, 
23.        loader: new Tree.TreeLoader({
24.            dataUrl:'0005_checkbox_reorder_tree.php'
25.        })
26.    });
27.      
28.    tree.on('checkchange', function(node, checked) {   
29.        node.expand();   
30.        node.attributes.checked = checked;   
31.        node.eachChild(function(child) {   
32.            child.ui.toggleCheck(checked);   
33.            child.attributes.checked = checked;   
34.            child.fireEvent('checkchange', child, checked);   
35.        });   
36.    }, tree);  
37.  
38.    // set the root node
39.    var root = new Tree.AsyncTreeNode({
40.        text: 'Ext JS',
41.        draggable:false,
42.        id:'source'
43.    });
44.    tree.setRootNode(root);
45.  
46.    // render the tree
47.    tree.render();
48.    root.expand();
49.});
50.</script>
51.  
52.</head>
53.<body>
54.<h1>带复选框(checkbox)的树</h1>
55.<p></p>
56.<p>改编自ExtJs 自带的tree例子，选中父节点后，所有子节点会自动选上。</p>
57.  
58.<p>该例子点击父节点如果速度过快，有时候不会自动选中子节点！ </p>
59.  
60.<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
61.  
62.</body>
63.</html>

 

0005_checkbox_reorder_tree.php

view source
print?
1.[{"cls":"folder","id":10,"leaf":false,checked:false,"children":[{"cls":"file","id":11,"leaf":true,checked:false,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,checked:false,"children":null,"text":"SLK200"}],"text":"Benz"}]

 

演示地址:http://extjs.org.cn/extjs/mydemo/tree/0005_checkbox_reorder.html

（版权声明：本篇文章版权属于extjs.org.cn所有，可以在互联网上进行转载，转载必须保留作者版权声明及链接；也可以文章用于出版、发行或其它商业用途，仅仅需要保留作者版权声明及链接。）

 

分享到：
| 一个Ext 2.1 和3.2Combox 渲染TreePanel 的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics