jquery jstree 插件的使用

最近一个项目 需要用到jstree 这个jQuery插件，就研究了下，做目录树 菜单还是很强大的，下面对经常会用到几个用法做下说明。

1. 首先页面 引用 jquery.jstree

2. html ：

1. <div id="cate_tree" class="jstree fl">
2. <ul>
3. <li id="0" class="jstree-closed jstree-unchecked">
4. <a href="#" class="jstree-clicked">
5. <ins class="jstree-checkbox"> </ins>
6. All Product
7. </a>
8. <ul style="">
9. {foreach $categories as $cat}
10. <li id="{$cat.id}" class="jstree-closed jstree-unchecked">
11. <a href="#" class="jstree-clicked">
12. <ins class="jstree-checkbox"> </ins>
13. {$cat.name}
14. </a>
15. {if $cat.sub|@count > 0}
16. <ul style="">
17. {foreach $cat.sub as $subcat}
18. <li id="{$subcat.id}" class="jstree-leaf jstree-unchecked">
19. <a href="#" class="">
20. <ins class="jstree-checkbox"> </ins>
21. {$subcat.name}
22. </a>
23. </li>
24. {/foreach}
25. </ul>
26. {/if}
27. </li>
28. {/foreach}
29. </ul>
30. </li>
31. </ul>
32. </div>

默认所有目录树打开不选中， 样式为

1. class="jstree-closed jstree-unchecked">

1. 默认打开目录树，样式为

1. <pre name="code" class="html">class="jstree-open jstree-unchecked"></pre><pre name="code" class="html"></pre><pre name="code" class="html">默认需要全选，样式尝试</pre><pre name="code" class="html"><pre name="code" class="html">class="jstree-open jstree-checked"></pre><pre name="code" class="html"></pre><pre name="code" class="html">3. js 加载该目录树</pre><pre name="code" class="html"><pre name="code" class="javascript"></pre><pre name="code" class="javascript">// 设置jstree 主题路径
2. $.jstree._themes = Www_URL_JS + 'jstree/themes/';
3. $("#cate_tree").jstree({
4. "plugins" : [ "themes", "html_data", "checkbox", "ui" ],
5. "themes": {
6. "theme": "classic",
7. "dots": true,
8. "icons": false
9. }
10. });</pre><br>
11. <br>
12. <pre></pre>
13. <pre name="code" class="html">默认主题 是default，是文件夹样式，classic 是 ＋ － 号的样式<pre></pre>
14. <pre></pre>
15. <pre></pre>
16. <p></p>
17. <p><br>
18. </p>
19. <pre></pre>
20. <pre name="code" class="html">4. 获取选中的值</pre><pre name="code" class="html"><pre name="code" class="javascript"></pre><pre name="code" class="javascript">var cate_ids = [];
21. $("#cate_tree .jstree-checked").each(function(){
22. var $this = $(this);
23. cate_ids.push($this.attr("id"));
24. });</pre><br>
25. <br>
26. <pre></pre>
27. <pre></pre>
28. <pre name="code" class="html"></pre><pre></pre><pre name="code" class="html"></pre><pre name="code" class="html">5. 设置给定的值为选中状态</pre><pre name="code" class="html"><pre name="code" class="javascript"></pre><pre name="code" class="javascript">var cate_js_tree = $("#cate_tree").jstree({
29. "plugins" : [ "themes", "html_data", "checkbox", "ui" ],
30. "themes": {
31. "theme": "classic",
32. "dots": true,
33. "icons": false
34. }
35. });
36. cate_js_tree.bind('loaded.jstree', function () {
37. $("#cate_tree").find("li").each(function() {
38. var $this = $(this);
39. for(x in cate_ids) {
40. if ($this.attr("id") == cate_ids[x]) {
41. $("#cate_tree").jstree("check_node", $this);
42. }
43. }
44. });
45. });</pre><br>
46. <br>
47. <pre></pre>
48. <pre name="code" class="html">6. 如果还有不太明白的，可以访问官网查询，嘿嘿……<pre></pre><pre name="code" class="html">附上这个地址，本人觉得很不错，哈哈</pre><pre name="code" class="html">http://www.jstree.com/documentation/checkbox
49. </pre>
50. <p></p>
51. <pre></pre>
52. <pre></pre>
53. <pre></pre>
54. <pre></pre>
55. <pre></pre>
56. <pre></pre>
57. <pre></pre>
58. </pre></pre></pre></pre></pre></pre>