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

下面我就为大家分享一篇ztree 树插件实现全国五级地区点击加载的示例,具有很好的参考价值,希望对大家有所帮助。

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

zTree 树插件官网简介

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

zTree 树插件官网地址

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

功能实现代码

数据库地区表基本结构:

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

登录后复制

页面代码:

   

              

    

              

 

  

  

   

        

登录后复制      

           

   

效果:

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

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

登录后复制

实现效果:

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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在jQuery中实现碰到边缘反弹的动画效果该如何做?

在jQuery中实现碰到边缘反弹的动画效果该如何做?

在jQuery中实现碰到边缘反弹的动画效果该如何做?

以上就是在zTree树插件中如何实现全国五级地区点击后加载的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3187222.html

(0)
上一篇 2025年3月31日 23:06:40
下一篇 2025年3月31日 23:06:51

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • UniApp报错:’xxx’模块加载失败的解决方案

    UniApp报错:’xxx’模块加载失败的解决方案 作为一种跨平台开发框架,UniApp在开发过程中提供了丰富的组件和模块供开发者使用。然而,有时候我们可能会遇到’xxx’模块加载失败的报错,…

    2025年5月1日
    000
  • 解决Laravel项目中CSS文件无法加载的问题

    解决Laravel项目中CSS文件无法加载的问题,需要具体代码示例 在开发Laravel项目的过程中,有时候会遇到CSS文件无法加载的问题,这可能会导致页面样式混乱或者无法正常显示页面内容。这个问题通常是由于文件路径配置或者缓存导致的,接下…

    2025年4月2日
    200
  • Vue.js实现无限滚动加载的完整指南

    随着数据量不断增加,网页的滚动加载逐渐成为了用户体验的重要部分。在这篇文章中,我们将讨论如何使用vue.js实现无限滚动加载的完整指南。 什么是无限滚动加载? 无限滚动加载,又称为无限滚动,是一种Web设计技术,用于在用户滚动页面到底部时添…

    编程技术 2025年4月1日
    100
  • Photoshop CS3教程:五一劳动节快乐

    本教程是关于使用Photoshop CS3制作五一劳动节主题海报,主要是渐变工具、钢笔工具、图层样式、图层模式以及笔刷等的应用。祝各位网友五一劳动节快乐!最终效果  1、点击文件—新建(快捷键为Ctrl N),新建一个PSD文件,如图1所示…

    2025年4月1日 编程技术
    100
  • Photoshop入门:动作(Action)安装和使用

     我们前面讲了photoshop入门:绘图类工具的使用、photoshop入门:各种形状工具绘制形状、ps入门:如何使用网上下载的笔刷?等内容,今天我们继续学习photoshop中“动作”(action)如何使用? “动作”(action)…

    2025年4月1日 编程技术
    200
  • PS自由变换工具做酷酷的照片折叠效果

    简介:本例介绍使用PS来打造一款酷酷的照片折叠效果,主要通过给图层做选区、运用自由变换工具、添加阴影完成最终效果~~~最终效果: 1、首先,视图-标尺(ctrl R),鼠标从横竖两个方向的标尺刻度处拖拽出参考线将图片分为三等分2、选择矩形选…

    2025年4月1日 编程技术
    100
  • vue-lazyload – 图片延迟加载实例教程

     usage import Vue from ‘vue’import VueLazyload from ‘vue-lazyload’Vue.use(VueLazyload, {  preLoad: 1.3,  error: ‘dist/er…

    编程技术 2025年4月1日
    100
  • 图片的懒加载问题

    我们在浏览淘宝京东等大型购物网页时会经常出现许多图片而图片需要花费我们非常多的流量问题。 我们在写网页的时候怎么解决这个问题呢?这时候就要用到我们图片懒加载的问题,这样不仅可以 解决流量问题,也提高了性能等等。 下面我们就来看一下图片的懒加…

    编程技术 2025年4月1日
    100
  • 详解关于react native点击事件的实例代码

    比如我们定义一个touchableopacity点击事件,该方法需要接收一个参数值,如下 _gotoSubClass(sectionID, rowID) {    console.log(“sectionID=”+sectionID + “…

    编程技术 2025年4月1日
    100
  • 如何才能更好的减少页面加载时间

    如何才能更好的减少页面加载时间,下面提供了19中方法,仅供参考,感兴趣的朋友们可以来看一下。 1.重复的HTTP请求数量应尽量减少        (1)减少调用其他页面、文件的数量。   (2)精灵图 2. 在文件头部放置css样式的定义 …

    编程技术 2025年4月1日
    200

发表回复

登录后才能评论