zTree

官网

一、html略过

二、js部分，是放在单独的js中的

/**
 * 1、可以根据关键字搜索树节点，高亮显示搜索结果
 * 2、checkbox
 * @param treeId 前端树id
 * @param url 查询所有数据的接口
 *        {"name":"阿坝藏族羌族自治州","pId":"1156510000","id":"1156513200"}
 * @param areaStr，用于回显，存到db中已选择的数据，用逗号分隔： ‘1156510000,1156510000，1156510000’
 */
function initTree(treeId, url, areaStr) {
    var key;// 搜索关键字所在的input
    var setting = {
        check: {
            enable: true,
            chkboxType: {"Y": "ps", "N": "ps"},
            chkStyle: "checkbox"
        },
        view: {
            showIcon: false,
            fontCss: getFontCss
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: zTreeCheck2,
            onClick: zTreeClick
        }
    };

    //节点点击事件
    function zTreeClick(e, tree, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        var temp = zTree.getNodeByParam("id", treeNode.id, null);
        var checked = treeNode.checked ? false : true;
        zTree.checkNode(temp, checked, true, false);
    }

    //节点复选框事件
    function zTreeCheck2(e, tree, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        var temp = zTree.getNodeByParam("id", treeNode.id, null);
        var checked = treeNode.checked;
        zTree.checkNode(temp, checked, true, false);
    }


    //ztree数据初始化
    function zTreeInit() {
        if (!areaStr) {
            return false;
        }
        var tags_temp = areaStr.split(",");
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        for (var i = 0; i < tags_temp.length; i++) {
            var temp = zTree.getNodeByParam('id', tags_temp[i].trim(), null);
            if (temp) {
                zTree.checkNode(temp, true, false, false);
            }
        }
    }

    // ----搜索相关类-----
    var lastValue = "", nodeList = [], fontCss = {};

    function focusKey(e) {
        if (key.hasClass("empty")) {
            key.removeClass("empty");
        }
    }

    function blurKey(e) {
        if (key.get(0).value === "") {
            key.addClass("empty");
        }
        searchNode();
    }

    function getFontCss(treeId, treeNode) {
        return (!!treeNode.highlight) ? {color: "#A60000", "font-weight": "bold"} : {
            color: "#333",
            "font-weight": "normal"
        };
    }

    function searchNode(e) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        var value = $("#searchCity").val();// 搜索的值

        if (key.hasClass("empty")) {
            value = "";
        }
        if (lastValue === value) return;
        lastValue = value;
        if (value === "") return;
        updateNodes(false);
        nodeList = zTree.getNodesByParamFuzzy("name", value);// 按名字搜索，可以按level搜索，也可以按id搜索，这里固定值，按name搜索
        updateNodes(true);

        if (nodeList.length > 0) {
            zTree.selectNode(nodeList[0]);
        }
    }

    function updateNodes(highlight) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        for (var i = 0, l = nodeList.length; i < l; i++) {
            nodeList[i].highlight = highlight;
            zTree.updateNode(nodeList[i]);
        }
    }

    function filter(node) {
        return !node.isParent && node.isFirstNode;
    }

    /**
     * 异步加载数据，可以用ztree的异步功能，我就直接用了一个ajax,看起来不是很好
     */
    $.ajax({
        url: url,
        dataType: 'json',
        success: function (data) {
            $.fn.zTree.init($("#" + treeId), setting, data);
            zTreeInit();
            key = $("#searchCity");
            key.bind("focus", focusKey)
                .bind("blur", blurKey)
                .bind("change", searchNode)
                .bind("keyup", function () {
                    if (event.keyCode == "13") {
                        searchNode();
                    }
                });
        }
    });
}

三、遇到的小bug

bug1、半选状态下，只有黑框没有对勾，只有在首次加载的时候，再次对其子对象操作，就有了对勾

解决：先给它的父对象加个对勾，再给所选的子对象画对勾

// 子结点
// 设置该子结点的父结点半选状态
zTree.checkNode(temp.getParentNode(), true, false);
zTree.checkNode(temp, true, false);