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 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);
});

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jsTree树控件(基于jQuery, 超强悍)[推荐]

    1.支持基于HTML定义.Json.XML方式加载树节点 2.支持拖放,动态增加.删除.重命名树节点 3.支持复选框 4.支持复制.剪切.粘贴树节点,动态刷新树 5.提供足够的回调方法: 6.此外,还提供了详细的使用文档 下载地址 :http://code.google.com/p/jstree/ 文档 :http://jstree.com/reference/_documentation/1_files.html 例子 :http://jstree.com/reference/_example

  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    jstree创建无限分级树的方法【基于ajax动态创建子节点】

    本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

  • jquery.jstree 增加节点的双击事件代码

    jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • JQery jstree 大数据量问题解决方法

    问题解决:生成的树是逐级加载的,在open函数中有一个生成节点的代码: 代码 复制代码 代码如下: for (var i=0; i<data.length; i++) { var n = TREE_OBJ.create(data[i], $(NODE)); if (onaddnode) onaddnode(n); } var firstChild = TREE_OBJ.children(NODE)[0]; if ($(firstChild).attr('id')==-1) TREE_OBJ.re

  • jsTree 基于JQuery的排序节点 Bug

    例如: - a (position 1) - b (position 2) - c (position 3) move c between a and b: cp=1 move a between b and c: cp=2 下移位置多加了1,不太清楚为什么,这里提供一种修复方法,也许它不是很好. 把 "position" : data.rslt.cp + i, 换成 "position" : data.rslt.o.index() + i, 可能对你有所帮助

  • jquery下jstree简单应用 - v1.0

    第一篇文章,具体使用也过去很长时间了,直接贴码: 1.代码中使用json数据格式(直接在页面中组装成的,并非后台组装,具体方法:function _callBack(d)) 2.提供右键菜单及功能实现 3.具有checkbox,提供获取选中节点ID方法:function getMenuIds() 复制代码 代码如下: <script type="text/javascript" src="@{'/public/javascripts/jquery-1.4.2.min.j

  • 基于jsTree的无限级树JSON数据的转换代码

    基于jsTree的无限级树JSON数据的转换代码

    jstree 主页 : http://www.jstree.com/ 其中提供了一种从后台取数据渲染成树的形式: 复制代码 代码如下: $("#mytree").tree({ data : { type : "json", url : "${ctx}/user/power!list.do" } }); 对于url中返回的值必须是它定义的json数据形式: 复制代码 代码如下: $("#demo2").tree({ data :

  • jsTree使用记录实例

    jsTree使用记录实例

    1. ajax请求生成jsTree [javascript] view plain copy <span style="font-size:14px;"><script> var r = []; // 权限树中被选中的叶子节点 var currentGroupId; function showPermitTree(id) { currentGroupId = id; $.ajax({ data : "currentGroupId=" + id

  • 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    在上篇基于BootStrap Metronic开发框架经验小结[一]框架总览及菜单模块的处理,介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容,本篇继续这一主题,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用. 在数据的界面显示当中,表格数据的展示以及分页是非常常见的处理操作,利用Bootstrap的样式布局,以及JQuery的Ajax数据处理,就能很好实现数据的动态展示和分页处理. 1.列表展示和分页处理1)数据的列表展示

  • 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=&q

  • 把普通对象转换成json格式的对象的简单实例

    1.什么叫做JSON? JSON只是一种数据格式(它不是一种新的数据类型) var obj = {name: "中国", age: 5000};//->普通格式的对象 var jsonObj = {"name": "中国", "age": 5000};//->JSON格式的对象 (只要把普通对象的属性名用""(不能是'')包起来,这样的格式就是我们JSON格式的对象) var data = [

  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="angular.min.js" charset="utf-8"></scri

  • Java实现一个小说采集程序的简单实例

    被标题吸引进来的不要骂我. 只是一个简单的实现,随手写了来下载一部喜欢的小说的.示例中的小说只是示例,不是我的菜. 使用了jsoup.挺好用的一个工具. 有需要的话,参考下自己改吧.挺简单的,是吧. 代码如下: package com.zhyea.doggie; import java.io.File; import java.io.FileWriter; import java.io.IOException; import org.jsoup.Jsoup; import org.jsoup.n

  • 使用JS实现图片展示瀑布流效果(简单实例)

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • ASP.NET中Web API的简单实例

    ASP.NET中Web API的简单实例

    一.Web API的路由 1.在Visual Studio中新建MVC4项目,在App_Start目录下有一个WebApiConfig.cs文件,这个文件中就是相应的Web API的路由配置了. 2.Web API 框架默认是基于 Restful 架构模式的,与ASP.NET MVC 有区别的是,它会根据 Http 请求的 HttpMethod(Get.Post.Put.Delete)来在Controller 中查找 Action,规则是:Action 名中是否以Get.Post 开头?Acti

  • 通过PHP简单实例介绍文件上传

    php文件上传的简单例子,获取文件名称.类型.大小等相关信息,完成文件的上传,供大家学习参考. 1.上传文件的代码: code <?php //判断临时文件存放路径是否包含用户上传的文件 if(is_uploaded_file($_FILES["uploadfile"]["tmp_name"])){ //为了更高效,将信息存放在变量中 $upfile=$_FILES["uploadfile"];//用一个数组类型的字符串存放上传文件的信息

  • JSP 注释的详解及简单实例

    JSP 注释的详解及简单实例

     JSP 注释的详解及简单实例 一 三种格式 二 举例 <body> <h1>大家好</h1> <hr> <!-- 我是HTML注释,在客户端可见 --> <%-- 我是JSP注释,在客户端不可见 --%> <% //单行注释 /*多行注释*/ out.println("大家好,欢迎大家学习JAVAEE开发."); %> <br> 你好,<%=s %><br> x+y

  • JSP生成九九乘法表的简单实例

    JSP生成九九乘法表的简单实例

    JSP生成九九乘法表的简单实例 一 用表达式和脚本方式实现九九乘法表 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://&quo

  • Delphi 用DLL实现插件的简单实例

    Delphi 用DLL实现插件的简单实例 这是DLL的代码 实现代码: library MyDll; uses SysUtils, Dialogs, Classes; procedure ShowInfo(info:PChar);stdcall; begin ShowMessage('您选择了['+info+']'); end; function GetCaption:Pchar; begin Result := '中国'; end; exports ShowInfo, GetCaption;

随机推荐