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>勾选关联子集 <input type='checkbox' value='1'/></label></div>" +
           
"<div class='col-xs-6'><label>勾选关联父集 <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" onclick="ZtreePanel.tree({'#searchCaseReason','案由列表', 'checkbox' ,url});">

</div>