jQuery zTree memuatkan fungsi menu tree_jquery

Memandangkan projek itu diperlukan untuk mereka bentuk fungsi menu pokok, saya mencari maklumat yang berkaitan di Baidu dan mendapati terdapat banyak maklumat tentang zTree, yang saya fikir cukup bagus Selain itu, zTree juga mempunyai dokumen API rasmi. yang diperkenalkan dengan sangat terperinci Selepas beberapa masalah, saya akhirnya dapat memahaminya, jadi saya menuliskannya, yang boleh dianggap sebagai ringkasan pembelajaran zTree.

Pengenalan kepada zTree:

1. zTree menggunakan kod teras JQuery untuk melaksanakan satu set pemalam Tree yang boleh melengkapkan fungsi yang paling biasa

2. zTree v3.0 membahagikan kod teras mengikut fungsi, dan kod yang tidak perlu tidak perlu dimuatkan

3. Menggunakan teknologi pemuatan malas, puluhan ribu nod boleh dimuatkan dengan mudah, malah di bawah IE6, ia pada asasnya boleh mencapai pembunuhan segera

4 Serasi dengan IE, FireFox, Chrome, Opera, Safari dan penyemak imbas lain

5. Sokong data JSON

6. Menyokong pemuatan statik dan Ajax tak segerak bagi data nod

7. Menyokong sebarang perubahan kulit/ikon tersuai (bergantung pada css)

8. Menyokong kotak pilihan yang sangat fleksibel atau fungsi pemilihan radio

9. Sediakan berbilang panggilan balik respons acara

10 Fungsi pengeditan fleksibel (tambah/padam/ubah suai/semak), anda boleh seret dan lepaskan nod sesuka hati, dan anda boleh seret dan lepas berbilang nod

11. Contoh Pokok Berbilang boleh dijana secara serentak dalam satu halaman

Pengenalan kepada fungsi teras dan sifat:

Teras:zTree(tetapan, [zTreeNodes])

Fungsi ini menerima tetapan objek data format JSON dan objek data format JSON zTreeNodes untuk mencipta Pokok.

Parameter teras: tetapan

Konfigurasi parameter zTree semuanya dilakukan di sini: gaya pokok, acara, laluan akses, dll. semuanya dikonfigurasikan di sini

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

Oleh kerana terdapat terlalu banyak parameter, sila lihat zTreeAPI

untuk parameter tertentu.

Parameter teras:zTreeNodes

Seluruh pengumpulan data nod zTree menggunakan struktur data yang terdiri daripada objek JSON Secara ringkasnya: semua maklumat pepohon disimpan dalam format Json

1. Laman web rasmi zTree: http://www.ztree.me/v3/main.php#_zTreeInfo

Anda boleh memuat turun kod sumber, contoh dan API zTree di tapak web rasmi API pengarang dalam pdf sangat terperinci

Mengenai kaedah pemerolehan data nod zTree dibahagikan kepada statik (definisi langsung) dan dinamik (pemuatan pangkalan data bahagian belakang)

Langkah konfigurasi terperinci:

Langkah pertama - Perkenalkan fail yang berkaitan

<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>

Catatan:

1) Yang pertama (zTreeStyle.css) ialah fail css gaya zTree Hanya dengan memperkenalkan ini gaya struktur pokok boleh dipersembahkan,

2), yang kedua (jquery-1.9.1.min.js) ialah fail jQuery, kerana ia perlu digunakan,

3), yang ketiga (jquery.ztree.core-3.5.min.js) ialah fail js teras zTree, ini perlu,

4), yang terakhir (js/jquery.ztree.excheck-3.5.min.js) ialah fail pengembangan, terutamanya digunakan untuk fungsi butang radio dan kotak semak Kerana kotak semak digunakan, ia juga digunakan Ia perlu dibawa masuk.

Langkah 2 —— Konfigurasi berkaitan (untuk konfigurasi terperinci khusus, sila rujuk tapak web rasmi untuk dokumentasi API terperinci)

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);//单击勾选，再次单击取消勾选
   }
  }
 }
};

Langkah ketiga - Muatkan data nod dan tunjukkan struktur pokok

1) Pada halaman html, letakkan ul terus, dan data akhirnya akan dimuatkan secara automatik ke dalam elemen ul

<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), memuatkan data dalam js

1. Kaedah statik (takrif langsung)

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. Kaedah dinamik (memuat daripada pangkalan data latar belakang)

/**
 * 页面初始化
 */
$(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);
}

kod data memuatkan latar belakang java:

1. Tentukan kelas VO pokok Anda tidak perlu mentakrifkan ini, kerana saya perlu menggunakan operasi lain, yang lebih mudah

/**
 * 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. Tanya pangkalan data, dan medan struktur sql juga mestilah dalam format id, pId, nama, terbuka (pilihan) (nota: I di tengah-tengah pId mesti menggunakan huruf besar), dan kemudian merangkum keputusan ke dalam kelas TreeVO.

/**
  * 加载树形结构数据
  * @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();
 }

Seluruh operasi selesai di sini, tulisannya tidak bagus, dan bahasa organisasi sememangnya tidak begitu baik. Belajar bersama dan berkembang bersama!