Heim > Artikel > Web-Frontend > Ein Beispiel für den Mehrfachauswahlbaumeffekt, der durch das jQuery-Plug-in zTree implementiert wird

Ein Beispiel für den Mehrfachauswahlbaumeffekt, der durch das jQuery-Plug-in zTree implementiert wird

小云云Original: 2018-01-23 09:42:212020Durchsuche

In diesem Artikel wird hauptsächlich der durch das jQuery-Plug-in zTree realisierte Mehrfachauswahlbaumeffekt vorgestellt. Er analysiert die spezifischen Betriebsschritte und zugehörigen Vorsichtsmaßnahmen des jQuery-Baum-Plug-ins zTree, um den Mehrfachauswahlbaumeffekt in Form von Beispielen zu realisieren . Freunde, die es brauchen, können darauf verweisen. Ich hoffe, es kann allen helfen.

Dieser Artikel beschreibt den Mehrfachauswahlbaumeffekt, der vom jQuery-Plug-in zTree implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Implementierungscode:

<!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. Implementierungs-Rendering:

3. Quellcodebeschreibung

(1) Y-, N-, „p“- und „s“-Beschreibung

Y-Attributdefinitions-Kontrollkästchen ist aktivierte Situation;
N-Attribut definiert die Situation, nachdem das Kontrollkästchen deaktiviert ist;
"p" zeigt an, dass sich die Operation auf den übergeordneten Knoten auswirkt;

(2)

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

bedeutet, dass sich der Kontrollkästchen-Auswahlvorgang nur auf die untergeordneten Knoten auswirkt.

Verwandte Empfehlungen:

Detaillierte Erläuterung der jQuery-Ztree-Implementierung der Rechtsklick-Sammelfunktion

So verwenden Sie das jQuery-Tree-Plug-in zTree richtig

Ztree implementiert die horizontale Anzeigefunktion von Berechtigungen zum Teilen von Beispielen

Das obige ist der detaillierte Inhalt vonEin Beispiel für den Mehrfachauswahlbaumeffekt, der durch das jQuery-Plug-in zTree implementiert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery checkbox

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery implementiert die FarbauswahlfunktionNächster Artikel：jquery implementiert die Farbauswahlfunktion

In Verbindung stehende Artikel

Mehr sehen