zTree树插件如何实现全国五级地区点击后加载-创新互联

这篇文章主要为大家展示了“zTree树插件如何实现全国五级地区点击后加载”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“zTree树插件如何实现全国五级地区点击后加载”这篇文章吧。

我们提供的服务有：做网站、成都做网站、微信公众号开发、网站优化、网站认证、马山ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的马山网站制作公司

zTree 树插件官网简介

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

zTree 树插件官网地址

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

功能实现代码

数据库地区表基本结构：

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

页面代码：



 
  
   户籍地

现居住地址

$(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'); } }

大橙子网站建设，新征程启航

zTree树插件如何实现全国五级地区点击后加载-创新互联

其他资讯