快捷導(dǎo)航

基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹狀結(jié)構(gòu)

更新時(shí)間：2018年08月31日 09:11:01 作者：duqian42707

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”，zTree 是開源免費(fèi)的軟件。接下來通過本文給大家介紹基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹狀結(jié)構(gòu)，感興趣的朋友一起看看吧

zTree 簡介

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。

zTree 是開源免費(fèi)的軟件（MIT 許可證）。如果您對 zTree 感興趣或者愿意資助 zTree 繼續(xù)發(fā)展下去，可以進(jìn)行捐助。

zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
采用了延遲加載技術(shù)，上萬節(jié)點(diǎn)輕松加載，即使在 IE6 下也能基本做到秒殺
兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
支持 JSON 數(shù)據(jù)
支持靜態(tài) 和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)
支持任意更換皮膚 / 自定義圖標(biāo)（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
提供多種事件響應(yīng)回調(diào)
靈活的編輯（增/刪/改/查）功能，可隨意拖拽節(jié)點(diǎn)，還可以多節(jié)點(diǎn)拖拽喲
在一個(gè)頁面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
簡單的參數(shù)配置實(shí)現(xiàn) 靈活多變的功能

先來一張完成圖:

這里寫圖片描述

原理很簡單：利用zTree的addDiyDom方法，自定義每個(gè)DOM節(jié)點(diǎn)，在原來的節(jié)點(diǎn)后面加一些div，再利用css樣式使它看起來像個(gè)表格。

這里寫圖片描述

zTree官方api： http://www.treejs.cn/v3/api.php

下面是完整代碼（更新于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默認(rèn)css樣式 2、jquery 3、zTree js-->
  <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>
</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節(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="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 ? '&nbsp;' : treeNode.CONTACT_USER) + '</div>';
    var corpCat = '<div title="' + treeNode.CORP_CAT + '">' + treeNode.CORP_CAT + '</div>';
    editStr += '<div class="diy">' + (treeNode.CORP_CAT == '-' ? '&nbsp;' : corpCat ) + '</div>';
    editStr += '<div class="diy">' + (treeNode.CONTACT_PHONE == null ? '&nbsp;' : treeNode.CONTACT_PHONE ) + '</div>';
    editStr += '<div class="diy">' + formatHandle(treeNode) + '</div>';
    aObj.append(editStr);
  }
  /**
   * 查詢數(shù)據(jù)
   */
  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">聯(lián)系人</div><div class="diy">主管行業(yè)</div>' +
      '<div class="diy">聯(lián)系方式</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;" >無符合條件數(shù)據(jù)</div></li>')
    }
  }
  /**
   * 根據(jù)權(quán)限展示功能按鈕
   * @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 () {
    //初始化數(shù)據(jù)
    query();
  })
</script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的基于jQuery ztree實(shí)現(xiàn)表格風(fēng)格的樹狀結(jié)構(gòu)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: