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>
jquery jstree 插件的使用的更多相关文章
- 利用jstree插件轻松构建树应用
最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...
- 顶级jQuery树插件
顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
随机推荐
- BAT经典面试题,深入理解Java内存模型JMM
Java 内存模型 Java 内存模型(JMM)是一种抽象的概念,并不真实存在,它描述了一组规则或规范,通过这组规范定义了程序中各个变量(包括实例字段.静态字段和构成数组对象的元素)的访问方式.试图屏 ...
- 非常适合新手的jq/zepto源码分析01
(function(global, factory) { // 查看这里是不是定义成模块,如果定义模块就返回 一个模块 if (typeof define === 'function' &&a ...
- 《Sams Teach Yourself Windows® Workflow Foundation in 24 Hours》读书笔记目录
目录 1 Part I - The Basics 1.1 Hour 1 - Understanding Windows Workflow Foundation 1.2 Hour 2 - A Spin ...
- 在Java中按字节获得字符串长度的三种方法
转载:http://www.blogjava.net/nokiaguy/archive/2010/04/11/317982.html 由于Java是基于Unicode编码的,因此,一个汉字的长度为1, ...
- 1.3-动态路由协议EIGRP
EIGRP(Enhanced IGRP) EIGRP的特点: IGRP/EIGRP都是CISCO的私有协议. 1:是唯一的一种LS/DV的混合协议. 2:Rapid convergence EIGRP ...
- windows bat命令 开启关闭Oracle服务
0.吐槽 单位发的ThinkPad T61.太弱小了. 问题是我去百度下T61,发现它好贵好贵.真心无力吐槽.还不如给我发台外星人,廉价点的. . Oracle一开就内存就不够了.所以绝对不能让它开机 ...
- js 实现对ajax请求面向对象的封装
AJAX 是一种用于创建高速动态网页的技术.通过在后台与server进行少量数据交换.AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行 ...
- Cygwin与minGW
这几天关注了一下它们, 事实上我是不想安装一下vs来编写一些小东西. 本来想写个小exe,于是跑到vs的bin以下把cl与link搞出来,却发现cl还要配置什么的,也不太清楚直接就二个exe与部分dl ...
- Ubuntu环境下安装nodejs和npm
1.安装python-software-properties sudo apt-get install python-software-properties 2.添加ppa curl -sL http ...
- unpe13e 学习备忘1
转其他地方. http://blog.sina.com.cn/s/blog_a43aba560101a2s5.html 运行书本中的程序.1,首先,下载源码:unpv13e.tar.gz2,然后,编 ...