jQuery zTree lädt das Baummenü function_jquery

Da das Projekt eine Baummenüfunktion entwerfen musste, habe ich auf Baidu nach relevanten Informationen gesucht und festgestellt, dass es viele Informationen zu zTree gibt, die meiner Meinung nach ziemlich gut sind. Darüber hinaus verfügt zTree auch über ein offizielles API-Dokument. Nach einiger Mühe habe ich es endlich herausgefunden und es aufgeschrieben, was als Zusammenfassung des Erlernens von zTree angesehen werden kann.

Einführung in zTree:

1. zTree verwendet den Kerncode von JQuery, um eine Reihe von Tree-Plug-Ins zu implementieren, die die meisten gängigen Funktionen ausführen können

2. zTree v3.0 unterteilt den Kerncode nach Funktionen und unnötiger Code muss nicht geladen werden

3. Mit der Lazy-Loading-Technologie können Zehntausende von Knoten problemlos geladen werden, und selbst unter IE6 kann grundsätzlich ein sofortiges Töten erreicht werden

4. Kompatibel mit IE, Firefox, Chrome, Opera, Safari und anderen Browsern

5. JSON-Daten unterstützen

6. Unterstützt statisches und asynchrones Ajax-Laden von Knotendaten

7. Unterstützt jede Skin-Änderung/benutzerdefiniertes Symbol (basierend auf CSS)

8. Unterstützt eine äußerst flexible Kontrollkästchen- oder Radioauswahlfunktion

9. Stellen Sie mehrere Rückrufe für Ereignisantworten bereit

10. Flexible Bearbeitungsfunktionen (Hinzufügen/Löschen/Ändern/Prüfen), Sie können Knoten nach Belieben ziehen und ablegen, und Sie können mehrere Knoten per Drag & Drop ziehen

11. Mehrere Tree-Instanzen können gleichzeitig auf einer Seite generiert werden

Einführung in die Kernfunktionen und -eigenschaften:

Kern:zTree(setting, [zTreeNodes])

Diese Funktion akzeptiert eine Datenobjekteinstellung im JSON-Format und ein Datenobjekt im JSON-Format zTreeNodes, um einen Baum zu erstellen.

Kernparameter: Einstellung

Die gesamte Parameterkonfiguration von zTree wird hier vorgenommen. Einfach ausgedrückt: Der Baumstil, Ereignisse, Zugriffspfade usw. werden hier konfiguriert

var setting = { 
  showLine: true, 
  checkable: true 
 };

Da es zu viele Parameter gibt, sehen Sie sich bitte zTreeAPI

Kernparameter:zTreeNodes

Die gesamte Knotendatensammlung von zTree übernimmt eine Datenstruktur, die aus JSON-Objekten besteht. Vereinfacht ausgedrückt: Alle Informationen des Baums werden im Json-Format gespeichert

1. Offizielle zTree-Website: http://www.ztree.me/v3/main.php#_zTreeInfo

Sie können den Quellcode, Beispiele und die API von zTree auf der offiziellen Website herunterladen. Die API des Autors im PDF-Format ist sehr detailliert

Die Datenerfassungsmethoden für zTree-Knoten sind in statische (direkte Definition) und dynamische (Laden der Backend-Datenbank) unterteilt

Detaillierte Konfigurationsschritte:

Der erste Schritt – Relevante Dateien einführen

<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

Bemerkungen:

1) Die erste (zTreeStyle.css) ist die Stil-CSS-Datei von zTree. Nur durch die Einführung kann der Baumstrukturstil dargestellt werden,

2), die zweite (jquery-1.9.1.min.js) ist die jQuery-Datei, da sie verwendet werden muss,

3), die dritte (jquery.ztree.core-3.5.min.js) ist die Kern-JS-Datei von zTree, das ist notwendig,

4) Die letzte Datei (js/jquery.ztree.excheck-3.5.min.js) ist eine Erweiterungsdatei, die hauptsächlich für die Funktionen von Optionsfeldern und Kontrollkästchen verwendet wird Es muss eingebracht werden.

Schritt 2 —— Verwandte Konfiguration (eine detaillierte API-Dokumentation finden Sie auf der offiziellen Website)

var zTree;
var setting = {
 view: {
  dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
  showLine: true,//是否显示节点之间的连线
  fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
  selectedMulti: false //设置是否允许同时选中多个节点
 },
 check:{
  //chkboxType: { "Y": "ps", "N": "ps" },
  chkStyle: "checkbox",//复选框类型
  enable: true //每个节点上是否显示 CheckBox 
 },
 data: {
  simpleData: {//简单数据模式
   enable:true,
   idKey: "id",
   pIdKey: "pId",
   rootPId: ""
  }
 },
 callback: {
  beforeClick: function(treeId, treeNode) {
   zTree = $.fn.zTree.getZTreeObj("user_tree");
   if (treeNode.isParent) {
    zTree.expandNode(treeNode);//如果是父节点，则展开该节点
   }else{
    zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
   }
  }
 }
};

Der dritte Schritt – Knotendaten laden und eine Baumstruktur präsentieren

1) Fügen Sie auf der HTML-Seite einfach direkt eine ul ein, und die Daten werden schließlich automatisch in das ul-Element geladen

<body>
 <div class="zTreeDemoBackground left">
  <ul id="user_tree" class="ztree" style="border: 1px solid #617775;overflow-y: scroll;height: 500px;"></ul>
 </div>
</body>

2), Laden von Daten in js

1. Statische Methode (direkte Definition)

var zNodes =[
 { id:1, pId:0, name:"test 1", open:false},
 { id:11, pId:1, name:"test 1-1", open:true},
 { id:111, pId:11, name:"test 1-1-1"},
 { id:112, pId:11, name:"test 1-1-2"},
 { id:12, pId:1, name:"test 1-2", open:true},
     ];
     
$(document).ready(function(){
 $.fn.zTree.init($("#user_tree"), setting, zNodes);
});
function onCheck(e,treeId,treeNode){
 var treeObj=$.fn.zTree.getZTreeObj("user_tree"),
 nodes=treeObj.getCheckedNodes(true),
 v="";
 for(var i=0;i<nodes.length;i++){
  v+=nodes[i].name + ",";
  alert(nodes[i].id); //获取选中节点的值
 }
}

2. Dynamische Methode (Laden aus der Hintergrunddatenbank)

/**
 * 页面初始化
 */
$(document).ready(function(){
 onLoadZTree();
});

/**
 * 加载树形结构数据
 */
function onLoadZTree(){
 var treeNodes;
 $.ajax({
  async:false,//是否异步
  cache:false,//是否使用缓存
  type:'POST',//请求方式：post
  dataType:'json',//数据传输格式：json
  url:$('#ctx').val()+"SendNoticeMsgServlet?action=loadUserTree",//请求的action路径
  error:function(){
   //请求失败处理函数
   alert('亲，请求失败！');
  },
  success:function(data){
//  console.log(data);
   //请求成功后处理函数
   treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
  }
 });
 
 var t = $("#user_tree");
 t = $.fn.zTree.init(t, setting, treeNodes);
}

Java-Hintergrundladedatencode:

1. Definieren Sie die VO-Klasse des Baums. Sie müssen dies nicht definieren, da ich andere Operationen verwenden muss, was bequemer ist

/**
 * zTree树形结构对象VO类
 * 
 * @author Administrator
 * 
 */
public class TreeVO {
 private String id;//节点id
 private String pId;//父节点pId I必须大写
 private String name;//节点名称
 private String open = "false";//是否展开树节点，默认不展开

 public String getId() {
  return id;
 }

 public void setId(String id) {
  this.id = id;
 }

 public String getpId() {
  return pId;
 }

 public void setpId(String pId) {
  this.pId = pId;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public String getOpen() {
  return open;
 }

 public void setOpen(String open) {
  this.open = open;
 }

}

2. Fragen Sie die Datenbank ab, und die SQL-Strukturfelder müssen auch das Format „id“, „pId“, „name“ und „open“ haben (optional) (Hinweis: Das I in der Mitte von pId muss großgeschrieben werden) und dann kapseln Ergebnisse in die TreeVO-Klasse.

/**
  * 加载树形结构数据
  * @param request
  * @param response
  * @throws IOException 
  */
 public void loadUserTree(HttpServletRequest request, HttpServletResponse response) throws IOException{
  WeiXinUserService weixinUserService = new WeiXinUserServiceImpl();
  List<TreeVO> user_tree_list = weixinUserService.getUserTreeList();
  String treeNodesJson = JSONArray.fromObject(user_tree_list).toString();//将list列表转换成json格式 返回
  
  PrintWriter out = response.getWriter();
  //利用Json插件将Array转换成Json格式 
  out.print(treeNodesJson);
  
  //释放资源
  out.close();
 }

Der gesamte Vorgang ist hier leider nicht gut und die Organisationssprache ist natürlich nicht sehr gut. Gemeinsam lernen und gemeinsam wachsen!