分享說明：
創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括武安網(wǎng)站建設(shè)、武安網(wǎng)站制作、武安網(wǎng)頁制作以及武安網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，武安網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到武安省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
項(xiàng)目需要樹狀視圖形式展示后臺返回的數(shù)據(jù);并實(shí)現(xiàn)點(diǎn)擊節(jié)點(diǎn)將節(jié)點(diǎn)信息添加到右側(cè)的ul中;待后續(xù)提交獲取使用;選擇了能夠?qū)崿F(xiàn)異步加載節(jié)點(diǎn)信息的zTree插件,事實(shí)也證明這個(gè)插件足夠強(qiáng)大,能夠滿足幾乎所有需求;剛接觸時(shí)看了很多人的分享,結(jié)合官方api文檔,終于實(shí)現(xiàn)了功能,現(xiàn)將我學(xué)習(xí)的總結(jié)也分享出去.
效果介紹;除了zTree默認(rèn)的效果;使用api增加了一些實(shí)用的操作;包括手風(fēng)琴效果;點(diǎn)擊父節(jié)點(diǎn)展開效果;點(diǎn)擊節(jié)點(diǎn)文字關(guān)聯(lián)復(fù)選框效果;一級子節(jié)點(diǎn)數(shù)量展示效果.
外部引入資源
html部分代碼
- 已選擇
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é)點(diǎn)(非父節(jié)點(diǎn))
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é)點(diǎn)沒有子節(jié)點(diǎn)時(shí);點(diǎn)擊此父節(jié)點(diǎn)會觸發(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("+count+")");
},
//父節(jié)點(diǎn)展開時(shí)的事件
onExpand: function(event, treeId, treeNode){
//zTree對象
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//獲取點(diǎn)擊的id
var nowId = treeNode.id;
//獲取所有節(jié)點(diǎn)
var allNodes = zTree.getNodes();
//獲取點(diǎn)擊節(jié)點(diǎn)的層級
var level = treeNode.level;
//定義過濾函數(shù);獲取節(jié)點(diǎn)層級與點(diǎn)擊節(jié)點(diǎn)層級相同并且為父節(jié)點(diǎn)的節(jié)點(diǎn)
function filter(node) {
return (node.level == treeNode.level && node.isParent);
}
//獲得點(diǎn)擊節(jié)點(diǎn)同級的父節(jié)點(diǎn)的集合
var sameLevelNodes = zTree.getNodesByFilter(filter);
//遍歷同級節(jié)點(diǎn)集合
for(var i=0;i");
addLi.find("span").text(treeNode.name);
addLi.animate({
width:"100%",
height:"30"
},400)
addLi.appendTo($("#ulright"));
//如果點(diǎn)擊的節(jié)點(diǎn)存在connect字段;判斷復(fù)選框狀態(tài)加入到右側(cè)ul或刪除
if(treeNode.connect){
//遍歷右側(cè)li,如果選中的已經(jīng)存在;return
for(var i=0;i");
addLi.find("span").text(treeNode.connect);
addLi.animate({
width:"100%",
height:"30"
},400)
addLi.appendTo($("#ulright"));
}
//將被勾選的節(jié)點(diǎn)背景顏色更改
$("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","#00b6ba");
//非選中狀態(tài),刪除
}else{
//將右側(cè)的次節(jié)點(diǎn)對應(yīng)的li刪除
$("#ulright").find("li[title="+treeNode.name+"]").animate({
width:"0%",
height:"0"
},400,function(){
$("#ulright").find("li[title="+treeNode.name+"]").remove();
})
//取消此節(jié)點(diǎn)的背景顏色
$("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","");
}
//選中的是父節(jié)點(diǎn);獲取所有子節(jié)點(diǎn)(非父節(jié)點(diǎn)),判斷復(fù)選框狀態(tài)加入到右側(cè)ul或刪除
}else{
//調(diào)用遞歸函數(shù);獲取所有非父級子節(jié)點(diǎn)數(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[i]+"");
addLi.animate({
width:"100%",
height:30
},400)
addLi.appendTo($("#ulright"));
}
//將節(jié)點(diǎn)背景顏色修改
$("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","#00b6ba");
}
//是非選中狀態(tài),刪除
}else{
//遍歷節(jié)點(diǎn),執(zhí)行刪除操作
for(var i=0;i 后臺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 樹插件的使用(實(shí)例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
