2. 程式人生 > >jQuery製作樹狀表格

jQuery製作樹狀表格

阿新 • • 發佈：2019-02-09
jQuery(function(){ autoFirstClick(); }) function autoFirstClick(){ jQuery(jQuery("#drillTable").find("a")[0]).click(); } cot = 1; function getTestDate(){ var data = [{"deptId":"root"+ ++cot,"areaNo":"091","deptDesc":"desc"+ ++cot,"isLeaf":"yes"}, {"deptId"
:"root"+ ++cot,"areaNo":"091","deptDesc":"desc"+ ++cot,"isLeaf":"no"}, {"deptId":"root"+ ++cot,"areaNo":"091","deptDesc":"desc"+ ++cot,"isLeaf":"no"}]; return data; } //當前層的開閉 function showClose(deptId){ jQuery("tr[parent_id='" + deptId + "']").each(function
(i){ var obj = jQuery(this); var temp_rank = obj.attr("d_orgrank"); var temp_flag = obj.attr("isShow"); if("yes" == temp_flag){ obj.attr("isShow", temp_flag == 'yes' ? 'no' : 'yes'); jQuery("tr[d_orgrank^='" + temp_rank + "/"
+ "']").hide(); obj.hide(); }else if("no" == temp_flag){ obj.attr("isShow", temp_flag == 'yes' ? 'no' : 'yes'); obj.show(); showCloseChild(jQuery(this)); return; } }); } //子集遞迴 function showCloseChild(obj){ var temp_flag = obj.attr("isShow"); var temp_rank = obj.attr("d_orgrank"); var temp_dept_id = obj.attr("d_dept_id"); if("yes" == temp_flag){ obj.show(); jQuery("tr[parent_id='" + temp_dept_id + "']").each(function(i){ showCloseChild(jQuery(this)); }); }else { return; } } //下鑽 //@auth nayi_224 function drillDept(td){ jQuery(td).find("#img").html(jQuery(td).find("#img").html() == "+" ? "-" : "+"); var objTr = jQuery(td).parent().parent(); var d_orgrank_all = objTr.attr("d_orgrank"); var d_level= objTr.attr("d_level"); var level = parseInt(d_level.substring("d_level_".length)); var deptId = objTr.attr("d_dept_id"); var isExists = jQuery("tr[parent_id='" + deptId + "']"); if(isExists.html()){ showClose(deptId); return; } //動態頁面使用ajax //var url = "<%=contextPath%>/NayiTest!drillTable.action?aa="+Math.random(); //jQuery.ajax({ // url:url, // type:'post', // data:{ // sDept:deptId // }, // success:function(result) { var result = getTestDate(); //獲取測試資料 var tJson = eval(result); var tHtml = ""; var space = ""; for(var i = 0; i < level; i++){ space += "&nbsp&nbsp"; } for(var i = 0; i < tJson.length; i++){ var tempDeptId = tJson[i].deptId; //需要改的地方 tHtml += "<tr d_dept_id='" + tempDeptId + "'"; tHtml += " isShow='yes' "; tHtml += " parent_id='" + deptId + "' "; tHtml += " d_orgrank='" + d_orgrank_all + "/" + tempDeptId; tHtml += "' d_level='d_level_" + (level + 1) + "' >" if("no" == tJson[i].isLeaf){ tHtml += "<td style='text-align:left;'>" + space + "<a onclick='drillDept(this)'><span id='img'>+</span>" + tJson[i].deptDesc + "</a></td>"; //需要改的地方 }else { tHtml += "<td style='text-align:left;'>" + space + tJson[i].deptDesc + "</td>"; //需要改的地方 } tHtml += "<td>" + tJson[i].areaNo + "</td>"; //需要改的地方 tHtml += "<td>" + tJson[i].deptId + "</td>"; //需要改的地方 tHtml += "</tr>"; } objTr.after(tHtml); // } //}); }

相關推薦

jQuery製作樹狀表格

jQuery(function(){ autoFirstClick(); }) function autoFirstClick(){ jQuery(jQuery("#drillTable").find("a")[0]).click();

15.jQuery-DOM樹狀文件

1.效果圖： 2.html程式碼 <!DOCTYPE html> <html> <head> <title>DOM樹狀文件</title> <style> body

layUI展示樹狀treetable樹形表格完整程式碼

前言：因專案功能需要，在shiro許可權管理模組中需要使用樹狀展示，前端使用的layUI框架，在官網的開發文件上沒有找到樹狀表格的內容。只有樹狀選單的文件：https://www.layui.com/doc/modules/tree.html 樹狀表格步驟如下： 1、首先下載所需

【常用 JS 外掛】jQuery TreeTable 樹表格外掛

TreeTable treeTable 是跨瀏覽器、效能很高的 jQuery 的樹表元件，它使用非常簡單，只需要引用 jQuery 庫和一個 js 檔案，介面也很簡單。 優點： 相容主流瀏覽器：支援 IE6 和 IE6+, Firefox, chrome, Opera,

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

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

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

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

樹狀外掛 Jquery-zTree的基本用法

1 核心檔案核心檔案： 核心包 ( jquery.ztree.core-3.x.js ) 兩個擴充套件包： 複選框功能包 ( jquery.ztree.excheck-3.x.js ) 編輯功能包 ( jquery.ztree.exedit-3.x.js ) 合併包=

【bzoj3289】Mato的文件管理 離散化+莫隊算法+樹狀數組

逆序對 sample 單位 oid 逆序 cmp family += efi 原文地址：http://www.cnblogs.com/GXZlegend/p/6805224.html 題目描述 Mato同學從各路神犇以各種方式（你們懂的）收集了許多資料，這些資料一共有n份

SCU - 4441 Necklace（樹狀數組求最長上升子數列）

arranged art 樹狀 max pri nsis names for each cnblogs Necklace frog has \(n\) gems arranged in a cycle, whose beautifulness are \(a_1, a_2,

【BZOJ1935/4822】[Shoi2007]Tree 園丁的煩惱/[Cqoi2017]老C的任務 樹狀數組

tchar get ont n+1 div 區域 spa 都是 struct 題意：兩道題差不多，都是給你一堆平面上的點，每個點有權值，然後m次詢問求某一矩形區域內的點權和 題解：先離散化，然後將詢問拆成左右兩條線段，然後將點和這些線段一起按x坐標排序，在y軸上維護樹狀數

POJ 2299 Ultra-QuickSort（樹狀數組+離散化）

計算 htm upd ace stream max arc clas 下標 http://poj.org/problem?id=2299 題意：給出一組數，求逆序對。 思路： 這道題可以用樹狀數組解決，但是在此之前，需要對數據進行一下預處理。 這道題目的數據可

hdu (1556 樹狀數組)

blank ... ons ted spa 依次 u+ code include 題目鏈接：http://acm.hdu.edu.cn/showproblem.php?pid=1556 Color the ball Time Limit: 9000/3000 MS (

[SPOJ DQUERY] D-query（樹狀數組，離線）

vector scan con oid n) fin %d ear span 題目鏈接：https://vjudge.net/problem/SPOJ-DQUERY 題意：給定數列，q次詢問，問區間內不同數字的個數。 可以用主席樹，但是還有更好寫的辦法。 離線存下所有的詢問

[BZOJ1264][AHOI2006]基因匹配Match（DP + 樹狀數組）

return scanf namespace onclick ring splay urn ret int 傳送門 有點類似LCS，可以把 a[i] 在 b 串中的位置用一個鏈式前向星串起來，由於鏈式前向星是從後往前遍歷，所以可以直接搞。 狀態轉移方程 f[i]

【轉】關於LIS和一類可以用樹狀數組優化的DP 預備知識

免費 關註 最長上升子序列 2.3 bzoj1264 一個數 long 個數字 等於 原文鏈接 http://www.cnblogs.com/liu-runda/p/6193690.html 預備知識 　　　　DP（Dynamic Programming)

火柴排隊（NOIP2013）（附樹狀數組專題講解（其實只是粗略。。。））

blog 規律 混亂 ace urn ets gets value update 原題傳送門。。（9018上不去。明天再來搞。） 首先，這道題目是一道神奇的題。 看到這道題，第一眼就覺得2個數組排個序，然後一一對應的時候一定差值最小。 由於我們可以將這2個數列同時進行調換。

ZOJ-2386 Ultra-QuickSort 【樹狀數組求逆序數+離散化】

bool 個數 lock ascend nat 前綴和 ron determine inf Description In this problem, you have to analyze a particular sorting algorithm. The algor

[CF808B] Average Sleep Time（[強行]樹狀數組，數學）

printf set urn pac int typedef open .com class 題目鏈接：http://codeforces.com/contest/808/problem/B 題意：n個數，求其中每k個數的和的平均值。 鬼知道我怎麽會石樂誌上來就用了樹狀數組

Codeforces Round #365 (Div. 2) D - Mishka and Interesting sum（離線樹狀數組）

turn string 之前 algorithm printf ace r++ void contest http://codeforces.com/contest/703/problem/D 題意： 給出一行數，有m次查詢，每次查詢輸出區間內出現次數為偶數次的數字的異

樹狀數組

sum pid color 數組 ret pre spa class void c為樹狀數組，c[i]存儲i-lowbit[i]+1到i的數組的值 c[x+ lowbit(x)]為c[x]的父親節點 http://cogs.pro/cogs/problem/prob