基于jQuery ztree實現表格風格的樹狀結構

來源：懂視網責編：小采時間：2020-11-27 22:08:52

基于jQuery ztree實現表格風格的樹狀結構

基于jQuery ztree實現表格風格的樹狀結構:zTree 簡介 zTree 是一個依靠 jQuery 實現的多功能樹插件。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。 zTree 是開源免費的軟件（MIT 許可證）。如果您對 zTree 感興趣或者愿意資助 zTree 繼續發展下去，可以進行捐助。

推薦度：

點擊下載本文 文檔為doc格式

導讀基于jQuery ztree實現表格風格的樹狀結構:zTree 簡介 zTree 是一個依靠 jQuery 實現的多功能樹插件。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。 zTree 是開源免費的軟件（MIT 許可證）。如果您對 zTree 感興趣或者愿意資助 zTree 繼續發展下去，可以進行捐助。

zTree 簡介

zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點。

zTree 是開源免費的軟件（MIT 許可證）。如果您對 zTree 感興趣或者愿意資助 zTree 繼續發展下去，可以進行捐助。

zTree v3.0 將核心代碼按照功能進行了分割，不需要的代碼可以不用加載

采用了延遲加載技術，上萬節點輕松加載，即使在 IE6 下也能基本做到秒殺

兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器

支持 JSON 數據

支持靜態和 Ajax 異步加載節點數據

支持任意更換皮膚 / 自定義圖標（依靠css）

支持極其靈活的 checkbox 或 radio 選擇功能

提供多種事件響應回調

靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲

在一個頁面內可同時生成多個 Tree 實例

簡單的參數配置實現靈活多變的功能

先來一張完成圖:

這里寫圖片描述

原理很簡單：利用zTree的addDiyDom方法，自定義每個DOM節點，在原來的節點后面加一些div，再利用css樣式使它看起來像個表格。

這里寫圖片描述

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默認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節點
 */
 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);
 }
 /**
 * 查詢數據
 */
 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":"部門1","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":1,"ORG_ID":1,"id":"s1","pId":"o1","name":"部門1","modFlag":true,"PARENT_ID":null,"CORP_CAT":"港口-天然液化氣","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門12","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":2,"ORG_ID":1,"id":"s2","pId":"s1","name":"部門12","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門13","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":3,"ORG_ID":1,"id":"s3","pId":"s1","name":"部門13","modFlag":true,"PARENT_ID":1,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門24","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":4,"ORG_ID":1,"id":"s4","pId":"s2","name":"部門24","modFlag":true,"PARENT_ID":2,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門35","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":5,"ORG_ID":1,"id":"s5","pId":"s3","name":"部門35","modFlag":true,"PARENT_ID":3,"CORP_CAT":"港口-集裝箱","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門22","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":8,"ORG_ID":1,"id":"s8","pId":"s2","name":"部門22","modFlag":true,"PARENT_ID":2,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":null,"SECTOR_NAME":"部門23","addFlag":true,"CONTACT_PHONE":"0","SECTOR_ID":9,"ORG_ID":1,"id":"s9","pId":"s2","name":"部門23","modFlag":true,"PARENT_ID":2,"CORP_CAT":"-","TYPE":"sector","delFlag":true},{"CONTACT_USER":"打撒","SECTOR_NAME":"不愛的是分散","addFlag":true,"CONTACT_PHONE":"1231231","SECTOR_ID":21,"ORG_ID":1,"id":"s21","pId":"o1","name":"不愛的是分散","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":"部門9","addFlag":true,"CONTACT_PHONE":null,"SECTOR_ID":61,"ORG_ID":1,"id":"s61","pId":"o1","name":"部門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級部門","addFlag":true,"CONTACT_PHONE":"11111111111","SECTOR_ID":142,"ORG_ID":1,"id":"s142","pId":"o1","name":"1級部門","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;
 //初始化樹
 $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
 //添加表頭
 var li_head = ' <li class="head"><a><div class="diy">名稱</div><div class="diy">聯系人</div><div class="diy">主管行業</div>' +
 '<div class="diy">聯系方式</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;" >無符合條件數據</div></li>')
 }
 }
 /**
 * 根據權限展示功能按鈕
 * @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="添加子部門" 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 () {
 //初始化數據
 query();
 })
</script>
</body>
</html>

總結

以上所述是小編給大家介紹的基于jQuery ztree實現表格風格的樹狀結構，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于jQuery ztree實現表格風格的樹狀結構

推薦度：

點擊下載本文 文檔為doc格式

標簽：表格實現的 ztree

熱門焦點

基于jQuery ztree實現表格風格的樹狀結構

基于jQuery ztree實現表格風格的樹狀結構

基于jQuery ztree實現表格風格的樹狀結構

最新推薦

猜你喜歡

熱門推薦