jquery jstree 插件的使用

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

1. 首先页面 引用 jquery.jstree

2. html ：

 

[html] view plain copy
 
  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>  

 

 

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

[html] view plain copy
 
  1. class="jstree-closed jstree-unchecked">  
[html] view plain copy
 
  1.   
[html] view plain copy
 
  1. 默认打开目录树，样式为  
[html] view plain copy
 
    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.      
    59. </pre></pre></pre></pre></pre></pre>
posted @ 2017-08-02 09:16  疯子110  阅读(427)  评论(0)  编辑  收藏  举报