带复选框(checkbox)的树

带复选框(checkbox)的树

Posted 周日, 08/10/2008 - 00:36 by admin

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

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

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

 

0005_checkbox_reorder_tree.php

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所有，可以在互联网上进行转载，转载必须保留作者版权声明及链接；也可以文章用于出版、发行或其它商业用途，仅仅需要保留作者版权声明及链接。）