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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
给Function做的OOP扩展
May 07 Javascript
js 字符串操作函数
Jul 25 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
详解vue微信网页授权最终解决方案
Jun 16 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取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python中new方法的详解
2019/01/15 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python3实现高效的端口扫描
2019/08/31 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
计算机专业自荐信
2015/03/05 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
PHP新手指南
2021/04/01 PHP
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis