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


Posted in Javascript onFebruary 05, 2018

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

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>

效果:

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 树插件实现全国五级地区点击后加载的示例

以上这篇zTree 树插件实现全国五级地区点击后加载的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
JS实现一个简单的日历
Feb 22 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
使用vue如何构建一个自动建站项目
Feb 05 #Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 #Javascript
在Vue中使用echarts的方法
Feb 05 #Javascript
JavaScript中Object基础内部方法图
Feb 05 #Javascript
基于axios封装fetch方法及调用实例
Feb 05 #Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 #Javascript
JS中Map和ForEach的区别
Feb 05 #Javascript
You might like
php pki加密技术(openssl)详解
2013/07/01 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP对象相关知识总结
2017/04/09 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
土建工程师岗位职责
2014/06/10 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python