zTree jQuery 樹插件的使用(實例講解)
更新時間：2017年09月25日 08:15:40 作者：_只影向誰去
下面小編就為大家?guī)硪黄獄Tree jQuery 樹插件的使用(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
分享說明：
項目需要樹狀視圖形式展示后臺返回的數(shù)據(jù);并實現(xiàn)點擊節(jié)點將節(jié)點信息添加到右側(cè)的ul中;待后續(xù)提交獲取使用;選擇了能夠?qū)崿F(xiàn)異步加載節(jié)點信息的zTree插件,事實也證明這個插件足夠強(qiáng)大,能夠滿足幾乎所有需求;剛接觸時看了很多人的分享,結(jié)合官方api文檔,終于實現(xiàn)了功能,現(xiàn)將我學(xué)習(xí)的總結(jié)也分享出去.
效果介紹;除了zTree默認(rèn)的效果;使用api增加了一些實用的操作;包括手風(fēng)琴效果;點擊父節(jié)點展開效果;點擊節(jié)點文字關(guān)聯(lián)復(fù)選框效果;一級子節(jié)點數(shù)量展示效果.
外部引入資源
<link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" > <script type="text/javascript" src="./jquery-1.9.1.js"></script> <script type="text/javascript" src="./zTree_v3-master/js/jquery.ztree.all.min.js"></script>
html部分代碼
<div class="box">
<ul id="treeDemo" class="ztree"></ul>
<ul id="ulright">
<li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已選擇</li>
</ul>
</div>
css代碼
ul,li,body{
margin: 0;
padding: 0;
}
.ztree li span.node_name {
font-size: 16px;
}
.box{
width: 500px;
margin:10px auto;
border:3px solid #ccc;
padding: 20px;
border-bottom: none;
}
#treeDemo{
width: 200px;
display: inline-block;
background-color: #f1f1f1;
min-height: 200px;
}
#ulright{
width: 200px;
margin-left: 50px;
min-height: 200px;
border:1px solid #ccc;
display: inline-block;
vertical-align: top;
background-color: #eeeee8;
}
#ulright li{
width: 100%;
height: 30px;
list-style: none;
line-height: 30px;
margin-bottom: 3px;
background-color: #00b6ba;
padding-left: 10px;
box-sizing: border-box;
}
/**/
.ztree li a.curSelectedNode{
background-color: transparent;
border:#00b6ba;
}
.ztree li span.node_name{
font-size: 18px;
line-height: 18px;
color: #000;
}
.ztree li a{
padding: 5px;
vertical-align: middle;
}
.ztree li a:hover{
text-decoration: none;
}
.ztree li span.button.chk{
margin: 9px 3px;
}
js代碼
//遞歸找到所有節(jié)點(非父節(jié)點)
function getAllChildrenNodes(treeNode,result){
if (treeNode.isParent) {
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
if(!childrenNodes[i].children){
result.push(childrenNodes[i].name);
}
result = getAllChildrenNodes(childrenNodes[i], result);
}
}
}
return result;
}
var parames = 3;
//zTree的所有配置
var setting = {
//zTree 的唯一標(biāo)識，初始化后，等于 用戶定義的 zTree 容器的 id 屬性值。
treeId:"",
//zTree 容器的 jQuery 對象，主要功能：便于操作,內(nèi)部參數(shù),不可修改
treeObj:null,
//異步請求數(shù)據(jù)配置;當(dāng)父節(jié)點沒有子節(jié)點時;點擊此父節(jié)點會觸發(fā)請求
async:{
//打開此功能
enable: true,
url:"./zTreeDemoV9.0SimpleFromV10.0.php",
type:"post",
//發(fā)送的父級id的字段定義;如修改,遵循格式autoParam: ["id=parentId"]
autoParam: ["id"],
//其他需要提交的參數(shù)["name","topic","key","ss"]轉(zhuǎn)換后格式為name=topic&key=ss
otherParam:["json",parames || 1,"test","2"],
dataType:"json",
contentType: "application/x-www-form-urlencoded",
//ajax請求后的數(shù)據(jù)預(yù)處理函數(shù)
dataFilter: function(treeId,parentNode,responseData){
for(var i=0;i<responseData.length;i++){
responseData[i] = JSON.parse(responseData[i])
}
return responseData;
}
},
//數(shù)據(jù)配置
data: {
simpleData: {
enable: true,
idKey: "id", //修改默認(rèn)的ID為自己的id
pIdKey: "pid", //修改默認(rèn)父級ID為自己數(shù)據(jù)的父級id
rootPId: 0 //根節(jié)點的父節(jié)點id
}
},
//視圖配置
view: {
//是否顯示節(jié)點前的圖標(biāo)
showIcon: false,
//節(jié)點上a標(biāo)簽的樣式
fontCss: {
}
},
//選框配置
check: {
//啟用復(fù)選框
enable: true,
//chkStyle:"radio"
//復(fù)選框父子級選擇聯(lián)動設(shè)置
chkboxType: { "Y": "ps", "N": "ps" }
},
//事件配置
callback: {
//點擊復(fù)選框之前的事件
beforeCheck:function(treeId, treeNode){//如果節(jié)點是父節(jié)點,并且勾選時沒有子節(jié)點,則不允許勾選;針對父節(jié)點沒有展開,則沒有異步加載子節(jié)點,此情況禁止點擊父節(jié)點全選子節(jié)點的操作
if(treeNode.isParent && !treeNode.children){
return false;
}
},
//回調(diào)錯誤事件
onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){
alert("初始化節(jié)點數(shù)據(jù)失敗,請稍后重試");
},
//回調(diào)成功事件
onAsyncSuccess: function(event, treeId, treeNode, resData){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
console.log("數(shù)據(jù)加載成功");
var count = (treeNode.children.length);
//加載成功后;在節(jié)點后面顯示此父節(jié)點下有幾個一級子節(jié)點
$(".ztree").find("a[title="+treeNode.name+"]").find("span[class='node_name']").html(treeNode.name+"<span>("+count+")</span>");
},
//父節(jié)點展開時的事件
onExpand: function(event, treeId, treeNode){
//zTree對象
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//獲取點擊的id
var nowId = treeNode.id;
//獲取所有節(jié)點
var allNodes = zTree.getNodes();
//獲取點擊節(jié)點的層級
var level = treeNode.level;
//定義過濾函數(shù);獲取節(jié)點層級與點擊節(jié)點層級相同并且為父節(jié)點的節(jié)點
function filter(node) {
return (node.level == treeNode.level && node.isParent);
}
//獲得點擊節(jié)點同級的父節(jié)點的集合
var sameLevelNodes = zTree.getNodesByFilter(filter);
//遍歷同級節(jié)點集合
for(var i=0;i<sameLevelNodes.length;i++){
//將非被點擊父節(jié)點收起;實現(xiàn)手風(fēng)琴效果
if(sameLevelNodes[i].id != nowId){
zTree.expandNode(sameLevelNodes[i], false, true, true);
}
}
},
//點擊事件
onClick: function(e, treeId, treeNode, clickFlag) {
//tree實例
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//點擊文字關(guān)聯(lián)復(fù)選框
//如果不是父節(jié)點,則關(guān)聯(lián),或者是父節(jié)點,但展開狀態(tài)位true是,也關(guān)聯(lián);
if(!treeNode.isParent || (treeNode.isParent && treeNode.open)){
zTree.checkNode(treeNode, !treeNode.checked, true);//點擊文字關(guān)聯(lián)復(fù)選框
}
//點擊文字展開當(dāng)前節(jié)點
zTree.expandNode(treeNode, true, true, true);
// zTree.reAsyncChildNodes(treeNode, "refresh");//強(qiáng)行異步加載(存在子節(jié)點也進(jìn)行加載)
//手風(fēng)琴效果;直接調(diào)用onExpand
zTree.setting.callback.onExpand(e, treeId, treeNode);
//點擊節(jié)點名稱和勾選節(jié)點前面的復(fù)選框邏輯相同;
//直接在onClick里面調(diào)用onCheck函數(shù);并傳入所需參數(shù)
zTree.setting.callback.onCheck(e, treeId, treeNode);
},
//點擊復(fù)選框事件
onCheck: function(e, treeId, treeNode) {
//獲取右側(cè)ul內(nèi)所有l(wèi)i標(biāo)簽;用于比較當(dāng)前選擇復(fù)選框在右側(cè)是否一斤存在
var rightLi = $("#ulright").find("li");
//選中的是底層節(jié)點;
if(!treeNode.isParent){
//選中狀態(tài),加入到右側(cè)
if(treeNode.checked){
//遍歷右側(cè)li,如果選中的已經(jīng)存在;return
for(var i=0;i<rightLi.length;i++){
if($(rightLi[i]).attr("title") == treeNode.name){
return;
}
}
// 創(chuàng)建li 追加li
var addLi = $("<li title="+treeNode.name+"><span></span>");
addLi.find("span").text(treeNode.name);
addLi.animate({
width:"100%",
height:"30"
},400)
addLi.appendTo($("#ulright"));
//如果點擊的節(jié)點存在connect字段;判斷復(fù)選框狀態(tài)加入到右側(cè)ul或刪除
if(treeNode.connect){
//遍歷右側(cè)li,如果選中的已經(jīng)存在;return
for(var i=0;i<rightLi.length;i++){
if($(rightLi[i]).attr("title") == treeNode.connect){
return;
}
}
// 創(chuàng)建li 追加li
var addLi = $("<li title="+treeNode.connect+"><span></span>");
addLi.find("span").text(treeNode.connect);
addLi.animate({
width:"100%",
height:"30"
},400)
addLi.appendTo($("#ulright"));
}
//將被勾選的節(jié)點背景顏色更改
$("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","#00b6ba");
//非選中狀態(tài),刪除
}else{
//將右側(cè)的次節(jié)點對應(yīng)的li刪除
$("#ulright").find("li[title="+treeNode.name+"]").animate({
width:"0%",
height:"0"
},400,function(){
$("#ulright").find("li[title="+treeNode.name+"]").remove();
})
//取消此節(jié)點的背景顏色
$("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","");
}
//選中的是父節(jié)點;獲取所有子節(jié)點(非父節(jié)點),判斷復(fù)選框狀態(tài)加入到右側(cè)ul或刪除
}else{
//調(diào)用遞歸函數(shù);獲取所有非父級子節(jié)點數(shù)組集合
var addNodesArray = getAllChildrenNodes(treeNode,[]);
//是選中狀態(tài),加入到右側(cè)ul
if(treeNode.checked){
//定義存儲右側(cè)li的數(shù)組
var rightLiArray = [];
$("#ulright li").each(function(i,v){
rightLiArray.push($(v).attr("title"))
})
rightLiArray = rightLiArray.slice(1);
//遍歷勾選的數(shù)組集合
for(var i=0;i<addNodesArray.length;i++){
//判斷此節(jié)點是否在右側(cè)ul內(nèi);不存在則加入
if(rightLiArray.indexOf(addNodesArray[i]) == -1){
//創(chuàng)建li 追加li
var addLi = $("<li title="+addNodesArray[i]+"><span>"+addNodesArray[i]+"</span>");
addLi.animate({
width:"100%",
height:30
},400)
addLi.appendTo($("#ulright"));
}
//將節(jié)點背景顏色修改
$("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","#00b6ba");
}
//是非選中狀態(tài),刪除
}else{
//遍歷節(jié)點,執(zhí)行刪除操作
for(var i=0;i<addNodesArray.length;i++){
$("#ulright").find("li[title="+addNodesArray[i]+"]").animate({
width:"0%",
height:0
},function(){
$(this).css("display","none");
$(this).remove();
})
//還原背景顏色
$("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","");
}
}
}
},
}
};
//zTree的節(jié)點信息;可一次性全部加載;可試試異步請求
var zNodes = [{
name: "數(shù)據(jù)表",//名稱
id: 4,//id,子元素的pid
isParent:true,//是否為父節(jié)點,默認(rèn)為false
pid:0//父節(jié)點id;data中的rootPId;
},{
name: "測試表",
id: 1,
isParent:true,
pid:0
},{
name: "信息表",
id: 2,
isParent:true,
pid:0
},{
name: "作廢表",
id: 3,
isParent:true,
pid:0
}];
$(document).ready(function() {
//初始化zTree; zTree容器的jquery對象/ 配置/ 節(jié)點
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
后臺php代碼;本人純前端,后臺代碼只會簡單的寫寫;
<?php
$pId = $_POST['id'];
if($pId == 4){
$array = array('{"name":"數(shù)據(jù)表_一","id":"1_1","pid":"0"}','{"name":"數(shù)據(jù)表_二","id":"1_2","pid":"0"}','{"name":"數(shù)據(jù)表_三","id":"1_3","pid":"0"}','{"name":"數(shù)據(jù)表_四","id":"1_4","pid":"0"}','{"name":"數(shù)據(jù)表_五","id":"1_5","pid":"0"}');
}else if($pId == 1){
$array = array('{"name":"測試表_一","id":"2_1","pid":"1"}','{"name":"測試表_二","connect":"測試表_一","id":"2_2","pid":"1"}','{"name":"測試表_三","id":"2_3","pid":"1"}','{"name":"測試表_四","id":"2_4","pid":"1"}','{"name":"測試表_五","id":"2_5","pid":"1"}');
}else if($pId == 2){
$array = array('{"name":"信息表_一","id":"3_1","pid":"3"}','{"name":"信息表_二","id":"3_2","pid":"3"}','{"name":"信息表_三","id":"3_3","pid":"3"}','{"name":"信息表_四","id":"3_4","pid":"3"}','{"name":"信息表_五","id":"3_5","pid":"3"}','{"name":"信息表_五_一","id":"3_5_1","pid":"3_5"}','{"name":"信息表_五_二","id":"3_5_2","pid":"3_5"}','{"name":"信息表_三_一","id":"3_3_1","pid":"3_3"}','{"name":"信息表_三_二","id":"3_3_2","pid":"3_3"}','{"name":"信息表_三_三","id":"3_3_3","pid":"3_3"}');
}else if($pId == 3){
$array = array('{"name":"作廢表_一","id":"4_1","pid":"3"}','{"name":"作廢表_二","id":"4_2","pid":"3"}','{"name":"作廢表_三","id":"4_3","pid":"3"}');
}
echo json_encode($array);
js代碼大部分都有注釋;詳細(xì)api可在zTree官網(wǎng)查看 進(jìn)入官方api文檔 代碼運(yùn)行需在服務(wù)器環(huán)境下運(yùn)行;
最終栗子效果圖
以上這篇zTree jQuery 樹插件的使用(實例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jquery+CSS3模擬Path2.0動畫菜單效果代碼,涉及jquery鼠標(biāo)click點擊事件及頁面元素樣式動態(tài)變換的實現(xiàn)技巧,需要的朋友可以參考下2015-08-08
JS拖動選擇table里的單元格完整實例【基于jQuery】
這篇文章主要介紹了JS拖動選擇table里的單元格,結(jié)合完整實例形式分析了基于jQuery的table表格動態(tài)操作相關(guān)實現(xiàn)技巧,涉及事件響應(yīng)及頁面元素屬性動態(tài)操作使用方法,需要的朋友可以參考下2019-05-05
今天正好用到這個，就網(wǎng)上搜了搜，貼出來了。需要的朋友可以參考下。2011-03-03
JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法
這篇文章主要介紹了JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法,較為深入的分析了Ajax的post方法出現(xiàn)亂碼的原因,以及具體的解決方法,需要的朋友可以參考下2014-10-10
jquery實現(xiàn)marquee效果(文字或者圖片的水平垂直滾動)
原本在前端html代碼中，實現(xiàn)文字或者圖片的水平垂直滾動，都是使用的marquee，但隨著考慮瀏覽器的兼容性和符合為w3c的標(biāo)準(zhǔn)，接下來介紹使用Jquery實現(xiàn)網(wǎng)頁marquee效果,感興趣的朋友可以了解下哦2013-01-01
jquery.validate自定義驗證用法實例分析【成功提示與擇要提示】
這篇文章主要介紹了jquery.validate自定義驗證用法,結(jié)合實例形式分析了jQuery成功提示與擇要提示驗證操作相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2020-06-06![基于jquery的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]](http://img.jbzj.com/images/xgimg/bcimg6.png)
基于jquery的lazy loader插件實現(xiàn)圖片的延遲加載[簡單使用]
當(dāng)網(wǎng)站上有大量圖片要展示的話，如果一次把所有的圖片都加載出來的話，這勢必會影響網(wǎng)站的加載速度，給用戶帶來比較差的體驗。2011-05-05
這篇文章主要介紹了jQuery實現(xiàn)的簡單排序功能,結(jié)合實例形式分析了冒泡排序的原理及具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2017-01-01
在Asp.Net的MVC架構(gòu)中使用jQuery是一件很容易的事情，而使用jQuery實現(xiàn)Ajax更加簡單。2010-08-08
jquery對<select>的操作比較麻煩，我把常用的收集如下2011-03-03