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 相关文章推荐
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue实现抽屉弹窗效果
Nov 15 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 数组二分法查找函数代码
2010/02/16 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
Python显示进度条的方法
2014/09/20 Python
python操作 hbase 数据的方法
2016/12/18 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
django中嵌套的try-except实例
2020/05/21 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
python操作redis数据库的三种方法
2020/09/10 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
护理专业自荐信范文
2014/02/26 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Laravel中获取IP的真实地理位置
2021/04/01 PHP
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
python process模块的使用简介
2021/05/14 Python
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏