最近一个项目 需要用到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>

jquery jstree 插件的使用的更多相关文章

  1. 利用jstree插件轻松构建树应用

    最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...

  2. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

  3. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  4. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  5. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  6. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  7. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  8. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  9. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

随机推荐

  1. BAT经典面试题,深入理解Java内存模型JMM

    Java 内存模型 Java 内存模型(JMM)是一种抽象的概念,并不真实存在,它描述了一组规则或规范,通过这组规范定义了程序中各个变量(包括实例字段.静态字段和构成数组对象的元素)的访问方式.试图屏 ...

  2. 非常适合新手的jq/zepto源码分析01

    (function(global, factory) { // 查看这里是不是定义成模块,如果定义模块就返回 一个模块 if (typeof define === 'function' &&a ...

  3. 《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 ...

  4. 在Java中按字节获得字符串长度的三种方法

    转载:http://www.blogjava.net/nokiaguy/archive/2010/04/11/317982.html 由于Java是基于Unicode编码的,因此,一个汉字的长度为1, ...

  5. 1.3-动态路由协议EIGRP

    EIGRP(Enhanced IGRP) EIGRP的特点: IGRP/EIGRP都是CISCO的私有协议. 1:是唯一的一种LS/DV的混合协议. 2:Rapid convergence EIGRP ...

  6. windows bat命令 开启关闭Oracle服务

    0.吐槽 单位发的ThinkPad T61.太弱小了. 问题是我去百度下T61,发现它好贵好贵.真心无力吐槽.还不如给我发台外星人,廉价点的. . Oracle一开就内存就不够了.所以绝对不能让它开机 ...

  7. js 实现对ajax请求面向对象的封装

             AJAX 是一种用于创建高速动态网页的技术.通过在后台与server进行少量数据交换.AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行 ...

  8. Cygwin与minGW

    这几天关注了一下它们, 事实上我是不想安装一下vs来编写一些小东西. 本来想写个小exe,于是跑到vs的bin以下把cl与link搞出来,却发现cl还要配置什么的,也不太清楚直接就二个exe与部分dl ...

  9. Ubuntu环境下安装nodejs和npm

    1.安装python-software-properties sudo apt-get install python-software-properties 2.添加ppa curl -sL http ...

  10. unpe13e 学习备忘1

    转其他地方.  http://blog.sina.com.cn/s/blog_a43aba560101a2s5.html 运行书本中的程序.1,首先,下载源码:unpv13e.tar.gz2,然后,编 ...