suchen

Heim  >  Artikel  >  Web-Frontend  >  Detailliertes Beispiel für jQuery mit ztree zur Implementierung einer Baumtabelle

Detailliertes Beispiel für jQuery mit ztree zur Implementierung einer Baumtabelle

小云云
小云云Original
2017-12-27 10:24:445794Durchsuche

Vor kurzem musste das Unternehmen in einem Projekt eine Baumtabelle erstellen, da es Ztree zur Implementierung der grundlegenden Baumstruktur verwendet hat, war es selbstverständlich, dass ich zuerst daran dachte, Ztree zu verwenden. Ich habe online nach Baumtabellen gesucht, die von anderen erstellt wurden, aber die Ergebnisse waren nicht sehr gut, also habe ich selbst eine erstellt, die auf der Methode zur Verwendung von ztree basiert. Bitte lesen Sie die Kommentare. Der Effekt ist unten dargestellt.

Detailliertes Beispiel für jQuery mit ztree zur Implementierung einer Baumtabelle


<!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;
}

Verwandte Empfehlungen:

Detaillierte Erklärung der Java EasyUI-Baumtabelle TreeGrid Beispielcode (Bild)

ztree in jquery implementiert die Rechtsklick-Sammelfunktion

Freigabe der Verwendung des zTree-Baum-Plug-ins in jQuery

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für jQuery mit ztree zur Implementierung einer Baumtabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：EasyUI Tree-Baumkomponenten-Endlosschleifen-InstanzanalyseNächster Artikel：EasyUI Tree-Baumkomponenten-Endlosschleifen-Instanzanalyse

In Verbindung stehende Artikel

Mehr sehen