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>
<pre></pre>
<pre name="code" class="html">默认主题是default，是文件夹样式，classic 是＋－号的样式<pre></pre>
<pre></pre>
<pre></pre>
<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>
<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>
<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>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre></pre></pre></pre></pre></pre>

巴特西

jquery jstree 插件的使用

最新文章

热门文章