jstree的简单使用例子

最近使用到了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 idconsole.log(data.node.text);            //选择的node textform_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);
});

jstree的简单使用例子相关推荐

理解神经网络，从简单的例子开始（2）使用python建立多层神经网络
这篇文章将讲解如何使用python建立多层神经网络.在阅读这篇文章之前,建议先阅读上一篇文章:理解神经网络,从简单的例子开始.讲解的是单层的神经网络.如果你已经阅读了上一篇文章,你会发现这篇文章的代码 ...
理解神经网络，从简单的例子开始（1）7行python代码构建神经网络
理解神经网络,从简单的例子开始(1)7行python代码构建神经网络前言本文分为两个部分,第一个部分是一个简单的实例:9行Python代码搭建神经网络,这篇文章原文为:原文链接, 其中中文翻译版来 ...
.net中的对象序列化(1)：序列化是什么, 以及一个简单的例子
1. 为什么需要序列化,什么是序列化对于一个程序来说, 使用到的对象都是存在于内存中的.如果想保存这些对象的运行时状态, 或者需要在不同进程或者网络间传递对象,就需要序列化. 序列化就是讲运行中的对 ...
CSharpGL(1)从最简单的例子开始使用CSharpGL
CSharpGL(1)从最简单的例子开始使用CSharpGL 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含20多个独立的Demo ...
一个简单的例子看java线程机制
一个简单的例子看java线程机制作者: zyf0808 发表日期: 2006-03-26 11:20 文章属性: 原创复制链接 import java.util.*; public class T ...
java ug二次开发_使用Java进行UG二次开发：简单的例子（上） | 学步园
最近因为要进行TeamCenter二次开发(胖客户端定制),所有要开始研究Java了.因此突发奇想为什么不能使用Java进行二次开发呢?现在对UG进行的开发以C/C++应用为主.大多数使用的是原来的U ...
blockchain 区块链200行代码：在JavaScript实现的一个简单的例子
blockchain 区块链200行代码:在JavaScript实现的一个简单的例子了解blockchain的概念很简单(区块链,交易链块):它是分布式的(即不是放置在同一台机器上,不同的网络设备上 ...
pycharm安装scrapy失败_Scrapy ——环境搭配与一个简单的例子
在我刚接触爬虫的时候就已经听过Scrapy大名了,据说是一个很厉害的爬虫框架,不过那个时候沉迷于Java爬虫.现在终于要来揭开它神秘的面纱了,来一起学习一下吧欢迎关注公众号:老白和他的爬虫 1.环境 ...
用简单的例子说明提升可复用性的设计模式
此文写给想要理解设计模式,但认为<设计模式>中所举的例子过于复杂的读者. 为了使程序具有更高的可复用性,前人推荐我们使用如下设计模式: 结构型模式:通过组合类和对象来获得更大的结构 1. ...

jstree的简单使用例子

jstree的简单使用例子相关推荐

最新文章

热门文章