zTree简单封装

项目中需要多处以树状的形式体现组织结构。zTree是个很好的插件api文档完善。
代码对zTree做了初步封装,节省同事学习时间。

/****
树初始化:$.fn.initTree(treeContentId, initTreeUrl, AsyncUrl)
        treeContentId: 用于展现 zTree 的 DOM 容器ID
        initTreeUrl:初始化树url
        AsyncUrl:异步加载树url
        return:zTree
获取选中节点:$.fn.initTree.getSlectedNode()
        return:treeNode
树节点点击事件回调函数function zTreeOnAsyncSuccess(event, treeId, treeNode)
        treeNode: 被点击的节点 JSON 数据对象
        return:null
树异步加载成功回调函数function zTreeOnAsyncSuccess(event, treeId, treeNode, msg)
        treeNode: 进行异步加载的父节点 JSON 数据对象
        msg:异步获取的节点数据,主要便于用户调试使用   
        return:null
 ****/
(function ($) {
    var zTree;
    $.fn.initTree = function (treeContentId, initTreeUrl, AsyncUrl) {
        var setting = {
            async : {
                enable : true,
                url : getUrl,
                type : "post",
                dataType : "json",
                contentType : "application/x-www-form-urlencoded;charset=UTF-8",
                autoParam : ["areaid"],
                dataFilter : filter,
            },
            view : {
                selectedMulti : false,
                showIcon : false
            },
            check : {
                enable : false,
                chkStyle : "checkbox",
                chkboxType : {
                    "Y" : "s",
                    "N" : "s"
                }
            },
            data : {
                key : {
                    name : "name"
                },
                simpleData : {
                    enable : true,
                    pIdKey : "pid",
                    idKey : "areaid"
                }
            },
            edit : {
                drag : {
                    isCopy : false,
                    isMove : false
                },
                enable : true,
                editNameSelectAll : true,
                showRemoveBtn : false,
                showRenameBtn : false
            },
            callback : {
                onClick : zTreeonClickEvent,
                onAsyncSuccess : zTreeOnAsyncSuccessEvent
            }
        };

        function getUrl(treeId, treeNode) {
            if (treeNode == undefined) {
                return initTreeUrl;
            } else {
                return AsyncUrl;
            }
        }
        function filter(treeId, parentNode, childNodes) {
            if (parentNode == undefined) {
                if (childNodes.data.pid == undefined) { //无pid,加载企业树,只有一级
                    var data = childNodes.data;
                    var treedata = [{
                            "id" : "-1",
                            "pId" : "-2",
                            "name" : "全部",
                            open : true
                        }
                    ];
                    data = $.makeArray(data);
                    $.each(data, function (index, item) {
                        item.pId = -1;
                        item.isParent = false;
                        treedata.push(item);
                    });
                } else {                                //有pid,加载区域树,有多级
                    var treedata = childNodes.data;
                    treedata = $.makeArray(treedata);
                    $.each(treedata, function (index, item) {
                        item.open = true;
                        item.isParent = true;
                    });
                }
            } else {
                var treedata = childNodes.data.rows;
                treedata = $.makeArray(treedata);
                $.each(treedata, function (index, item) {
                    item.isParent = true;
                });
            }
            return treedata;
        }

        $.fn.zTree.init($("#" + treeContentId), setting);
        zTree = $.fn.zTree.getZTreeObj(treeContentId);
        return zTree;
    };

    function zTreeonClickEvent(e, treeId, treeNode) {
        try {
            zTreeonClick(e, treeId, treeNode);
        } catch (e) {
            return;
        }
        return;
    }

    function zTreeOnAsyncSuccessEvent(event, treeId, treeNode, msg) {
        try {
            zTreeOnAsyncSuccess(event, treeId, treeNode, msg);
        } catch (e) {
            return;
        }
        return;
    }

    /*获取一个选中区域数据*/
    $.fn.initTree.getSlectedNode = function () {
        var nodes = zTree.getSelectedNodes();
        var treeNode = nodes[0]; //点击文本选中,优先级低
        if (nodes.length > 1) {
            layer.alert("请选择一个区域");
            return false;
        }
        if (nodes.length == 0) {
            layer.alert("请选择区域");
            return false;
        }
        if (nodes.length == 1) {
            return treeNode;
        }
    }

})(jQuery);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值