基于jQuery ztree实现表格风格的树状结构
程序员文章站
2022-10-08 12:57:10
ztree 简介
ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zt...
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：
下面是完整代码（更新于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 href="https://cdn.bootcss.com/ztree.v3/3.5.29/css/ztreestyle/ztreestyle.min.css" 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实现表格风格的树状结构，希望对大家有所帮助