個人前端工具集(四)樹狀結構後篇

個人前端工具集(四)樹狀結構後篇

 

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, //定義當前行div
                        tab, //定義縮進
                        checkbox, //定義checkbox
                        plus; //定義節點
                    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' onclick='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);
                    //獲取已加載的節點的pid
                    var temp = $("#" + id + " .treeDiv");
                    //循環該id
                    for (var i = 0; i < temp.length; i++) {
                        var thisId = $(temp[i]).attr("id");
                        //調用自身加載節點
                        initTree(id, list, thisId, arr, isCheck);
                    }
                } else {
                    $("#" + id + " #" + pid).append(result);
                    //獲取已加載的節點的pid
                    var temp2 = $("#" + id + " #" + pid + " .treeDiv");
                    //循環該id
                    for (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"); //點擊節點的pid
                        var 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,當前節點的直接父節點爲off
                        var 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;
        }

 

以上！