EasyUI combotree前后端使用总结

短命女 2022-05-27 05:11 312阅读 0赞

不所说重点上代码

使用combotree的异步加载方式；

jsp文件：

js文件：

//初始部门列表
    	$("#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});
    		}
    	 });

说明：

1）、onBeforeExpand实现异步加载；

2）、onSelect实现节点选定时触发table数据重载；

3）、combotree继承了combo和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;
    	}
    	
    	
    }

说明：一定注意节点的三个属性！！

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) {
    			//仅获取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{
    			//获取直属子部门列表
    			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;
    	}
    }

说明：节点如果是父节点那么就是closed状态，如果是叶子节点则是open状态；

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);
    	}
    }

本人文字描述功底不太好，所以就只简单上代码了。

\-----------------------以下问本文的相关知识点-----------------------------------------------

##### 一、combotree取值（转自https://my.oschina.net/u/1256202/blog/268556） #####

1，直接获取：  
     单选：$("\#id").combotree("getValue")  
     多选：$("\#id").combotree("getValues")  
     注意：如果value中的值和所显示的文本不同，如需获取文本内容，则可以使用getText(),多选同样加s。  
 2，在选择事件中获取：  
     onSelect:function(node)\{

node.text；或者 node.id;  
     \}

3，使用api中方式

var t = $("\#id").combotree('tree'); // 得到树对象

var n = t.tree('getSelected'); // 得到选择的节点

alert(n.text);