EasyUI combotree front-end and back-end use summary

Don't talk about the code

Use the asynchronous loading method of combotree;

jsp file:

<div>
    <div>部门</div><span><input id="deptCombotree"></span>
</div>

js file:

//initial department list
	$("#deptCombotree").combotree ({
		url:path+"/record/deptlist?deptid=0",  
		onBeforeExpand:function(node) {
		      $("#deptCombotree").combotree("tree").tree("options").url = path+"/record/deptlist?deptid=" + node.id;
		},
		onSelect: function (node) {
			$("#RecordList2").datagrid('reload',{deptId:node.id,recodeMonth:document.getElementById("beginTime").innerHTML});
		}
	 });

illustrate:

1), onBeforeExpand realizes asynchronous loading;

2), onSelect triggers table data reload when a node is selected;

3), combotree inherits all the events and methods of combo and tree

EasyUITreeNode.java

import java.io.Serializable;

public class EasyUITreeNode implements Serializable {
	/**
	 *
	 */
	private static final long serialVersionUID = -3722391707720182282L;
	
	private long id;
	private String text;
	private String state;
	
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}
	
	
}

Description: Be sure to pay attention to the three attributes of the node! !

DingDeptServiceImpl.java

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.aspectj.util.GenericSignature.TypeSignature;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.vooledingtalk.common.pojo.EasyUITreeNode;
import com.vooledingtalk.dao.DingDeptMapper;
import com.vooledingtalk.pojo.DingDept;
import com.vooledingtalk.service.DingDeptService;
@Service
public class DingDeptServiceImpl implements DingDeptService {
	@Autowired
	private DingDeptMapper dingDeptMapper;

	public boolean isParent(Long id) {
		return dingDeptMapper.countChildDepts(id)>0 ? true : false;
	}

	public List<EasyUITreeNode> getDeptList(long id) {
		List<EasyUITreeNode> nodes =  new ArrayList<EasyUITreeNode>();
		
		if (0 == id) {
			//Only get department information with id==1
			DingDept root = dingDeptMapper.selectDeptById(1L);
			EasyUITreeNode node = new EasyUITreeNode();
			node.setId(root.getId());
			node.setText(root.getName());
			node.setState("closed");
			nodes.add(node);
		}else{
			//Get the list of direct sub-departments
			List<DingDept> depts = dingDeptMapper.selectDirectChildDepts(id);
			for (DingDept dingDept: depts) {
				EasyUITreeNode node = new EasyUITreeNode();
				node.setId(dingDept.getId());
				node.setText(dingDept.getName());
				node.setState(isParent(dingDept.getId()) ? "closed" : "open");
				nodes.add(node);
			}
		}
		
		return nodes;
	}
}

Description: If the node is a parent node, it is in the closed state, and if it is a leaf node, it is in the open state;

DingDeptController.java

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.vooledingtalk.common.pojo.EasyUITreeNode;
import com.vooledingtalk.service.DingDeptService;

@Controller
public class DingDeptController {
	@Autowired
	private DingDeptService dingDeptService;
	
	@RequestMapping("/record/deptlist")
	@ResponseBody
	public List<EasyUITreeNode> getDeptList(@RequestParam(value="deptid" ,defaultValue="0")long parentId){
		return dingDeptService.getDeptList(parentId);
	}
}

My text description skills are not very good, so I just simply put the code.

-----------------------The following questions are related to the knowledge points of this article-------------------- ---------------------------------------

1. Value of combotree (transferred from https://my.oschina.net/u/1256202/blog/268556)

1. Get directly:
     Single choice: $("#id").combotree("getValue")
     Multiple choice: $("#id").combotree("getValues")
     Note: If the value in value and the displayed The text is different. If you need to get the text content, you can use getText(), and add s for multiple selections.
 2. Get it in the selection event:
     onSelect:function(node){

        node.text; or node.id;
     }

3. Use the method in the api

    var t = $("#id").combotree('tree'); // get tree object  

    var n = t.tree('getSelected'); // get the selected node  

    alert(n.text);