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

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

小云云original: 2018-01-23 09:42:212040parcourir

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>

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!

jquery checkbox

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery implémente la fonction de sélection des couleursArticle suivant：jquery implémente la fonction de sélection des couleurs

Articles Liés

Voir plus