個人前端工具集(九)樹工具從新封裝和修改

時間 2019-11-17

標籤個人前端工具從新封裝修改欄目軟件設計简体版

原文原文鏈接

個人前端工具集(九)樹工具從新封裝和修改css

liuyuhang原創，未經容許禁止轉載html

目錄前端

個人前端工具集json

上文鏈接數組

個人前端工具集(四)樹狀結構前偏app

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

一、以前對樹狀結構工具備必定的整理，目前針對樹狀結構又有必定的更新，同時增長了一些新功能函數

　　樹狀結構的搜索並選中功能工具

　　加載樹狀結構後的回調功能（雖然效率不高，不過感受不出來）post

　　將全部的函數進行了一下抽取和封裝(不喜歡json格式的參數)

二、css基本上沒有什麼變化

三、js代碼以下：

 * 本函數包括如下內容:
 * 1.加載樹控件函數
 * 2.樹控件多選函數
 * 3.獲取多選的id列表函數
 * 4.搜索當前樹的指定list的內容並點亮checkbox

/**
 * 本函數包括如下內容:
 * 1.加載樹控件函數
 * 2.樹控件多選函數
 * 3.獲取多選的id列表函數
 * 4.搜索當前樹的指定list的內容並點亮checkbox
 * @author Liuyuhang at 2018 in tit-group
 */

/**
 * 獲取樹形控件中已選擇的id列表,備用
 * @param:id:樹形結構所在的div的id
 * @see:initTree(id, list, pid, arr, isCheck, callBack)
 * @see:selectChange(id, listId)
 * @see:searchTree(inputId, dataList, searchArr, treeId, countId)
 * @return:arr,獲取複選框選擇的id的數組
 */
function getAllIds(id) {
    var arr = [];
    var temp = $("#" + id + " .checkboxBtn");
    if (temp.length > 0) {
        for (var i = 0; i < temp.length; i++) {
            if ($(temp[i]).attr("select") == "on") {
                var id = $(temp[i]).parent().attr("id");
                arr.push(id);
            }
        }
    }
    return arr;
}


/**
 * list構成
 * [{id:id,pid:pid,param1:param1,param2:param2,...},...]
 * @param:id:目標div的id
 * @param:list:樹形結構的json,構成如上
 * @param:arr:要從list中遍歷出來做爲一行的順次元素數組.arr[i]將做爲其class之一
 * @param:isCheckbox:是否添加層級複選框
 * @param:pid:頂級pid,初始化使用0
 * @param:callBack:要回調的函數的函數名和參數
 * @see:selectChange(id, listId)
 * @see:getAllIds(id)
 * @see:searchTree(inputId, dataList, searchArr, treeId, countId)
 */
function initTree(id, list, pid, arr, isCheck, callBack) {
    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 id='span-right-" + list[i].id + "'>+</span>"
                    //+"<span id='span-down-" + list[i].id + "'>-</span>"
                    + "</span></button>";
                var others = "<button type='button' class='btn btn-default btn-xs other'>";
                for (var j = 0; j < arr.length; j++) {
                    var tempSub = list[i][arr[j]];
                    if (tempSub.length > 45) {
                        tempSub = tempSub.toString().substr(0, 45) + "...";
                    }
                    others = others + "<span style='padding:5px;' class='" + arr[j] + "'>" + tempSub + "</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); //從新加載tree子節點
            eval(callBack); //回調
        });
        $("#" + 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();
    }
    eval(callBack); //回調
}

/**
 * 點擊複選框的函數 
 * @param:id:目標div的id
 * @param:listId:被點擊的複選框所屬的數據中的id標識
 * @see:initTree(id, list, pid, arr, isCheck, callBack)
 * @see:getAllIds0000(id)
 * @see:searchTree(inputId, dataList, searchArr, treeId, countId)
 */
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;
        }
    }
}

/**
 * 單詞搜索樹結構並點亮複選框的函數
 * @param:inputId:搜索內容來源的input的id
 * @param:dataList:要搜索的list數據
 * @param:searchArr:該list內要搜索的value對應的key
 * @param:treeId:要操做的樹結構div的id
 * @return:result:搜索結果的id列表
 * @see:initTree(id, list, pid, arr, isCheck, callBack)
 * @see:selectChange(id, listId)
 * @see:getAllIds(id)
 */
function searchTree(inputId, dataList, searchArr, treeId) {
    var temp = $("#" + inputId).val(); //獲取input的內容
    var list = dataList;
    var length = list.length;
    var idsArr = [];
    if ('' != temp && null != temp && 'undefinded' != typeof temp) {
        for (var i = 0; i < length; i++) { //dataList遍歷
            for (var key in list[i]) { //dataList中的元素的map遍歷
                for (var k = 0; k < searchArr.length; k++) { //遍歷搜索結構
                    if (searchArr[k] == key && list[i][key].toString().indexOf(temp) != -1) {
                        idsArr.push({
                            id : list[i].id,
                            pid : list[i].pid,
                            info : list[i],
                        });
                        break;
                    }
                }
            }
        }
    }
    var result = flashArrPid(idsArr); //去除父id子id重複元素

    SearchCheckLight(result); //點亮已選
    return result; //返回搜索結果
    //======================
    /**
     * 搜索內部函數,去除父id已選子id重複選擇的元素,保留父id元素
     */
    function flashArrPid(idsArr) {
        var arr = idsArr;
        var result = []; //定義結果集
        var length = idsArr.length;
        //作id和pid對比
        for (var i = 0; i < length; i++) {
            var flag = true;
            for (var j = 0; j < length; j++) {
                if (arr[i].pid == arr[j].id) {
                    flag = false;
                    break;
                }
            }
            if (flag == true) {
                result.push(arr[i])
            }
        }
        result = unique(result);
        return result;
    } //end of flashArrPid
    /**
     * 數組去重複函數
     */
    function unique(arr) {
        var result = [];
        for (var i = 0; i < arr.length; i++) {
            var flag = true;
            for (var j = 0; j < result.length; j++) {
                if (arr[i].id == result[j].id) {//依靠該object內的id來判斷是否重複
                    flag = false;
                    break;
                }
            }
            if (flag == true) {
                result.push(arr[i])
            }
        }
        return result;
    }
    /**
     * 搜索內部函數,將所選的id設置爲已選擇
     */
    function SearchCheckLight(idsArr) {
        var length = idsArr.length
        for (var i = 0; i < length; i++) {
            var id = idsArr[i].id;
            selectChange(treeId, id); //調用selectChange點亮節點checkbox
        }
    } //end of SearchCheck
}
//end of searchAsset

四、個人調用方式和回調監聽等

html

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=";padding-left:15px">
        <h4>查看資產</h4>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=";padding:2px">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="input-group" style=";margin-top:5px">
                <input id="searchInput" type="text" class="form-control" style="height:24px" placeholder="按回車鍵即執行資產篩選..."> <span class="input-group-btn">
                    <button id="searchButton" class="btn btn-default" type="button" onclick="searchAsset()" style="margin-left:5px;padding:1px 5px 1px 5px">
                        <span class="glyphicon glyphicon-search" style="color: black;margin-right:3px"></span> 篩選
                    </button>
                    <button class="btn btn-info" type="button" onclick="resetSearchInput()" style="margin-left:5px;padding:1px 5px 1px 5px">
                        <span class="glyphicon glyphicon-retweet" style="color: white;margin-right:3px" ></span> 重置
                    </button>
                </span>
            </div>
        </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding:5px 0px 5px 15px">
            當前已選擇&nbsp;<span id="chooseCount">0</span>&nbsp;個資產
        </div>

        <!-- hr -->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hr" style="border-top-style:solid;width:95%;border-width:1px;border-color:#e6e6e6;margin:8px;margin-left:8%"></div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 stripe" id="assetShowTree">
            <h4>資產列表加載中...</h4>
        </div>
    </div>

一些js

    $(function() {
        getAssetShowAll(); //加載資產樹形結構
        listenerEnterPress4Search(); //搜索框監聽
        listenerAssetChooseCount(); //選擇資產數量監聽
    })
    /**
     * 鍵盤監聽回車事件綁定搜索框點擊功能
     */
    function listenerEnterPress4Search() {
        $('#searchInput').bind('keyup', function(event) {
            var theEvent = event || window.event;
            var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                //回車執行查詢
                $("#searchButton").click();
            }
        });
    }

    /**
     * 已選擇資產總數監聽函數
     */
    function listenerAssetChooseCount() {
        $("#assetShowTree").click(function() {
            checkboxChange("assetShowTree")
        })
    }
    /**
     * checkbox變化時執行的函數
     * 獲取id列表並推送給bottom窗口
     * 獲取id列表數量並顯示在#chooseCount元素中
     */
    function checkboxChange(id) {
        var arr = getAllIds(id);
        var chooseCount = arr.length; //顯示已選擇的總數
        sketchup.sendJs(3, "getAssetIds('" + arr + "');"); //推所選的id列表內容給bottom窗口
        $("#chooseCount").html(chooseCount);
    }
    /**
     * 搜素框和回車鍵監聽調用搜索當前資產樹,並複選函數
     */
    function searchAsset() {
        var arr = [ "assetName", "assetDesc", "assetCode", "assetTypeName", "assetTypeDesc", "fixStatusShow", "inspecteStatusShow" ]
        searchTree("searchInput", window.assetShowList, arr, "assetShowTree", "chooseCount"); //搜索並點亮複選框
        checkboxChange("assetShowTree") //展現搜索數量並推送
    }

......

$("#assetShowTree").html(""); //刪除原有樹控件
            initTree("assetShowTree", list, 0, [ "assetName" ], true, "assetClickOperationListener('assetShowTree')");

......

    function resetSearchInput() {
        $("#searchInput").val("");
    }