在项目功能中需要录入户籍地和现居住地，为减少用户输入量，将使用树插件选择全国五级地区+输入框输入详细地址。这里优先使用了zTree树插件。为了以后使用学习，在这里进行相关记录。当然在实现过程中参考各大神的文章是必不可少的，可以结合了自己的实际需求进行快速解决问题。
zTree 树插件官网简介
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree 树插件官网地址
#_zTreeInfo
功能实现代码
数据库地区表基本结构：
regionType 地区级别 path 地区编码 name 地区名称 parentRegion 上级地区
页面代码：
<!-- 户籍地、现居住地 --> <tr> <td colspan="3"> <div> <label>户籍地</label> <input type="hidden"> <input type="text" value="" placeholder="点击选择地区" maxlength="20" readonly="readonly"> <input type="text" value="" placeholder="详细地址" maxlength="100"> </div> </td> </tr> <tr> <td colspan="3"> <div> <label>现居住地址</label> <input type="hidden"> <input type="text" value="" placeholder="点击选择地区" maxlength="20" readonly="readonly"> <input type="text" value="" placeholder="详细地址" maxlength="100"> </div> </td> </tr> <!-- bootstrap 模态框（Modal） --> <div tabindex="-1" role="dialog" aria-hidden="true"> <input type="hidden" /> <div> <div> <div> <!-- zTree 的容器 --> <ul></ul> </div> <div> <button type="button" data-dismiss="modal">取消</button> <button type="button">确认</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'); } }
实现效果：
