ztree插件封装

这个是一个基于ztree插件封装的可以直接调用的插件，所用框架为：jquery、bootstrap，插件封装源码为：

;

$(function () {
    window.ZtreePanel = function () {
        var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
        // 参数配置
        var config = {
            depositNameArray: [],//记录选中节点的名称；
            depositIdArray: [] //记录选中节点的Id号；
        };
        // ztree复选的配置
        var settingCheckBox = {
            check: {enable: true, chkStyle: 'checkbox'},
            view: {dblClickExpand: true, showLine: true, txtSelectedEnable: false
            },
            data: {simpleData: {enable: true, idKey: "id", pIdKey: "pId", rootPId: ""}},
            // 回调事件
            callback: {
                beforeClick: function () {
                    return false;
                }
            }
        };
        // ztree单选配置
        var settingRadio = {
            check: {
                enable: false//不显示勾选框
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false,     // 不支持 同时选中多个节点
                autoCancelSelected: false  //不支持 配合 Ctrl 或 Cmd 键进行取消节点选择的操作
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            }
        };
        // jquery对象的面板代码
        var getHtml = function () {
            var Html;
            $.ajax({
                url: "ztreepanel.html",
                async: false,
                dataType: "html",
                cache: true,//使用缓存，从缓存中获取
                success: function (data) {
                    Html = data;
                }
            });
            return Html;
        };


        /**
         * 主要的树形结构
         * @param obj 传入的主调函数
         */
        var _showBoxSearch = function (obj) {
            /*默认的参数信息*/
            var defaultParams = {
                target: '',
                titleName: '部门列表',
                flag: 'checkbox',
                searchData: {},
                showUser: false, //只选择用户的条件
                caseReason: false, //案由选择叶子节点
                success: null ,
                initFilterData:{},
                expand: true //默认要展开全部，为false不展开
            };
            //将用户配置的参数和自己传入的参数进行交换
            var obj = $.extend(defaultParams, obj);
            //转换成jquery对象
            var treeHtml = $(getHtml());
            /*替换模板dom结构里面的内容*/
            var html = treeHtml.html().replace(reg, function (node, key) {
                return {Title: defaultParams.titleName}[key];
            });
            treeHtml.html(html);
            // 判断ztree复选的配置的对于父子节点的关联关系
            if (obj.flag === "checkbox") {
                settingCheckBox.check.chkboxType = {"Y":'', "N": ''}
            }
            // 数据加载的区域
            var searchTree = treeHtml.find("#zTree");
            //按钮注册事件
            setBtnMethod(searchTree, treeHtml, obj);
            var dataList = getDataInit(obj);
            if (obj.showUser) {
                changeUserIcon(dataList);
            }
            $.fn.zTree.init(searchTree, obj.flag == "checkbox" ? settingCheckBox : settingRadio, dataList);
            //将树形列表插入到body中
            $(document.body).append(treeHtml);
            //设置树形结构的初始化状态
            defaultSelect(obj);
            // 将生成的checkbox面板追加到页面中
            if ($("#modal-bg").attr("class") === "modal-bg modal-backdrop fade in") {
                $("#modal-bg").css({"z-index": "3100"});
            } else {
                $("#modal-bg").addClass("modal-backdrop fade in");// 模态
            }
            //下面控制勾选的状态， 防止回显数据乱勾选
            var treeObj = $.fn.zTree.getZTreeObj("zTree");
            var type = {"Y": obj.Y, "N": obj.N};
            if(obj.Y && obj.N){
            treeObj.setting.check.chkboxType = type;
            }
            // 初始化查询出来的数据，第一次加载进来
            if(obj.flag === "checkbox"){
            //事件委托
                checkSetting(treeObj, treeHtml);
            }else{
            treeHtml.find('[data-toggle="popover"]').remove();
            treeHtml.find('input[type=text]').css("width", "285px");
            }
        };
        
        var checkSetting = function(treeObj, treeHtml){
        var popHtml = $("<div class='row ztreePanelPop'>" +
            "<div class='col-xs-6'><label>勾选关联子集&nbsp;<input type='checkbox' value='1'/></label></div>" +
            "<div class='col-xs-6'><label>勾选关联父集&nbsp;<input type='checkbox' value='2'/></label></div>" +
"</div>");
        //提示弹框面板,用户设置勾选方式
            treeHtml.find("[data-toggle=popover]").popover({
            html: true,
            content: popHtml,
            title:'勾选设置',
            trigger:'click',
            placement:'left'
            });
        //使用事件代理
            $(".dialog-tree").delegate("input[type=checkbox]","click", function(){
            var Ys = '',Yp = '',Ns = '',Np = '',valType;
            var $val = $(".ztreePanelPop").find(":checkbox:checked");
            if($val.length === 0){
            valType = {"Y": '' ,"N": ''};
            }
            $.each($val, function(index, value){
            var val = $(this).val();
            switch (val) {
case "1": Ns = 's';Ys = 's'; break;
default: Yp = 'p'; Np = 'p'; break;
}
            //拼接设置
            valType = {"Y": Yp + Ys ,"N": Np + Ns};
            });
            treeObj.setting.check.chkboxType = valType;
            });
        };
        
        /**
         * 设置树形结构的初始化状态开始
         *
         * @param obj 显示的对象
         */
        var defaultSelect = function (obj) {
            var treeObj = $.fn.zTree.getZTreeObj("zTree");
            var nodes = $(obj.target).find(".searchKeyId").val();
            //初始化选中节点
            if (nodes) {
                var nodesArr = nodes.split(",");
                var selectNode;
                for (var i = 0; i < nodesArr.length; i++) {
                    selectNode = treeObj.getNodeByParam("id", nodesArr[i]);
                    if ("radio" === obj.flag) {
                        //treeObj.selectNode(selectNode);//单选框设置为选中文本；//单选框不设置选中，这样才可以清空文本框
                    } else {
                        treeObj.checkNode(selectNode, true, true);//复选框设置为选中勾选框；
                    }
                }
            }
            if(obj.expand){
            // 展开所有的节点
                treeObj.expandAll(true);
            }
        };


        /**
         * 注册按钮的事件
         *
         * @param searchTree 搜索关键节点
         * @param treedom 树形dom结构
         * @param obj 对象
         */
        var setBtnMethod = function (searchTree, treedom, obj) {
            // 注册搜索按钮的事件
            treedom.find(".info-search").on("click", function () {
                var keySearch = treedom.find("input[name=keySearch]").val();
                //对于默认的参数进行追加
                obj.searchData.name = keySearch;
                var searchKeyObject = $.extend(obj.searchData, obj.initFilterData);
                getListDataSearch(searchTree, obj.flag == "checkbox" ? settingCheckBox : settingRadio, obj.searchData, obj.url);
            });
            // 注册提交按钮的事件
            treedom.find(".btn-primary").on("click", function () {
                submitBtn(obj.target, this, obj);
            });
        };


        /**
         * 搜索框输入信息后进行树形菜单重新加载
         *
         * @param searchTree 数据加载的区域
         * @param setting 参数配置
         * @param keySearch 收缩关键字
         * @param url 搜索的url
         */
        var getListDataSearch = function (searchTree, setting, keySearch, url) {
            $.fn.zTree.init(searchTree, setting, getSearchListData(keySearch, url));
        };


        /**
         * 搜索数据的显示
         *
         * @param keySearch 搜索关键字
         * @param url 收缩的url地址
         * @returns 返回得到的json数据
         */
        var getSearchListData = function (keySearch, url) {
            var result;
            $.ajax({
                url: url,
                dataType: 'json',
                type: "POST",
                data: keySearch,
                async: false,
                cache: true,
                success: function (json) {
                    result = json['data']
                }
            });
            return result;
        };


        /**
         * 初始化数据
         * @param url 请求的url地址
         * @returns {*} 返回请求成功的数据
         */
        var getDataInit = function (obj) {
            var result;
            $.ajax({
                url: obj.url,
                dataType: 'json',
                type: "POST",
                data: obj.initFilterData ,
                cache: true,
                async: false,
                success: function (json) {
                    result = json['data']
                }
            });
            return result;
        };


        /**
         * 更改用户的图标
         * @param zNodes
         */
        var changeUserIcon = function (zNodes) {
            if (zNodes) {
                $.each(zNodes, function (index, value) {
                    var $person = value;
                    //更换图标
                    if ($person["type"] === 3) {
                        $person["iconSkin"] = "usericon";
                    }
                    $person.chkDisabled = false;
                });
            }
        };


        /**
         * 点击确定填充值
         */
        var printValue = function(obj){
        var tree = $.fn.zTree.getZTreeObj("zTree");
        var nodes =  (obj.flag === "checkbox") ? tree.getCheckedNodes(true) : tree.getSelectedNodes();
            //每次初始化选中的节点
            config.depositNameArray.length = 0;
            config.depositIdArray.length = 0;
            if ((null !== nodes) && (nodes.length > 0)) {
            if (obj.flag === "checkbox") {
            for (var i = 0; i < nodes.length; i++) {
                        inConditionSelect(obj, nodes[i]);
                    }
                } else {
                inConditionSelect(obj, nodes[nodes.length - 1]);
                }
            }
        };
        
        /**
         * 根据业务选择不同的节点
         * 可扩展
         */
        var inConditionSelect = function(obj, node){
        //用于用户绑定  选择用户
        if (obj.showUser) {
        if (!((!node.children) && (node.type === 3))) {
                    return false;
                }
        //案由选择  案件-案由-选择根节点
       } else if (obj.caseReason){
        if (!((!node.children) && (node.end === 0))) {
        return false;
                }
       }
        config.depositNameArray.push(node.name);
            config.depositIdArray.push(node.id);
        };
        


        /**
         * 提交按钮向表单填值
         *
         * @param target 关闭选择框
         * @param arr 上下文ID
         * @param flag 是复选框还是单选框
         * @param success 回调函数
         */
        var submitBtn = function (target, arr, obj) {
            //获取选中的节点信息
            printValue(obj);
            //填写数据信息
            $(target).find(".searchKeyName").val(config.depositNameArray.join(","));
            $(target).find(".searchKeyId").val(config.depositIdArray.join(","));
            //回调函数
            if (obj.success instanceof Function) {
                obj.success.apply(this, [config.depositNameArray, config.depositIdArray]);
            }
            //显示的样式处理
            if ($("#modal-bg").attr("style")) {
                $("#modal-bg").removeAttr("style");
                $(arr).parents(".panel").remove();
            } else {
                toolMethod.closePanel(arr, true, true);
            }
        };
        return {
            tree: _showBoxSearch
        }
    }();

});

ztreepanel.html：模板代码为（bootstrap框架）

调用方式为：

ZtreePanel.tree({
            target: target, //节点id或者class，如#content
            titleName: title, //展示的panel名称
            flag: flag, //单选还是多选框，'radio'或者'checkbox'
            url: url, //请求后台数据地址
            success : function(name, nodeId) { // name,id} //树形勾选节点成功后的回调函数
        });

其中，target这个节点是用于放置树形选择器选择完毕后勾选的值和隐藏id；参数target和url必选，其余参数选用。

html书写方式为：

<div id="content">
            <label>名称</label>
            <input type="text" class="searchKeyNam">  <-- 隐藏域  放置节点名称-->
            <input type="text" class=" hidden searchKeyId">  <-- 隐藏域  放置id-->
   <button class="btn btn-info" id="" type="button" οnclick="ZtreePanel.tree({'#searchCaseReason','案由列表', 'checkbox' ,url});">

</div>