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樣式使它看起來像個表格。

下面是完整代碼(更新于2017-7-30 08:56 )

demo.html：

Demo by dq

/*按鈕*/

.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表格*/

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('

var div = $(liObj).find('div').eq(0);

switchObj.remove();

spanObj.remove();

icoObj.remove();

div.append(switchObj);

div.append(spanObj);

var spaceStr = "";

switchObj.before(spaceStr);

var editStr = '';

editStr += '

' + (treeNode.CONTACT_USER == null ? '?' : treeNode.CONTACT_USER) + '';

var corpCat = '

' + treeNode.CORP_CAT + '';

editStr += '

' + (treeNode.CORP_CAT == '-' ? '?' : corpCat ) + '';

editStr += '

' + (treeNode.CONTACT_PHONE == null ? '?' : treeNode.CONTACT_PHONE ) + '';

editStr += '

' + formatHandle(treeNode) + '';

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 = '

名稱聯系人主管行業' +

'

聯系方式操作';

var rows = $("#dataTree").find('li');

if (rows.length > 0) {

rows.eq(0).before(li_head)

} else {

$("#dataTree").append(li_head);

$("#dataTree").append('

無符合條件數據')

}

}

/**

* 根據權限展示功能按鈕

* @param treeNode

* @returns {string}

*/

function formatHandle(treeNode) {

var htmlStr = '';

htmlStr += '

';

htmlStr += '

';

htmlStr += '

';

htmlStr += '

';

return htmlStr;

}

$(function () {

//初始化數據

query();

})

總結

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

總結

以上是生活随笔為你收集整理的表格 树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。