jquery jstree 插件的使用

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

1. 首先页面 引用 jquery.jstree

2. html ：

<div id="cate_tree" class="jstree fl">
                <ul>
                    <li id="0" class="jstree-closed jstree-unchecked">
                        <a href="#" class="jstree-clicked">
                            <ins class="jstree-checkbox"> </ins>
                            All Product
                        </a>
                        <ul style="">
                            {foreach $categories as $cat}
                            <li id="{$cat.id}" class="jstree-closed jstree-unchecked">
                                <a href="#" class="jstree-clicked">
                                    <ins class="jstree-checkbox"> </ins>
                                    {$cat.name}
                                </a>
                                {if $cat.sub|@count > 0}
                                <ul style="">
                                    {foreach $cat.sub as $subcat}
                                    <li id="{$subcat.id}" class="jstree-leaf jstree-unchecked">
                                        <a href="#" class="">
                                            <ins class="jstree-checkbox"> </ins>
                                            {$subcat.name}
                                        </a>
                                    </li>
                                    {/foreach}
                                </ul>
                                {/if}
                            </li>
                            {/foreach}
                        </ul>
                    </li>
                </ul>
            </div>

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

class="jstree-closed jstree-unchecked">

默认打开目录树，样式为

<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 主题路径
    $.jstree._themes = Www_URL_JS + 'jstree/themes/';
    $("#cate_tree").jstree({
        "plugins" : [ "themes", "html_data", "checkbox", "ui" ],
        "themes": {
            "theme": "classic",
            "dots": true,
            "icons": false
         }
    });</pre><br>
<br>
<pre></pre>
<pre name="code" class="html">默认主题 是default，是文件夹样式，classic 是 ＋ － 号的样式<pre></pre>
<pre></pre>
<pre></pre>
<p></p>
<p><br>
</p>
<pre></pre>
<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 = [];
            $("#cate_tree .jstree-checked").each(function(){
                var $this = $(this);
                cate_ids.push($this.attr("id"));
            });</pre><br>
<br>
<pre></pre>
<pre></pre>
<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({
        "plugins" : [ "themes", "html_data", "checkbox", "ui" ],
        "themes": {
            "theme": "classic",
            "dots": true,
            "icons": false
         }
    });
cate_js_tree.bind('loaded.jstree', function () {
            $("#cate_tree").find("li").each(function() {
                var $this = $(this);
                for(x in cate_ids) {
                    if ($this.attr("id") == cate_ids[x]) {
                        $("#cate_tree").jstree("check_node", $this);
                    }
                }
            });
        });</pre><br>
<br>
<pre></pre>
<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
</pre>
<p></p>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>

</pre></pre></pre></pre></pre></pre>