jstree的简单实例


Posted in Javascript onDecember 01, 2016

最近使用到了jstree,感觉是一款灵活的、可多项定制的tree插件;

我这边使用过程记录下;

参考的jstree api网站,以及demo介绍:

https://www.jstree.com/api/#/
jstree api github:
https://github.com/vakata/jstree#populating-the-tree-using-a-callback-function

使用中的例子介绍:

html代码:

<!-- 搜索框 --> 
 <div class="search_input"> 
 <input type="text" id="search_ay" /> 
 <img src="/sfytj/dist/images/icon/ss_search.png" /> 
 </div> 
<!-- 案由列表 --> 
<div class="reason_list"> 
 <div id="treeview1" class="treeview"> 
 </div> 
 </div>

 js代码:

1)生成jstree:

$("#treeview1").jstree({ 
  'core' : { 
  "multiple" : false, 
  'data' : ay_mssys, 
  'dblclick_toggle': false  //禁用tree的双击展开 
  }, 
  "plugins" : ["search"] 
}); 
var ay_mssys = 
 [ 
 { 
  "id": "1", 
  "text": "民事案由(2008版)", 
  "state": { 
   "opened": true,  //展示第一个层级下面的node 
   "disabled": true  //该根节点不可点击 
   }, 
  "children": 
   [ 
    { 
    "id": "2", 
    "text": "人格权纠纷", 
    "children": 
     [ 
      { 
      "id": "3", 
      "text": "人格权纠纷", 
      "children": [ 
       { 
       "id": "4", 
       "text": "生命权、健康权、身体权纠纷", 
       "children": 
         [ 
         { 
          "id": "5", 
          "text": "道路交通事故人身损害赔偿纠纷" 
          } 
         ] 
       } 
       ] 
      } 
     ] 
    } 
   ] 
  } 
 ] 
 
//core:整个jstree显示的核心,里面包括多种项配置: 
//data: 这里是使用json格式的数据;还可以使用html或者ajax请求等 
//plugins: 这个jstree引用了哪些插件 
//multiple : false 不可多选

2)点击jstree的每个子项,获取该节点的text、id等信息:

//tree change时事件 
$('#treeview1').on("changed.jstree", function (e, data) { 
 console.log("The selected nodes are:"); 
 console.log(data.node.id);  //选择的node id 
 console.log(data.node.text);  //选择的node text 
 form_data.ay = data.node.text; 
 form_data.ay_id = data.node.id; 
}); 
//changed.jstree,jstree改变时发生的事件,类似的还有select_node.jstree等,api中有。

3)点击jstree子项,控制该节点展开、收缩等:

//jstree单击事件 
$("#treeview1").bind("select_node.jstree", function (e, data) { 
 if(data.node.id !=1 ){    //排除第一个节点(2011民事案由) 
 data.instance.toggle_node(data.node); //单击展开下面的节点 
 } 
});

4)使用插件search搜索(jstree自带的插件):

//输入框输入定时自动搜索 
var to = false; 
$('#search_ay').keyup(function () { 
 if(to) { 
 clearTimeout(to); 
 } 
 
 to = setTimeout(function () { 
 $('#treeview1').jstree(true).search($('#search_ay').val()); 
 
 }, 250); 
});

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
Vue.JS入门教程之事件监听
Dec 01 #Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 #Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 #Javascript
jsTree使用记录实例
Dec 01 #Javascript
Vue.JS入门教程之列表渲染
Dec 01 #Javascript
Vue.JS入门教程之处理表单
Dec 01 #Javascript
利用js获取下拉框中所选的值
Dec 01 #Javascript
You might like
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
深入了解js原型模式
2019/05/30 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python实现用户答题功能
2018/01/17 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python中property属性实例解析
2018/02/10 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python pygame模块编写飞机大战
2018/11/20 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
商场促销活动总结
2014/07/10 职场文书
2015年营业员工作总结
2015/04/23 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书