基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹(shù)狀結(jié)構(gòu)
更新時(shí)間：2018年08月31日 09:11:01 作者：duqian42707
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”，zTree 是開(kāi)源免費(fèi)的軟件。接下來(lái)通過(guò)本文給大家介紹基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹(shù)狀結(jié)構(gòu)，感興趣的朋友一起看看吧
zTree 簡(jiǎn)介
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。
zTree 是開(kāi)源免費(fèi)的軟件（MIT 許可證）。如果您對(duì) zTree 感興趣或者愿意資助 zTree 繼續(xù)發(fā)展下去，可以進(jìn)行捐助。
- zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
- 采用了 延遲加載 技術(shù)，上萬(wàn)節(jié)點(diǎn)輕松加載，即使在 IE6 下也能基本做到秒殺
- 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
- 支持 JSON 數(shù)據(jù)
- 支持靜態(tài) 和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)
- 支持任意更換皮膚 / 自定義圖標(biāo)（依靠css）
- 支持極其靈活的 checkbox 或 radio 選擇功能
- 提供多種事件響應(yīng)回調(diào)
- 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節(jié)點(diǎn)，還可以多節(jié)點(diǎn)拖拽喲
- 在一個(gè)頁(yè)面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
- 簡(jiǎn)單的參數(shù)配置實(shí)現(xiàn) 靈活多變的功能
先來(lái)一張完成圖:
原理很簡(jiǎn)單：利用zTree的addDiyDom方法，自定義每個(gè)DOM節(jié)點(diǎn)，在原來(lái)的節(jié)點(diǎn)后面加一些div，再利用css樣式使它看起來(lái)像個(gè)表格。
zTree官方api： http://www.treejs.cn/v3/api.php
下面是完整代碼（更新于2017-7-30 08:56 ）
demo.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Demo by dq</title>
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9;IE=8;"/>
<!--引入文件： 1、zTree默認(rèn)css樣式 2、jquery 3、zTree js-->
<link rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script>
</head>
<style>
/*按鈕*/
.icon_div {
display: inline-block;
height: 25px;
width: 35px;
background: url(http://c.csdnimg.cn/public/common/toolbar/images/f_icon.png) no-repeat 12px -127px;
}
.icon_div a {
display: inline-block;
width: 27px;
height: 20px;
cursor: pointer;
}
/*end--按鈕*/
/*ztree表格*/
.ztree {
padding: 0;
border: 2px solid #CDD6D5;
}
.ztree li a {
vertical-align: middle;
height: 30px;
}
.ztree li > a {
width: 100%;
}
.ztree li > a,
.ztree li a.curSelectedNode {
padding-top: 0px;
background: none;
height: auto;
border: none;
cursor: default;
opacity: 1;
}
.ztree li ul {
padding-left: 0px
}
.ztree div.diy span {
line-height: 30px;
vertical-align: middle;
}
.ztree div.diy {
height: 100%;
width: 20%;
line-height: 30px;
border-top: 1px dotted #ccc;
border-left: 1px solid #eeeeee;
text-align: center;
display: inline-block;
box-sizing: border-box;
color: #6c6c6c;
font-family: "SimSun";
font-size: 12px;
overflow: hidden;
}
.ztree div.diy:first-child {
text-align: left;
text-indent: 10px;
border-left: none;
}
.ztree .head {
background: #5787EB;
}
.ztree .head div.diy {
border-top: none;
border-right: 1px solid #CDD2D4;
color: #fff;
font-family: "Microsoft YaHei";
font-size: 14px;
}
/*end--ztree表格*/
</style>
<body>
<div class="layer">
<div id="tableMain">
<ul id="dataTree" class="ztree">
</ul>
</div>
</div>
<script>
var zTreeNodes;
var setting = {
view: {
showLine: false,
showIcon: false,
addDiyDom: addDiyDom
},
data: {
simpleData: {
enable: true
}
}
};
/**
* 自定義DOM節(jié)點(diǎn)
*/
function addDiyDom(treeId, treeNode) {
var spaceWidth = 15;
var liObj = $("#" + treeNode.tId);
var aObj = $("#" + treeNode.tId + "_a");
var switchObj = $("#" + treeNode.tId + "_switch");
var icoObj = $("#" + treeNode.tId + "_ico");
var spanObj = $("#" + treeNode.tId + "_span");
aObj.attr('title', '');
aObj.append('<div class="diy swich"></div>');
var div = $(liObj).find('div').eq(0);
switchObj.remove();
spanObj.remove();
icoObj.remove();
div.append(switchObj);
div.append(spanObj);
var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
switchObj.before(spaceStr);
var editStr = '';
editStr += '<div class="diy">' + (treeNode.CONTACT_USER == null ? ' ' : treeNode.CONTACT_USER) + '</div>';
var corpCat = '<div title="' + treeNode.CORP_CAT + '">' + treeNode.CORP_CAT + '</div>';
editStr += '<div class="diy">' + (treeNode.CORP_CAT == '-' ? ' ' : corpCat ) + '</div>';
editStr += '<div class="diy">' + (treeNode.CONTACT_PHONE == null ? ' ' : treeNode.CONTACT_PHONE ) + '</div>';
editStr += '<div class="diy">' + formatHandle(treeNode) + '</div>';
aObj.append(editStr);
}
/**
* 查詢數(shù)據(jù)
*/
function query() {
var data = [{"CONTACT_USER":"張三","CONTACT_PHONE":"18888888888","addFlag":true,"ORG_ID":1,"id":"o1","pId":"onull","open":true,"name":"單位1","modFlag":true,"CORP_CAT":"港口-天然液化氣,港口-液化石油氣","TYPE":"org","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門(mén)1","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":1,"ORG_ID":1,"id":"s1","pId":"o1","name":"部門(mén)1","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化氣","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門(mén)12","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":2,"ORG_ID":1,"id":"s2","pId":"s1","name":"部門(mén)12","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門(mén)13","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":3,"ORG_ID":1,"id":"s3","pId":"s1","name":"部門(mén)13","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門(mén)24","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":4,"ORG_ID":1,"id":"s4","pId":"s2","name":"部門(mén)24","modFlag":true,"PARENT_ID":2,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門(mén)35","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":5,"ORG_ID":1,"id":"s5","pId":"s3","name":"部門(mén)35","modFlag":true,"PARENT_ID":3,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門(mén)22","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":8,"ORG_ID":1,"id":"s8","pId":"s2","name":"部門(mén)22","modFlag":true,"PARENT_ID":2,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門(mén)23","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":9,"ORG_ID":1,"id":"s9","pId":"s2","name":"部門(mén)23","modFlag":true,"PARENT_ID":2,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":"打撒","SECTOR_NAME":"不愛(ài)的是分散","addFlag":true,"CONTACT_PHONE":"1231231","SECTOR_ID":21,"ORG_ID":1,"id":"s21","pId":"o1","name":"不愛(ài)的是分散","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化氣","TYPE":"sector","delFlag":true},{"CONTACT_USER":"111","SECTOR_NAME":"test","addFlag":true,"CONTACT_PHONE":"222","SECTOR_ID":29,"ORG_ID":1,"id":"s29","pId":"s2","name":"test","modFlag":true,"PARENT_ID":2,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"22","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":38,"ORG_ID":1,"id":"s38","pId":"o1","name":"22","modFlag":true,"PARENT_ID":null,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門(mén)9","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":61,"ORG_ID":1,"id":"s61","pId":"o1","name":"部門(mén)9","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化氣","TYPE":"sector","delFlag":true},{"CONTACT_USER":"sara","SECTOR_NAME":"流星雨","addFlag":true,"CONTACT_PHONE":"11111111111","SECTOR_ID":141,"ORG_ID":1,"id":"s141","pId":"s1","name":"流星雨","modFlag":true,"PARENT_ID":1,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":"流星","SECTOR_NAME":"1級(jí)部門(mén)","addFlag":true,"CONTACT_PHONE":"11111111111","SECTOR_ID":142,"ORG_ID":1,"id":"s142","pId":"o1","name":"1級(jí)部門(mén)","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化氣","TYPE":"sector","delFlag":true},{"CONTACT_USER":"11","SECTOR_NAME":"11","addFlag":true,"CONTACT_PHONE":"11111111111","SECTOR_ID":145,"ORG_ID":1,"id":"s145","pId":"s1","name":"11","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":"ff","SECTOR_NAME":"fff","addFlag":true,"CONTACT_PHONE":"11","SECTOR_ID":146,"ORG_ID":1,"id":"s146","pId":"s1","name":"fff","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-油碼頭","TYPE":"sector","delFlag":true},{"CONTACT_USER":"1","SECTOR_NAME":"1","addFlag":true,"CONTACT_PHONE":"1","SECTOR_ID":161,"ORG_ID":1,"id":"s161","pId":"o1","name":"1","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化氣","TYPE":"sector","delFlag":true}];
//初始化列表
zTreeNodes = data;
//初始化樹(shù)
$.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
//添加表頭
var li_head = ' <li class="head"><a><div class="diy">名稱(chēng)</div><div class="diy">聯(lián)系人</div><div class="diy">主管行業(yè)</div>' +
'<div class="diy">聯(lián)系方式</div><div class="diy">操作</div></a></li>';
var rows = $("#dataTree").find('li');
if (rows.length > 0) {
rows.eq(0).before(li_head)
} else {
$("#dataTree").append(li_head);
$("#dataTree").append('<li ><div style="text-align: center;line-height: 30px;" >無(wú)符合條件數(shù)據(jù)</div></li>')
}
}
/**
* 根據(jù)權(quán)限展示功能按鈕
* @param treeNode
* @returns {string}
*/
function formatHandle(treeNode) {
var htmlStr = '';
htmlStr += '<div class="icon_div"><a class="icon_view" title="查看" href="javascript:view(\'' + treeNode.id + '\')" rel="external nofollow" ></a></div>';
htmlStr += '<div class="icon_div"><a class="icon_edit" title="修改" href="javascript:edit(\'' + treeNode.id + '\')" rel="external nofollow" ></a></div>';
htmlStr += '<div class="icon_div"><a class="icon_add" title="添加子部門(mén)" href="javascript:addSector(\'' + treeNode.id + '\')" rel="external nofollow" ></a></div>';
htmlStr += '<div class="icon_div"><a class="icon_del" title="刪除" href="javascript:del(\'' + treeNode.id + '\')" rel="external nofollow" ></a></div>';
return htmlStr;
}
$(function () {
//初始化數(shù)據(jù)
query();
})
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹(shù)狀結(jié)構(gòu)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題
- jQuery 利用ztree實(shí)現(xiàn)樹(shù)形表格的實(shí)例代碼
- zTree jQuery 樹(shù)插件的使用(實(shí)例講解)
- jQuery使用zTree插件實(shí)現(xiàn)可拖拽的樹(shù)示例
- jQuery EasyUI結(jié)合zTree樹(shù)形結(jié)構(gòu)制作web頁(yè)面
- jQuery zTree樹(shù)插件動(dòng)態(tài)加載實(shí)例代碼
- jQuery插件zTree實(shí)現(xiàn)的多選樹(shù)效果示例
- jQuery zTree如何改變指定節(jié)點(diǎn)文本樣式
相關(guān)文章
jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法
今天小編就為大家分享一篇jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
基于Jquery的溫度計(jì)動(dòng)畫(huà)效果
將代碼一一拷貝到頁(yè)面相應(yīng)的位置，然后記得調(diào)用jquery框架，展示條件有限，所以效果跟設(shè)計(jì)圖有出入，但實(shí)現(xiàn)原理是一樣的，歡迎大家多多交流！2010-06-06
這篇文章主要介紹了詳解jquery選擇器的原理的相關(guān)資料,就是jquery原型里面有一個(gè)init初始化的方法，將傳入的值進(jìn)行解析，比如傳入的id還是class還是標(biāo)簽名，需要的朋友可以參考下2017-08-08
jQuery實(shí)現(xiàn)點(diǎn)擊自身以外區(qū)域關(guān)閉彈出層功能完整示例【改進(jìn)版】
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊自身以外區(qū)域關(guān)閉彈出層功能,結(jié)合具體實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)彈出層打開(kāi)與關(guān)閉相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jQuery實(shí)現(xiàn)首頁(yè)圖片淡入淡出效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)首頁(yè)圖片淡入淡出效果的方法,實(shí)例分析了jQuery圖片淡入淡出效果的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06
JQuery實(shí)現(xiàn)簡(jiǎn)單時(shí)尚快捷的氣泡提示插件
在程序提交后，為了提高用戶體驗(yàn)我們需要驗(yàn)證并提示出錯(cuò)的位置，利用JQuery我們可以輕松實(shí)現(xiàn)氣泡提示，需要的朋友可以了解下2012-12-12
jquery獲取對(duì)象的方法足以應(yīng)付常見(jiàn)的各種類(lèi)型的對(duì)象
獲取對(duì)象是比較常見(jiàn)的操作了，因?yàn)橄胍僮饕粋€(gè)對(duì)象之前，一定要先獲取，這是必須的，下面整理了常見(jiàn)對(duì)象的獲取方法，希望對(duì)大家有所幫助2014-05-05
在開(kāi)發(fā)項(xiàng)目過(guò)程中，用iframe嵌套，會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，用iframe嵌套的html結(jié)構(gòu)右邊不會(huì)自動(dòng)適應(yīng)高度。如何解決這一問(wèn)題呢，下面就跟小編一起來(lái)看下吧2016-12-12
jquery struts 驗(yàn)證唯一標(biāo)識(shí)(公用方法)
本教程將為大家詳細(xì)介紹下使用公用方法驗(yàn)證jquery struts唯一標(biāo)識(shí)，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
jQuery實(shí)現(xiàn)為圖片添加鏡頭放大效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)為圖片添加鏡頭放大效果的方法,提供了四種放大鏡效果供大家選擇使用,并附有完整的源碼下載地址,需要的朋友可以參考下2015-06-06