2. 程式人生 > >ztree實現表格風格的樹狀結構

ztree實現表格風格的樹狀結構

阿新 • • 發佈：2019-01-16
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 ? '&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); } /** * 查詢資料 */ 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_edit" title="檢視" href="javascript:view(\'' + treeNode.id + '\')">檢視</a></div>'; htmlStr += '<div class="icon_div"><a class="icon_edit" title="修改" href="javascript:edit(\'' + treeNode.id + '\')">修改</a></div>'; htmlStr += '<div class="icon_div"><a class="icon_add" title="新增子部門" href="javascript:addSector(\'' + treeNode.id + '\')">新增</a></div>'; htmlStr += '<div class="icon_div"><a class="icon_del" title="刪除" href="javascript:del(\'' + treeNode.id + '\')">刪除</a></div>'; return htmlStr; } function view(id){ alert('檢視：'+id) } function edit(id){ alert('修改：'+id); } function addSector(id){ alert('新增子部門：'+id); } function del(id){ alert('刪除：'+id); } $(function () { //初始化資料 query(); })

相關推薦

ztree實現表格風格的樹狀結構

var zTreeNodes; var setting = { view: { showLine: false, showIcon: false, addDiyDom: addDiyDom

php遞迴實現一維陣列轉為指定樹狀結構 --- 省市區處理

### 這兩天腦殼痛，一時短路，想不到準備利用遞迴實現這個需求，最後還是要請教同事，回來自己在實現了一遍，並記錄下來 ### 原資料： // { // 廣東省: { // 廣州市: [ // "天河區", // "從化區", // "增城區" // ], // 深

php 實現遍歷資料夾,返回樹狀結構陣列

<?php //遍歷資料夾下所有檔案 define('DS', DIRECTORY_SEPARATOR); //根據

PostgreSQL遞迴查詢實現樹狀結構查詢

在Postgresql的使用過程中發現了一個很有意思的功能，就是對於需要類似於樹狀結構的結果可以使用遞迴查詢實現。比如說我們常用的公司部門這種資料結構，一般我們設計表結構的時候都是類似下面的SQL，其中parent_id為NULL時表示頂級節點，否則表示上級節點

樹狀結構---用jquery的小外掛jquery.treeview實現樹狀結構

用jquery的小外掛jquery.treeview實現樹狀結構 步驟： 1)在頁面中引入相應的js、和css檔案(還有相應的圖片) <!-- 1，匯入js與css檔案 -->

原生JS實現樹狀結構列表

樹狀結構列表，這個技術點之前有寫過了，是基於vue講解，但似乎都沒有解決痛點，最基礎的原生JS該怎麼實現呢？ 這篇文章會全面詳細的介紹樹狀結構列表的實現，從資料處理成樹狀結構，到動態生成dom節點渲染頁面。  確定原始資料結構  原始資料是需要按照下面這種結構來定義的，如果原始資料已經是被

zTree實現多選樹

avi 1.4 data core sof gravity sni mod lin zTree實現多選樹 1、實現源代碼 <!DOCTYPE html> <html> <head> <title>多選

利用checkbox自帶屬性indeterminate構建含部分選中狀態的樹狀結構

urn true 監聽 tps 多說 con ont 框架 tree 本來上個月就像發的，但是一直忙啊忙的也沒時間整理，所以拖到了現在。 好吧上面這句就是廢話，我就是感概下。下面是正文。 前段時間在弄一個輕量級的web項目，要構建一個樹狀結構目錄，同時希望能把部分選中的狀態

指定 年-月-日 將其封裝tree樹狀結構

樹狀 number abstract ren true fin col else bootstrap Scdp.define(‘Violation.view.ViolationView‘, { extend: ‘Scdp.bootstrap.mvc.AbstractCr

權限模塊_分配權限_顯示樹狀結構_頁面中的選中效果

處理 children tro func input Language context image java 權限模塊__分配權限__顯示樹狀結構1 顯示樹狀結構；依賴關系 setPrivilegeUI.jsp <!-- 顯示權限樹 --> &

Sql查詢樹狀結構下級子節點的數量

leave SQ 樹狀 div where AR light bsp brush --查詢Id為1的所有子節點層數的數量;with cte as ( select id,parentId,0 as Leave from _TestLeave where id = 1　　-

SQL Server 根據樹狀結構表生成以/號分割的路由字串

很多情況下，我們有必要把樹形結構進行資料梳理。比如，要方便的過濾出一個父節點下的所有子節點等等。。。 這個時候，我們可以生成一個路徑表字符串，在應用時只需要對該字串進行索引即可達成目的。 目標：按圖示的部門結構樹，獲取本身的完整路徑字串。比如，前道工序部門，其部門程式碼為PDTE，上級部門為PD生產部，按

oracle樹狀結構層級查詢小結--connect by等之測試資料

1.建立表 ( dept_id VARCHAR2(32) not null, dept_name VARCHAR2(128), dept_code VARCHAR2(32), par_dept_id VARCHAR2(32),

oracle樹狀結構層級查詢小結--connect by等

oracle樹狀結構層級查詢小結--connect by等 一、簡介： （1）oracle樹狀結構查詢即層次遞迴查詢，是sql語句經常用到的。 （2）樹狀結構通常由根節點、父節點、子節點和葉節點組成，簡單來說，一張表中存在兩個欄位，dept_id,par_dept_id,那麼通過找到每一條記錄的

Linux樹狀結構檔案詳解

Linux樹狀檔案詳解 /           根目錄 /bin        存放使用者可執行程式 /boot       存放系統啟動時所需檔案、核心檔案 /dev      

【Java程式設計】以樹狀結構輸出目錄

以樹狀結構輸出計算機某個指定資料夾下的所有的檔案和子資料夾名稱。 提示：使用File的方法，並結合遞迴實現 程式碼如下： import java.io.File; /** * 以樹狀結構輸出計算機

java將樹狀結構資料通過map分級(一種思路)

package com.tbxc; public class Product { private Integer id; private String name; private Integer parentId; public Integer getId() { return id; }

javaEE 部門樹狀結構顯示以及要注意的問題

遞迴顯示部門樹狀結構，部門資訊樹是採用雙親表示法儲存的（不知道的去看資料結構） 一：首先寫個遞迴演算法，在控制檯列印一下看是否正確。 （1）將頂級部門查找出來，作為引數呼叫遞迴函式； （2）遍歷傳遞過

Query+ztree實現下拉樹複選框功能

完整專案下載連結： CSDN下載頁 檔案比較大是由於該功能是在公司專案中實現的，公司用了AdminLTE.css，其實做這個功能用到的並不多，如果不用該css也沒影響，就是下拉框div會變成圓角，自己改下樣式就行了。在打包上傳的時候我將jquery，boot

java實現的Trie樹資料結構

package com.algorithms; import java.util.HashMap; import java.util.Map; public class Trie_Tree{ /** * 內部節點類 * @author "zhshl" * @date 2014-1