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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
CCPry JS类库 代码
Oct 30 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
BootStrap中的表单大全
Sep 07 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
React组件refs的使用详解
Feb 09 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
vue实现扫码功能
Jan 17 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 Javascript
js实现盒子滚动动画效果
Aug 09 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
基于empty函数的判断详解
2013/06/17 PHP
PHP图片上传代码
2013/11/04 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python2.7安装图文教程
2018/03/13 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
django admin 添加自定义链接方式
2020/03/11 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
信息系统专业个人求职信范文
2013/12/07 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
上班迟到检讨书
2014/01/10 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
中学教师自我鉴定
2014/02/07 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
公司经理聘任书
2014/03/29 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
小学校园广播稿
2015/08/18 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB