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è)表格。

下面是完整代碼(更新于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節(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('

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);

}

/**

* 查詢數(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án)系人主管行業(yè)' +

'

聯(lián)系方式操作';

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

if (rows.length > 0) {

rows.eq(0).before(li_head)

} else {

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

$("#dataTree").append('

無(wú)符合條件數(shù)據(jù)')

}

}

/**

* 根據(jù)權(quán)限展示功能按鈕

* @param treeNode

* @returns {string}

*/

function formatHandle(treeNode) {

var htmlStr = '';

htmlStr += '

';

htmlStr += '

';

htmlStr += '

';

htmlStr += '

';

return htmlStr;

}

$(function () {

//初始化數(shù)據(jù)

query();

})

總結(jié)

以上所述是小編給大家介紹的基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹(shù)狀結(jié)構(gòu)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。