zTree 树插件实现全国五级地区点击后加载

在项目功能中需要录入户籍地和现居住地，为减少用户输入量，将使用树插件选择全国五级地区+输入框输入详细地址。这里优先使用了zTree树插件。为了以后使用学习，在这里进行相关记录。当然在实现过程中参考各大神的文章是必不可少的，可以结合了自己的实际需求进行快速解决问题。
本篇实现太过复杂，可看此篇：http://blog.csdn.net/li_ya_fei/article/details/79305414

zTree 树插件官网简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

zTree 树插件官网地址

http://www.treejs.cn/v3/main.php#_zTreeInfo

功能实现代码

数据库地区表基本结构：

regionType 地区级别
path 地区编码
name 地区名称
parentRegion 上级地区

页面代码：

<!-- 户籍地、现居住地 -->
<tr>
    <td colspan="3">
        <div class="form-group">
            <label style="display: block;">户籍地</label>
            <input type="hidden" name="domiciliary" id="domiciliary">
            <input type="text" class="form-control" style="width:300px;float:left;" id="domiciliary-text" value="" onclick="showRegion('domiciliary')" placeholder="点击选择地区" maxlength="20" readonly="readonly">
            <input type="text" class="form-control" style="width:320px;float:left;" name="domiciliaryAddress" value="" placeholder="详细地址" maxlength="100">
        </div>
    </td>
</tr>
<tr>
    <td colspan="3">
        <div class="form-group">
            <label style="display: block;">现居住地址</label>
            <input type="hidden" name="bide" id="bide">
            <input type="text" class="form-control" style="width:300px;float:left;" id="bide-text" value="" onclick="showRegion('bide')" placeholder="点击选择地区" maxlength="20" readonly="readonly">
            <input type="text" class="form-control" style="width:320px;float:left;" name="bideAddress" value="" placeholder="详细地址" maxlength="100">
        </div>
    </td>
</tr>

<!-- bootstrap 模态框（Modal） -->
<div class="modal fade" id="regionModal" tabindex="-1" role="dialog" aria-hidden="true">
    <input type="hidden" id="regionModalType" />
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <!-- zTree 的容器 -->
                <ul id="treeRegion" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="confimRegion()">确认</button>
            </div>
        </div>
    </div>
</div>

效果：

js代码：

$(document).ready(function() {
    // zTree 参数配置
    var setting = {
        view: {
            showIcon: false,//是否显示节点的图标
            selectedMulti: false //设置是否允许同时选中多个节点。默认值: true。
        },
        data: {
            simpleData: {
                enable: true, //是否采用简单数据模式 (Array)。默认值：false
                idKey: "path", //节点数据中保存唯一标识的属性名称。
                pIdKey: "parentRegion", //节点数据中保存其父节点唯一标识的属性名称。
                rootPid: "10000000000000" //用于修正根节点父节点数据，即 pIdKey 指定的属性值。
            }
        },
        callback: {
            // 用于捕获节点被点击的事件回调函数
            onClick: function(event, treeId, treeNode, clickFlag) {
                var treeObj = $.fn.zTree.getZTreeObj(treeId); //根据 treeId 获取 zTree 对象
                // 这里判断节点被点击时，如果有已经加载下级节点，则不用请求服务器
                if((treeNode.children == null || treeNode.children == "undefined")){
                    if(!$("#"+treeNode.tId+"_switch").hasClass("center_docu") && !$("#"+treeNode.tId+"_switch").hasClass("bottom_docu")){
                        // 请求服务器，获得点击地区的下级地区
                        $.ajax({
                            type: "get",
                            async: false,
                            url: "tRegion/ajaxArea",
                            data:{
                                path:treeNode.path
                            },
                            dataType:"json",
                            success: function(data){
                                if(data != null && data.length != 0){
                                    //添加新节点
                                    var newNodes = treeObj.addNodes(treeNode, data);
                                    $(newNodes).each(function(i,n){
                                        var id = n.tId+"_switch";
                                        if($("#"+id).hasClass("center_docu")){
                                            $("#"+id).removeClass("center_docu");
                                            $("#"+id).addClass("center_close");
                                        }
                                        if($("#"+id).hasClass("bottom_docu")){
                                            $("#"+id).removeClass("bottom_docu");
                                            $("#"+id).addClass("bottom_close");
                                        }
                                    });
                                }else{
                                    var id = treeNode.tId+"_switch";
                                    if($("#"+id).hasClass("center_close")){
                                        $("#"+id).removeClass("center_close");
                                        $("#"+id).addClass("center_docu");
                                    }
                                    if($("#"+id).hasClass("bottom_close")){
                                            $("#"+id).removeClass("bottom_close");
                                            $("#"+id).addClass("bottom_docu");
                                        }

                                }
                            },
                            error:function(event, XMLHttpRequest, ajaxOptions, thrownError){
                                result = true;
                                toastr.error("请求失败!");
                            }
                        });
                    }
                }else{
                    // 展开当前节点
                    treeObj.expandNode(treeNode);
                }
            }
          }
       };

    // 显示区域树，加载顶级节点
    $.ajax({
        type: "get",
        url: "tRegion/ajaxArea",
        data: {path:"10000000000000"},
        success: function(data, status) {
            if (status == "success") {
                // 初始化区域树
                $.fn.zTree.init($("#treeRegion"), setting, data);
                // 获得zTree对象
                var treeObj = $.fn.zTree.getZTreeObj("treeRegion");
                // 获得初始化的所有节点，即顶级节点
                var nodes = treeObj.getNodes();

                $(nodes).each(function(i,n){
                    var id = n.tId+"_switch";
                    if($("#"+id).hasClass("roots_docu")){
                        $("#"+id).removeClass("roots_docu");
                        $("#"+id).addClass("roots_close");
                    }
                    if($("#"+id).hasClass("center_docu")){
                        $("#"+id).removeClass("center_docu");
                        $("#"+id).addClass("center_close");
                    }
                    if($("#"+id).hasClass("bottom_docu")){
                        $("#"+id).removeClass("bottom_docu");
                        $("#"+id).addClass("bottom_close");
                    }
                });
            }
        },
        error : function() {
            toastr.error('Error');
        },
    });
});

function showRegion(type){
    // 显示模态框
    $('#regionModal').modal('show');
    $("#regionModalType").val(type);
}

// 选择地区确认
function confimRegion(){
    var type = $("#regionModalType").val();
    var treeObj = $.fn.zTree.getZTreeObj("treeRegion");
    var node = treeObj.getSelectedNodes(); //选中节点
    var regionType = node[0].regionType;
    if(Number(regionType) >= 5){
        $("#"+type+"-text").val(node[0].name);
        $("#"+type).val(node[0].path);
        $('#regionModal').modal('hide');
    }
}

实现效果：