ztree根據參數動態控制是否顯示複選框/單選框(靜態JSON數據)

• 2020 年 5 月 8 日
• 筆記

本文不再更新，可能存在內容過時的情況，實時更新請訪問原地址：ztree根據參數動態控制是否顯示複選框/單選框(靜態JSON數據)；

現有全省各地區靜態JSON數據，現在想通過Url參數，動態控制是否顯示複選框/單選框，實現方式如下：

 var rootNode, isCascadeSelect = '1';
    var urlParamsJson = urlParams();
    var selType = urlParamsJson.selType, isChkbox = urlParamsJson.isChkbox;

    initTree();

    function initTree() {
        // 用於存儲樹的節點
        var treeNodes = [];

        $.ajax({
            url: area_tree_data,
            async: false,
            dataType: "json",
            type: "GET",
            success: function (result) {
                treeNodes = result;
            }
        });

        // ztree設置
        var treeSetting = {
            data: {
                key: {
                    name: "name"
                },
                simpleData: {
                    enable: true,
                    idKey: "code",
                    pIdKey: "pcode"
                }
            },
            check: {
                enable: selType ? true : false,
                chkStyle: isChkbox == "1" ? "checkbox" : "radio",
                radioType: "all",
                chkboxType: {"Y": isCascadeSelect == "1" ? "s" : "", "N": isCascadeSelect == "1" ? "s" : ""}
            },
            callback: {
                beforeExpand: zTreeBeforeExpand
            }
        };
        // 初始化功能樹
        areaTree = ztree.init($("#area-tree"), treeSetting, treeNodes);
        rootNode = areaTree.getNodes()[0];
        areaTree.expandNode(rootNode, null, null, null, true);
    }

    function zTreeBeforeExpand(treeId, treeNode) {
        if (selType) {
            var selectTypes = selType.split(";");
            if ($.inArray((treeNode.level + 1).toString(), selectTypes) == "-1") {
                treeNode["nocheck"] = true;
                areaTree.updateNode(treeNode);
            }
            $.grep(treeNode.children, function (childNode, index) {
                if ($.inArray((childNode.level + 1).toString(), selectTypes) == "-1") {
                    childNode["nocheck"] = true;
                    areaTree.updateNode(childNode);
                }
            });
        }
    }

頁面調用地址：//localhost:8080/html/portrait/area-tree.html?selType=1;2;3&isChkbox=1。

本文不再更新，可能存在內容過時的情況，實時更新請訪問原地址：ztree根據參數動態控制是否顯示複選框/單選框(靜態JSON數據)；