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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
Vue实现选择城市功能
May 27 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
vue路由跳转传递参数的方式总结
May 10 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 正则匹配函数体
2009/08/25 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
许愿墙中用到的函数
2006/10/07 Javascript
js left,right,mid函数
2008/06/10 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python中时间模块的基本使用教程
2019/05/14 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
企业项目策划书
2014/01/11 职场文书
基督教婚礼主持词
2014/03/14 职场文书
三八节主持词
2014/03/17 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
节能减耗标语
2014/06/21 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技