最近公司的项目中要做一个树形表格,因为之前一直在用最好实现基本的树形结构,理所当然的首先想到利用最好来做。
网上找了一下别人做的树形表格,有使用最好的,也有使用treeTable的,但效果都不太好,于是参考使用最好的做法自己做了一个,贴出来供大家参考,请看注释说明,效果如下所示。
& lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt;链接的href=" https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css " rel=巴獠縩ofollow”rel=把奖怼北?
& lt;脚本src=" https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js "祝辞& lt;/script>
& lt; style>
身体{
溢出:汽车;
}
.ztree * {
字体类型:“微软雅黑”、“宋体”,Arial,“Times New Roman”时代,衬线;
}
.ztree {
填充:0;
border-left: 1 px固体# E3E3E3;
边境:1 px固体# E3E3E3;
边界底部:1 px固体# E3E3E3;
}
李.ztree一个{
vertical-align:中间;
高度:32像素;
填充:0 px;
}
李.ztree祝辞一个{
宽度:100%;
}
.ztree李。curSelectedNode {
padding-top: 0 px;
background - color: # FFE6B0;
边界:1 px # FFB951固体;
透明度:1;
高度:32像素;
}
李.ztree ul {
padding-left: 0 px
}
.ztree div.divTd跨度{
行高:30 px;
vertical-align:中间;
}
.ztree div.divTd {
高度:100%;
行高:30 px;
border-top: 1 px固体# E3E3E3;
border-left: 1 px固体# E3E3E3;
text-align:中心;
显示:inline-block;
颜色:# 6 c6c6c;
溢出:隐藏;
}
.ztree div.divTd:第一个孩子{
text-align:左;
indent: 10 px;
border-left:没有;
}
.ztree .head {
背景:# E8EFF5;
}
.ztree .head div.divTd {
颜色:# 393939;
粗细:大胆的;
}
.ztree .ck {
填充:0 5 px;
保证金:2 px 3 px 7 px 3 px;
}
李:nth-child(奇数){
background - color: # F5FAFA;
}
李:nth-child(甚至){
background - color: # FFFFFF;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="层"比;
& lt; div id=皌ableMain”比;
& lt; ul类id=癲ataTree”=白詈谩北?
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
& lt;脚本type=" text/javascript祝辞
var newOpen=零;
$(函数(){//初始化数据
var data=https://www.yisu.com/zixun/[{"id":"20170525091439001010","name":"企业注册","pId":null,"status":"1","typecode":"02"},{"id":"20170724174119005610","name":"部门沟通演练","pId":"20170525091439001010","status":"1","typecode":"2"},{"id":"20170725085455000110","name":"测试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":"审批模拟（新）测试测试测试测试测试","pId":"20170525091439001010","status":"1","typecode":"110"},{"id":"20170809105407009210","name":"测测测测测测测测测测测测测测测测测测","pId":"20170809090321000110","status":"1","typecode":"123"},{"id":"20170814183837000210","name":"企业登记","pId":null,"status":"1","typecode":"111"},{"id":"20170822183437000710","name":"单事项-部门沟通","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":"测试数据","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(数据);
});={var设置
观点:{
showLine:假的,
addDiyDom: addDiyDom,
}，
数据:{
simpleData: {
启用:真
}
}
};/* *
*自定义DOM节点
*/函数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(“标题”、“);
aObj.append (' & lt; div class=" divTd号fnt”祝辞& lt;/div>”);
var div=$ (liObj); (div) .eq (0);//从默认的位置移除
switchObj.remove ();
spanObj.remove ();
icoObj.remove ();//在指定的div中添加
div.append (switchObj);
div.append (spanObj);//隐藏了层次的跨度
var spaceStr=" & lt;跨风格='身高:1 px;显示:inline-block;宽度:”+ (spaceWidth * treeNode.level) +“px的祝辞& lt;/span>”;
switchObj.before (spaceStr);//图标垂直居中
icoObj.css (“margin-top”、“9 px”);
switchObj.after (icoObj);
var editStr=";//宽度需要和表头保持一致
editStr +=& lt; div类=眃ivTd”在“+ (treeNode。typecode==null & # 63;”:treeNode。typecode) + & lt;/div>;
editStr +=& lt; div类=眃ivTd”在“+ (treeNode。状态==' 1 ' & # 63;“有效”:“无效”)+ ' & lt;/div>;
editStr +=& lt; div类=眃ivTd”在“+选择(treeNode) + & lt;/div>;
aObj.append (editStr);
}//初始化列表
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
