jQuery zTree loads tree menu function_jquery

Since the project needed to design a tree menu function, I searched for relevant information on Baidu and found that there was a lot of information on zTree, which I thought was pretty good. Moreover, zTree also has an official API document, which was introduced in great detail. After some trouble, I finally got it. I figured it out, so I wrote it down, which can be regarded as a summary of learning zTree.

Introduction to zTree:

1. zTree uses the core code of JQuery to implement a set of Tree plug-ins that can complete most common functions

2. zTree v3.0 divides the core code according to functions, and unnecessary code does not need to be loaded

3. Using lazy loading technology, tens of thousands of nodes can be loaded easily, and even under IE6, it can basically achieve instant killing

4. Compatible with IE, FireFox, Chrome, Opera, Safari and other browsers

5. Support JSON data

6. Support static and Ajax asynchronous loading of node data

7. Supports any skin change/custom icon (relying on css)

8. Support extremely flexible checkbox or radio selection function

9. Provide multiple event response callbacks

10. Flexible editing (add/delete/modify/check) functions, you can drag and drop nodes at will, and you can drag and drop multiple nodes

11. Multiple Tree instances can be generated simultaneously in one page

Introduction to core functions and attributes:

Core:zTree(setting, [zTreeNodes])

This function accepts a JSON format data object setting and a JSON format data object zTreeNodes to create a Tree.

Core parameters: setting

The parameter configuration of zTree is all done here. Simply put: the tree style, events, access paths, etc. are all configured here

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

Because there are too many parameters, please see zTreeAPI

Core parameters:zTreeNodes

The entire node data collection of zTree adopts a data structure composed of JSON objects. To put it simply: all the information of the tree is saved in Json format

1. zTree official website: http://www.ztree.me/v3/main.php#_zTreeInfo

You can download the source code, examples and API of zTree on the official website. The author’s API in pdf is very detailed

About zTree node data acquisition methods are divided into static (direct definition) and dynamic (backend database loading)

Detailed configuration steps:

The first step - Introduce relevant files

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

Remarks:

1) The first one (zTreeStyle.css) is the style css file of zTree. Only by introducing this can the tree structure style be presented,

2), the second one (jquery-1.9.1.min.js) is the jQuery file, because it needs to be used,

3), the third one (jquery.ztree.core-3.5.min.js) is the core js file of zTree, this is necessary,

4), the last one (js/jquery.ztree.excheck-3.5.min.js) is an expansion file, mainly used for the functions of radio buttons and check boxes. Because check boxes are used, it is also It needs to be brought in.

The second step ——Related configuration (for specific detailed configuration, please refer to the official website for detailed API documentation)

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

The third step - Load node data and present a tree structure

1) On the html page, just put a ul directly, and the data will eventually be automatically loaded into the ul element

<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), loading data in js

1. Static method (direct 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. Dynamic method (loading from background database)

/**
 * 页面初始化
 */
$(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 background loading data code:

1. Define the VO class of tree. You don’t need to define this, because I need to use other operations, which is more convenient

/**
 * 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. Query the database, and the sql structure fields must also be in the format of id, pId, name, open (optional) (note: the I in the middle of pId must be capitalized), and then encapsulate the results into the TreeVO class.

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

The entire operation is completed here. Hey, the writing is not good, and the organizational language is naturally not very good. Please forgive me! Learn together and grow together!