我的前端工具集(四)樹狀結構后篇

?

liuyuhang原創，未經允許禁止轉載

?

目錄

我的前端工具集

?

上文連接

?

我的前端工具集(四)樹狀結構前偏

?

1.數據組織

?

　　在3.2.節有截圖

?

2.樹狀結構代碼

?

　　2.1.css代碼，自己可以隨意修改，也蠻方便

?

.treeDiv {margin: 2px 0px 2px 0px;padding: -1px;width: 800px; }.others {padding: 1px 5px 1px 5px;margin: 0px 1px 0px 1px; }.plusBtn {padding: 1px 5px 1px 5px;margin: 0px 3px 0px 0px; }.On {color: #26ca28;margin-left: 4px; }.Off {color: white;margin-left: 12px;margin-right: 6px; }.checkboxBtn {border-radius: 15px;background-color: #cccccc;border-width: 2px;border-color: #999999;border-style: solid;border-collapse: inherit;padding: 2px 0px 0px 0px;height: 22px;width: 22px;margin-right: 2px;font-size: 12px; }

?

　　2.2.js代碼，注意看注釋說明，List的構成

?

　　　　/*** list構成* [{id:id , pid:pid , param1:param1 , param2:param2 , ...} ,...]* @param:id:目標div的id* @param:list:樹形結構的json,構成如上* @param:arr:要從list中遍歷出來作為一行的順次元素數組.arr[i]將作為其class之一* @isCheckbox:是否添加層級復選框* @pid:頂級pid,初始化使用0*/function initTree(id, list, pid, arr, isCheck) {if (pid == 0 || (pid != 0 && $("#" + id + " #span-down-" + pid).is(":hidden"))) {var result = "";for (var i = 0; i < list.length; i++) {var row, //定義當前行divtab, //定義縮進checkbox, //定義checkboxplus; //定義節點if (list[i].pid == pid) {row = "<div id='" + list[i].id + "' pid='" + list[i].pid + "' class='treeDiv'>";if (pid != 0) {var space = parseInt($("#" + id + " #" + pid + " .space").css("padding-left").split("px")[0]) + 28;tab = "<span class='space' style='padding-left:" + space + "px'></span>";} else {tab = "<span class='space' style='padding-left:0px;'></span>";}if (isCheck) {checkbox = "<button select='off' class='btn checkboxBtn' οnclick='selectChange(\"" + id + "\",\"" + list[i].id + "\")'></button>";}plus = "<button type='button' class='btn btn-default plusBtn'>" + "<span id='span-right-" + list[i].id + "' class='glyphicon glyphicon-plus' style='color:black'></span>"+ "<span id='span-down-" + list[i].id + "' class='glyphicon glyphicon-minus' style='color:black;display:none'></span></button>"var others = "<button type='button' class='btn btn-default btn-xs other'>";for (var j = 0; j < arr.length; j++) {others = others + "<span style='padding:5px' class='" + arr[j] + "'>" + list[i][arr[j]] + "</span>";}result = result + row + tab + (isCheck ? checkbox : "") + plus + others + "</button></div>";}}//加載內容if (pid == 0 || pid == "0") {$("#" + id).append(result);//獲取已加載的節點的pidvar temp = $("#" + id + " .treeDiv");//循環該idfor (var i = 0; i < temp.length; i++) {var thisId = $(temp[i]).attr("id");//調用自身加載節點 initTree(id, list, thisId, arr, isCheck);}} else {$("#" + id + " #" + pid).append(result);//獲取已加載的節點的pidvar temp2 = $("#" + id + " #" + pid + " .treeDiv");//循環該idfor (var i = 0; i < temp2.length; i++) {var thisId2 = $(temp2[i]).attr("id");//調用自身加載節點 initTree(id, list, thisId2, arr, isCheck);}}//展開節點按鈕監聽$("#" + id + " .plusBtn").unbind("click");$("#" + id + " .plusBtn").click(function() {initTree(id, list, $(this).parent().attr("id"), arr, isCheck);});$("#" + id + " #span-right-" + pid).hide();$("#" + id + " #span-down-" + pid).show();} else {$("#" + id + " div[pid='" + pid + "']").remove();$("#" + id + " #span-right-" + pid).show();$("#" + id + " #span-down-" + pid).hide();}}

?

3.調用及效果

?

　　3.1.調用代碼

?

　　　 $("#assetShowTree").html(""); //刪除原有樹控件console.log(list);//打印數據initTree("assetShowTree", list, 0, [ "assetName", "assetDesc", "inspecteStatusShow", "fixStatusShow" ], true);

?

　　3.2.調用效果截圖以及數據

?

?

4.其他功能

?

　　4.1.若該樹調用時，復選框參數為true，則有復選框功能，要搭配復選框的js函數

　　　　點擊父節點的checkbox，子節點也會跟隨點亮

　　　checkbox是div模擬的，增加了select屬性，為on即為選擇，為off即為未選擇。

　　　　獲取多選id在4.2.節

?

/*** 點擊復選框的函數 * @param:id:目標div的id* @param:listId:被點擊的復選框所屬的數據中的id標識*/function selectChange(id, listId) {//當前節點選擇if ($("#" + id + " div[id='" + listId + "'] .checkboxBtn").css("background-color") == "rgb(255, 204, 0)") {$("#" + id + " div[id='" + listId + "'] .checkboxBtn").css("background-color", "rgb(204, 204, 204)");} else {$("#" + id + " div[id='" + listId + "'] .checkboxBtn").css("background-color", "rgb(255, 204, 0)");}//子節點同步點亮var temp = $("#" + id + " .checkboxBtn");for (var i = 0; i < temp.length; i++) {if ($(temp[i]).css("background-color") == "rgb(204, 204, 204)") {$(temp[i]).attr("select", "off");} else {$(temp[i]).attr("select", "on");}}//關聯選擇while (true) {var count = $("#" + id + " .checkboxBtn[select='off']").length; //當前off統計,中間是否有變化,用來做跳出while循環條件for (var i = 0; i < $("#" + id + " .checkboxBtn").length; i++) {if ($($(".checkboxBtn")[i]).attr("select") == "on") {//若當前節點為on,遍歷兄弟節點獲取狀態,若都為on,則點亮直接父節點var spid = $($("#" + id + " .checkboxBtn")[i]).parent().attr("pid"); //點擊節點的pidvar bro = $("#" + id + " .treeDiv[pid='" + spid + "']>.checkboxBtn");var flag = true;for (var j = 0; j < bro.length; j++) { //pid相等的節點組if ($(bro[j]).attr("select") == "off") { //若子節點中有為off的,則跳出循環flag = false;break;}}if (flag) { //若所有節點都為on,則點亮父節點$("#" + id + " #" + spid + ">.checkboxBtn").css("background-color", "rgb(255, 204, 0)");$("#" + id + " #" + spid + ">.checkboxBtn").attr("select", "on");}} else {//若當前節點為off,當前節點的直接父節點為offvar spid = $($("#" + id + " .checkboxBtn")[i]).parent().attr("pid");$("#" + id + " #" + spid + ">.checkboxBtn").css("background-color", "rgb(204, 204, 204)");$("#" + id + " #" + spid + ">.checkboxBtn").attr("select", "off");}}if (count == $("#" + id + " .checkboxBtn[select='off']").length) {break;}}}

?

　　4.2.獲取復選框多選的id列表

?

/*** 獲取樹形控件中已選擇的id列表,備用* @param:id:樹形結構所在的div的id*/function getAllIds0000(id) {var arr = [];var temp = $("#" + id + " .checkboxBtn");for (var i = 0; i < temp.length; i++) {if ($(temp[i]).attr("select") == "on") {var id = $(temp[i]).parent().attr("id");arr.push(id);}}console.log(arr);return arr;}

?

以上！

?

轉載于:https://www.cnblogs.com/liuyuhangCastle/p/9801159.html

總結

以上是生活随笔為你收集整理的我的前端工具集(四)树状结构后篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。