jQuery 利用ztree實(shí)現(xiàn)樹形表格的實(shí)例代碼
更新時(shí)間：2017年09月27日 10:55:07 作者：葉沁寒
最近公司要做一個(gè)樹形表格，由于之前對(duì)ztree實(shí)現(xiàn)基本的樹形結(jié)構(gòu)，所以想到用ztree來(lái)做，下面小編給大家分享實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧
最近公司的項(xiàng)目中要做一個(gè)樹形表格，因?yàn)橹耙恢痹谟脄tree實(shí)現(xiàn)基本的樹形結(jié)構(gòu)，理所當(dāng)然的首先想到利用ztree來(lái)做。
網(wǎng)上找了一下別人做的樹形表格，有使用ztree的，也有使用treeTable的，但效果都不太好，于是參考使用ztree的做法自己做了一個(gè)，貼出來(lái)供大家參考，請(qǐng)看注釋說(shuō)明，效果如下所示。
<!DOCTYPE HTML>
<html>
<head>
<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>
<style>
body {
overflow: auto;
}
.ztree *{
font-family: "微軟雅黑","宋體",Arial, "Times New Roman", Times, serif;
}
.ztree {
padding: 0;
border-left: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
border-bottom: 1px solid #E3E3E3;
}
.ztree li a {
vertical-align: middle;
height: 32px;
padding: 0px;
}
.ztree li > a {
width: 100%;
}
.ztree li a.curSelectedNode {
padding-top: 0px;
background-color: #FFE6B0;
border: 1px #FFB951 solid;
opacity: 1;
height: 32px;
}
.ztree li ul {
padding-left: 0px
}
.ztree div.divTd span {
line-height: 30px;
vertical-align: middle;
}
.ztree div.divTd {
height: 100%;
line-height: 30px;
border-top: 1px solid #E3E3E3;
border-left: 1px solid #E3E3E3;
text-align: center;
display: inline-block;
color: #6c6c6c;
overflow: hidden;
}
.ztree div.divTd:first-child {
text-align: left;
text-indent: 10px;
border-left: none;
}
.ztree .head {
background: #E8EFF5;
}
.ztree .head div.divTd {
color: #393939;
font-weight: bold;
}
.ztree .ck{
padding: 0 5px;
margin: 2px 3px 7px 3px;
}
li:nth-child(odd){
background-color:#F5FAFA;
}
li:nth-child(even){
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div class="layer">
<div id="tableMain">
<ul id="dataTree" class="ztree">
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var newOpen =null;
$(function () {
//初始化數(shù)據(jù)
var data = [{"id":"20170525091439001010","name":"企業(yè)注冊(cè)","pId":null,"status":"1","typecode":"02"},{"id":"20170724174119005610","name":"部門溝通演練","pId":"20170525091439001010","status":"1","typecode":"2"},{"id":"20170725085455000110","name":"測(cè)試12","pId":null,"status":"1","typecode":"11"},{"id":"20170731171011000410","name":"審批流程","pId":null,"status":"1","typecode":"222"},{"id":"20170803133941018010","name":"單位登記","pId":null,"status":"1","typecode":"188"},{"id":"20170804085419000110","name":"模擬","pId":null,"status":"1","typecode":"122"},{"id":"20170809090321000110","name":"審批模擬（新）測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試","pId":"20170525091439001010","status":"1","typecode":"110"},{"id":"20170809105407009210","name":"測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)測(cè)","pId":"20170809090321000110","status":"1","typecode":"123"},{"id":"20170814183837000210","name":"企業(yè)登記","pId":null,"status":"1","typecode":"111"},{"id":"20170822183437000710","name":"單事項(xiàng)-部門溝通","pId":"20170814183837000210","status":"1","typecode":"822"},{"id":"20170922112245000510","name":"23","pId":null,"status":"1","typecode":"03"},{"id":"20170922143810000010","name":"sdfa","pId":null,"status":"1","typecode":"04"},{"id":"20170922145203000110","name":"64526","pId":null,"status":"1","typecode":"34262"},{"id":"20170922155403001610","name":"333","pId":null,"status":"1","typecode":"33354"},{"id":"20170922171750000210","name":"4441234","pId":null,"status":"1","typecode":"44444"},{"id":"20170925160636007410","name":"測(cè)試數(shù)據(jù)","pId":"20170731171011000410","status":"1","typecode":"231"},{"id":"20170925163306007510","name":"23462111","pId":null,"status":"1","typecode":"2345"},{"id":"20170925163959007610","name":"242345","pId":"20170922112245000510","status":"1","typecode":"3625346"}];
queryHandler(data);
});
var setting = {
view: {
showLine: 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="divTd swich fnt" style="width:60%"></div>');
var div = $(liObj).find('div').eq(0);
//從默認(rèn)的位置移除
switchObj.remove();
spanObj.remove();
icoObj.remove();
//在指定的div中添加
div.append(switchObj);
div.append(spanObj);
//隱藏了層次的span
var spaceStr = "<span style='height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
switchObj.before(spaceStr);
//圖標(biāo)垂直居中
icoObj.css("margin-top","9px");
switchObj.after(icoObj);
var editStr = '';
//寬度需要和表頭保持一致
editStr += '<div class="divTd" style="width:20%">' + (treeNode.typecode == null ? '' : treeNode.typecode ) + '</div>';
editStr += '<div class="divTd" style="width:10%">' + (treeNode.status == '1' ? '有效' : '無(wú)效' ) + '</div>';
editStr += '<div class="divTd" style="width:10%">' + opt(treeNode) + '</div>';
aObj.append(editStr);
}
//初始化列表
function queryHandler(zTreeNodes){
//初始化樹
$.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
//添加表頭
var li_head = ' <li class="head"><a><div class="divTd" style="width:60%">類型名稱</div><div class="divTd" style="width:20%">類型編碼</div>' +
'<div class="divTd" style="width:10%">是否有效</div><div class="divTd" style="width:10%">操作</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>')
}
}
function opt(treeNode) {
var htmlStr = '';
htmlStr += '<input type="button" class="ck" onclick="doEdit(\'' + treeNode.tId + '\',\'' + treeNode.id + '\')" value="編輯"/>';
htmlStr += '<input type="button" class="ck" onclick="doDelete(\'' + treeNode.tId + '\',\'' + treeNode.id + '\', \'' + treeNode.name + '\')" value="刪除"/>';
return htmlStr;
}
總結(jié)
以上所述是小編給大家介紹的jQuery 利用ztree實(shí)現(xiàn)樹形表格的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jquery實(shí)現(xiàn)自定義樹形表格的方法【自定義樹形結(jié)構(gòu)table】
- 推薦8款jQuery輕量級(jí)樹形Tree插件
- jQuery樹形控件zTree使用小結(jié)
- jquery ztree實(shí)現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
- json+jQuery實(shí)現(xiàn)的無(wú)限級(jí)樹形菜單效果代碼
- jquery實(shí)現(xiàn)樹形菜單完整代碼
- jQuery ztree實(shí)現(xiàn)動(dòng)態(tài)樹形多選菜單
- jQuery 樹形結(jié)構(gòu)的選擇器
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
- jQuery實(shí)現(xiàn)樹形員工信息表
相關(guān)文章
jquery mobile實(shí)現(xiàn)可折疊的導(dǎo)航按鈕
這篇文章主要為大家詳細(xì)介紹了jquery mobile實(shí)現(xiàn)可折疊的導(dǎo)航按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
發(fā)微博功能描述:當(dāng)點(diǎn)擊輸入框時(shí)，提示的文字會(huì)去掉；當(dāng)光標(biāo)離開時(shí)，如果沒有輸入任何內(nèi)容，提示的文字會(huì)恢復(fù),需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JQuery為頁(yè)面Dom元素綁定事件及解除綁定方法,需要的朋友可以參考下2014-04-04
使用Jquery來(lái)實(shí)現(xiàn)可以輸入值的下拉選單 雛型
最近案子中，需要使用下拉選單，但問題是，里面選項(xiàng)都會(huì)有各 其他：，然後 可以 讓 user 在輸入2011-12-12
jquery.serialize() 函數(shù)語(yǔ)法及簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery.serialize() 函數(shù)語(yǔ)法及簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-07-07
Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們?nèi)粘ｉ_發(fā)中經(jīng)常會(huì)使用到.bind()、.live()、.delegate()和.on()，有些同學(xué)會(huì)對(duì)這四者存在一些疑慮，所以下面這篇文章主要給大家介紹了關(guān)于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒。2017-08-08
jQuery中$.each()函數(shù)的用法引申實(shí)例
jQuery中的$.each()函數(shù)比f(wàn)orEach更加強(qiáng)大,可以用來(lái)遍歷JavaScript中的任意集合,借來(lái)下來(lái)我們會(huì)舉幾個(gè)jQuery中$.each()函數(shù)的用法引申實(shí)例,首先先來(lái)回顧一下遍歷用法的基礎(chǔ):2016-05-05
JQuery團(tuán)隊(duì)打造的javascript單元測(cè)試工具QUnit介紹
元測(cè)試又稱為模塊測(cè)試，是針對(duì)程序模塊(軟件設(shè)計(jì)的最小單位)來(lái)進(jìn)行正確性檢驗(yàn)的測(cè)試工作。單元測(cè)試主要是用來(lái)檢驗(yàn)程式的內(nèi)部邏輯，也稱為個(gè)體測(cè)試、結(jié)構(gòu)測(cè)試或邏輯驅(qū)動(dòng)測(cè)試。通常由撰寫程式碼的程式設(shè)計(jì)師負(fù)責(zé)進(jìn)行。2010-02-02
這篇文章主要介紹了Jquery判斷頁(yè)面圖片是否加載失敗,加載失敗則顯示默認(rèn)圖片的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-06-06
jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動(dòng)畫滑動(dòng)圖片切換效果
Slider Revolution插件是一款非常強(qiáng)大的插件了，我們可以利用它來(lái)制作出各種效果并且還支持移動(dòng)設(shè)備，支持手機(jī)觸摸，鍵盤翻頁(yè)；它內(nèi)置幻燈、視頻播放計(jì)時(shí)器等等效果，具體我們來(lái)看看。2015-06-06