JsTree
一、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); }); });
三:换肤功能