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

深藏阁楼爱情的钟 2024-02-18 17:56 56阅读 0赞

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

##### zTree 树插件官网简介 #####

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

##### zTree 树插件官网地址 #####

[http://www.treejs.cn/v3/main.php\#\_zTreeInfo][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>
    
    
    <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">
                    
                    <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>

效果：  
![户籍地、现居住地址][SouthEast]  
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');
        }
    }

实现效果：  
![菜单树实现效果][SouthEast 1]

[http_blog.csdn.net_li_ya_fei_article_details_79305414]: http://blog.csdn.net/li_ya_fei/article/details/79305414
[http_www.treejs.cn_v3_main.php_zTreeInfo]: http://www.treejs.cn/v3/main.php#_zTreeInfo
[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d293afb6830240fea42ce7f9744723c9.png
[SouthEast 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/58ab987b3eab4d25a42ff18f94947b2c.png