search

Home  >  Article  >  Web Front-end  >  Detailed example of jQuery using ztree to implement tree table

Detailed example of jQuery using ztree to implement tree table

小云云
小云云Original
2017-12-27 10:24:445797browse

Recently, the company has to make a tree table in its project. Since ztree has been used to implement the basic tree structure before, it is natural that I first thought of using ztree to do it. I searched online for tree tables made by others. Some used ztree and some used treeTable, but the results were not very good. So I made one myself based on the method of using ztree and posted it for your reference. Please read the comments. The effect is shown below.

Detailed example of jQuery using ztree to implement tree table


<!DOCTYPE HTML>
<html>
 <head>
 <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>
<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 p.pTd span {
  line-height: 30px;
  vertical-align: middle;
 }
 .ztree p.pTd {
  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 p.pTd:first-child {
  text-align: left;
  text-indent: 10px;
  border-left: none;
 }
 .ztree .head {
  background: #E8EFF5;
 }
 .ztree .head p.pTd {
  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>
  <p class="layer">
   <p id="tableMain">
    <ul id="dataTree" class="ztree">
    </ul>
   </p>
  </p>
 </body>
</html>
<script type="text/javascript">
var newOpen =null;
$(function () {
 //初始化数据
 var data = [{"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(data);
});
var setting = {
 view: {
  showLine: 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(&#39;title&#39;, &#39;&#39;);
 aObj.append(&#39;<p class="pTd swich fnt" style="width:60%"></p>&#39;);
 var p = $(liObj).find(&#39;p&#39;).eq(0);
 //从默认的位置移除
 switchObj.remove();
 spanObj.remove();
 icoObj.remove();
 //在指定的p中添加
 p.append(switchObj);
 p.append(spanObj);
 //隐藏了层次的span
 var spaceStr = "<span style=&#39;height:1px;display: inline-block;width:" + (spaceWidth * treeNode.level) + "px&#39;></span>";
 switchObj.before(spaceStr);
 //图标垂直居中
 icoObj.css("margin-top","9px");
 switchObj.after(icoObj);
 var editStr = &#39;&#39;;
 //宽度需要和表头保持一致
 editStr += &#39;<p class="pTd" style="width:20%">&#39; + (treeNode.typecode == null ? &#39;&#39; : treeNode.typecode ) + &#39;</p>&#39;;
 editStr += &#39;<p class="pTd" style="width:10%">&#39; + (treeNode.status == &#39;1&#39; ? &#39;有效&#39; : &#39;无效&#39; ) + &#39;</p>&#39;;
 editStr += &#39;<p class="pTd" style="width:10%">&#39; + opt(treeNode) + &#39;</p>&#39;;
 aObj.append(editStr);
}
//初始化列表
function queryHandler(zTreeNodes){
 //初始化树
 $.fn.zTree.init($("#dataTree"), setting, zTreeNodes);
 //添加表头
 var li_head = &#39; <li class="head"><a><p class="pTd" style="width:60%">类型名称</p><p class="pTd" style="width:20%">类型编码</p>&#39; +
  &#39;<p class="pTd" style="width:10%">是否有效</p><p class="pTd" style="width:10%">操作</p></a></li>&#39;;
 var rows = $("#dataTree").find(&#39;li&#39;);
 if (rows.length > 0) {
  rows.eq(0).before(li_head)
 } else {
  $("#dataTree").append(li_head);
  $("#dataTree").append(&#39;<li ><p style="text-align: center;line-height: 30px;" >无符合条件数据</p></li>&#39;)
 }
}
function opt(treeNode) {
 var htmlStr = &#39;&#39;;
 htmlStr += &#39;<input type="button" class="ck" onclick="doEdit(\&#39;&#39; + treeNode.tId + &#39;\&#39;,\&#39;&#39; + treeNode.id + &#39;\&#39;)" value="编辑"/>&#39;;
 htmlStr += &#39;<input type="button" class="ck" onclick="doDelete(\&#39;&#39; + treeNode.tId + &#39;\&#39;,\&#39;&#39; + treeNode.id + &#39;\&#39;, \&#39;&#39; + treeNode.name + &#39;\&#39;)" value="删除"/>&#39;;
 return htmlStr;
}

Related recommendations:

Detailed explanation of the sample code of Java easyui tree table TreeGrid (Picture)

ztree in jquery implements right-click collection function

Sharing the use of zTree tree plug-in in jQuery

The above is the detailed content of Detailed example of jQuery using ztree to implement tree table. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：EasyUI Tree tree component infinite loop instance analysisNext article：EasyUI Tree tree component infinite loop instance analysis

Related articles

See more