Comment mettre en œuvre le chargement par clic de régions à cinq niveaux à travers le pays dans le plug-in d'arborescence zTree

Ci-dessous, je partagerai avec vous un exemple d'utilisation du plug-in d'arborescence zTree pour implémenter le chargement par clic dans des régions à cinq niveaux à travers le pays. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans la fonction de projet, le lieu de résidence et la résidence actuelle doivent être saisis. Afin de réduire la quantité de saisie de l'utilisateur, le plug-in d'arborescence sera utilisé pour sélectionner les régions à cinq niveaux à travers le pays. pays + la zone de saisie pour saisir l'adresse détaillée. Le plug-in d'arborescence zTree est utilisé en premier ici. Pour une utilisation et une étude futures, les enregistrements pertinents sont créés ici. Bien entendu, il est essentiel de se référer aux articles des dieux majeurs lors du processus de mise en œuvre, et vous pourrez résoudre rapidement les problèmes en fonction de vos besoins réels.

Présentation du site officiel du plug-in d'arbre ZTree

zTree est un "plug-in d'arbre" multifonctionnel implémenté par jQuery. D'excellentes performances, une configuration flexible et une combinaison de plusieurs fonctions sont les plus grands avantages de zTree.

Adresse du site officiel du plug-in d'arbre zTree

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

Fonction code d'implémentation

Structure de base de la table de région de la base de données :

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

Code de la page :

<!-- 户籍地、现居住地 -->
<tr>
 <td colspan="3">
  <p 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(&#39;domiciliary&#39;)" placeholder="点击选择地区" maxlength="20" readonly="readonly">
   <input type="text" class="form-control" style="width:320px;float:left;" name="domiciliaryAddress" value="" placeholder="详细地址" maxlength="100">
  </p>
 </td>
</tr>
<tr>
 <td colspan="3">
  <p 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(&#39;bide&#39;)" placeholder="点击选择地区" maxlength="20" readonly="readonly">
   <input type="text" class="form-control" style="width:320px;float:left;" name="bideAddress" value="" placeholder="详细地址" maxlength="100">
  </p>
 </td>
</tr>
<!-- bootstrap 模态框（Modal） -->
<p class="modal fade" id="regionModal" tabindex="-1" role="dialog" aria-hidden="true">
 <input type="hidden" id="regionModalType" />
 <p class="modal-dialog">
  <p class="modal-content">
   <p class="modal-body">
    <!-- zTree 的容器 -->
    <ul id="treeRegion" class="ztree"></ul>
   </p>
   <p class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
    <button type="button" class="btn btn-primary" onclick="confimRegion()">确认</button>
   </p>
  </p>
 </p>
</p>

Effet :

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

Effet de réussite :

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment obtenir l'effet d'animation consistant à rebondir sur le bord dans jQuery ?

Quelles sont les méthodes pour ajouter de nouveaux attributs d'objets à la séquence de détection en vue ?

Comment résoudre le problème selon lequel Vue ne peut pas détecter les changements dans les tableaux ou les objets ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!