Un exemple de l'effet d'arborescence multi-sélection implémenté par le plug-in jQuery zTree-js tutoriel-php.cn

Un exemple de l'effet d'arborescence multi-sélection implémenté par le plug-in jQuery zTree

小云云

Libérer： 2018-01-23 09:42:21

original

2041 Les gens l'ont consulté

Cet article présente principalement l'effet d'arbre à sélection multiple réalisé par le plug-in jQuery zTree. Il analyse les étapes de fonctionnement spécifiques et les précautions associées du plug-in d'arbre à sélection multiple zTree pour réaliser l'effet d'arbre à sélection multiple sous forme d'exemples. . Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Cet article décrit l'effet d'arborescence multi-sélection implémenté par le plug-in jQuery zTree. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1 Code d'implémentation :

<!DOCTYPE html>
<html>
<head>
  <title>多选树</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/demo.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
  <script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.excheck.min.js"></script>
  <script type="text/javascript">
    <!--
    var setting = {
      check: {
        enable: true,
        chkStyle: "checkbox",
        chkboxType: { "Y": "s", "N": "ps" }
      },
      data: {
        simpleData: {
          enable: true
        }
      }
    };
    var zNodes =[
      { id:1, pId:0, name:"湖北省", open:true},
      { id:11, pId:1, name:"武汉市", open:true},
      { id:111, pId:11, name:"汉口"},
      { id:112, pId:11, name:"武昌"},
      { id:12, pId:1, name:"黄石市", open:true},
      { id:121, pId:12, name:"黄石港区"},
      { id:122, pId:12, name:"西塞山区"},
      { id:2, pId:0, name:"湖南省", open:true},
      { id:21, pId:2, name:"长沙市"},
      { id:22, pId:2, name:"株洲市", open:true},
      { id:221, pId:22, name:"天元区"},
      { id:222, pId:22, name:"荷塘区"},
      { id:23, pId:2, name:"湘潭市"}
    ];
    $(document).ready(function(){
      $.fn.zTree.init($("#treeMultiple"), setting, zNodes);
    });
    //-->
  </script>
</head>
<body>
<p class="content_wrap" style="text-align: center;">
  <p class="zTreeDemoBackground left">
    <ul id="treeMultiple" class="ztree" style="height: 300px; width:150px; overflow-y: auto"></ul>
  </p>
</p>
</body>
</html>

Copier après la connexion

2. >

3. Description du code source

(1) Description Y, N, "p" et "s"

La case à cocher de définition d'attribut Y est Situation vérifiée ;

L'attribut N définit la situation après que la case soit décochée ;
"p" indique que l'opération affectera le nœud parent ;
"s" indique que l'opération affectera le nœud enfant.

(2)

chkboxType: { "Y": "s", "N": "ps" }

signifie que l'opération de sélection de case à cocher n'affecte que les nœuds enfants ;

Recommandations associées :

Explication détaillée de l'implémentation jquery ztree de la fonction de collecte par clic droit

Comment utiliser le plug-in d'arbre jQuery zTree correctement

Ztree implémente la fonction d'affichage horizontal des autorisations pour partager des exemples

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!