一、JStree的简单介绍
1.关于jstree

jsTree 使用了 jQuery 和 Sarissa,是一个是免费的但是设置灵活的,基于 JavaScript 跨浏览器支持的网页树形部件。

jsTree 支持三种数据源头:

预先定义好的 HTML -嵌套的列表结构

JSON

XML

jsTree 的主要功能有:

同步导入 – 只需要提供一个 URL,就会去请求数据(只适合 JSON 和 XML 数据形式)。

支持打开,关闭,重命名,创建,删除节点(通过预先定义好的规则)

支持多种回调函数(onchange, oncreate, ondelete, onload, 等等)

支持拖拉

支持多重选择

支持多种语言

支持主题(可以修改图标,大小和背景等等)

可以支持动态打开和关闭(configurable)

可选的快捷键导航

支持多个树形部件

另外还可以做为 jQuery 插件。

官方主页:http://www.jstree.com/

jstree在goolge code上的托管项目:

http://code.google.com/p/jstree/

二、JStree的简单用法

代码部分

HTML:

 <!--树-->
引入的css:
<link rel="stylesheet" type="text/css" href="/pcs9000/lib/common-css/css/style.min.css" />
<div class="reason_list">
<div id="treeview1" class="treeview"> </div>
</div>

JS:

需要引入的js有

<script src="/pcs9000/lib/jquery/jquery.js"></script>
<script src="/pcs9000/lib/common-css/js/jstree.min.js"></script>
<script src="/pcs9000/gzdsy/monitor/resources/js/treepanel.js"></script>

treepanel.js:

$(function () {
var treeDate; //存放数据
$.ajax({
type:"get",
url:"resources/js/getJson.json",
dataType:"json",
success:function(data){
treeDate = data.data.treeData[0];
$("#treeview1").jstree({ //创建树开始
'core' : {
"multiple" : false,
'data': treeDate,
'dblclick_toggle': false //禁用tree的双击展开
},
"plugins" : ["search"]
});
}
}); //tree change时事件
$('#treeview1').on("changed.jstree", function (e, item) {
$(this).find(".jstree-leaf .jstree-anchor").unbind("click").on("click",function(){
nodeId = item.node.id;
$("#AjaxLoading").remove();
$.ajax({
type:"get",
url:"resources/js/getJson.json",
dataType:"json",
beforeSend: function(XMLHttpRequest){
ShowLoading();
},
success:function(data){
},
complete: function(XMLHttpRequest, textStatus) {
$("#AjaxLoading").remove();
},
error:function(){
alert("加载数据失败!");
} });
}); });
//加载动画
function ShowLoading(){
$(".rightIntent").append('<div id="AjaxLoading" class="showbox">'+
'<div class="loadingWord">'+
'<img src="resources/img/waiting.gif">加载中,请稍候...</div></div>');
} //jstree单击事件
$("#treeview1").bind("select_node.jstree", function (e, data) {
if(data.node.id !=1 ){ //排除第一个节点
data.instance.toggle_node(data.node); //单击展开下面的节点
} });
//输入框输入定时自动搜索
var to = false;
$('#search_ay').keyup(function () {
if(to) {
clearTimeout(to);
}
to = setTimeout(function () {
$('#treeview1').jstree(true).search($('#search_ay').val());
}, 250);
}); });

三:换肤功能

JsTree的更多相关文章

  1. jsTree简单应用Demo

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  2. JSTREE 实现AJAX重载入时刷新所有节点树

      $().ready(function() { var tree = $('#tree'); tree.jstree({ 'core': { data: null } }); $("#xr ...

  3. 【笔记】jstree插件的基本使用

    官网地址:https://www.jstree.com/ json返回参数格式:推荐第二种方式 不需要在重新拼接返回格式 不刷新页面重新初始化 jstree时使用:$.jstree.destroy() ...

  4. 【JSTREE】 复选框默认选中【总结】

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  5. JavaScript JsTree实例

    var RightTree= function () { }; RightTree.prototype = { //初始化权限树 InitRightTree: function () { $.ajax ...

  6. JsTree实现简单的CRUD

    现在需要将省市县区域这块搞成树状图的形状,由于项目使用的AngularJS+ABP+WebAPI各个模块之间数据传输形式是json格式,那么对于JsTree来说就方便很多了,只需要将json数据搞成我 ...

  7. 基于jstree的 对混乱的 命名系统进行归类的 计算机软件

    本人现在就职于一家加拿大东部餐饮连锁公司的IT部门,公司旗下有4个品牌,280多家餐厅. 所有的餐厅都使用maitred 的pos软件来处理收银结账. 公司总部使用business object 对m ...

  8. 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...

  9. 利用jstree插件轻松构建树应用

    最近完成了项目中的一个树状应用,第一次接触了jstree这个插件,总的来说它的官方文档还是比较详细的,但是在使用过程中还是出现了一些问题,下面我就来谈谈这款插件的使用和心得. 首先项目需要构建一棵树, ...

  10. jstree动态生成树

    前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树. 本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台. 前 ...

随机推荐

  1. quick-cocos2d-x :加入学习

    语法不熟悉, 接口不熟悉. 部分不理解. 超级初学者. 好好学习, 一直在学习 使用Quick-Cocos2d-x搭建一个横版过关游戏 推荐官方的文档和例子  demo

  2. F2.Net工作流引擎系列索引

    索引如下 F2工作流引擎遵循参考WFCM标准规范,符合中国国情特色,更轻量级的工作流引擎,支持多种数据库(mmsqlserver,mysql,oracle),有强大智能的组织模型接口可快速应用到任何基 ...

  3. Android Tab -- 使用ViewPager、Fragment、FragmentPagerAdapter来实现

    原文地址:http://blog.csdn.net/crazy1235/article/details/42678877 效果:滑动切换:点击标签切换. 代码:https://github.com/l ...

  4. 【BZOJ】【1050】【HAOI2006】旅行comf

    枚举/暴力/Kruskal orz……我sb了……其实是sb题<_< 有一道题问的是最小极差生成树……(不记得是什么名字了,就是求最大边权与最小边权差最小的生成树)做法是枚举最小边,然后k ...

  5. Android网络电话软件Sipdroid试用

    Android网络电话软件Sipdroid试用 SipDroid v3.4beta 简介:sipdroid是一款基于网络的语音及视频通话客户端软件,sipdroid本身不经营网络语音服务,仅仅是一款开 ...

  6. Eclipse 快捷键整理

    Alt+/:代码提示Ctrl+/:注释/取消注释Ctrl+D:删除光标所在行Ctrl+K:将光标停留在变量上,按Ctrl+K键可以查找到下一个同样的变量Shift+Ctrl+K:和Ctrl+K查找的方 ...

  7. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  8. Iwconfig/aircrack-ng

    BT5 aircrack-ng破解无线密码(wpa/wep) - 星明月稀 - 博客频道 - CSDN.NET             BT5 aircrack-ng破解无线密码(wpa/wep) - ...

  9. Properties、ResourceBundle

    两个类都可以读取属性文件中以key/value形式存储的键值对,ResourceBundle读取属性文件时操作相对简单. Properties 该类继承Hashtable,将键值对存储在集合中.基于输 ...

  10. Python 安装 pytesser 处理验证码出现的问题

    今天这个问题困扰了我好久,开始直接用 pip install pytesseract 安装了 pytesseract 然后出现了如下错误 Traceback (most recent call las ...