EasyUI Tree 树

分手后的思念是犯贱 2022-05-09 11:24 347阅读 0赞

### 一、EasyUI Tree 树：[http://www.jeasyui.net/plugins/185.html][http_www.jeasyui.net_plugins_185.html] ###

树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。

### 用法 ###

树（tree）定义在 <ul> 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 <li> 元素。

### 属性 ###

每个节点可以包括下列属性：

*  id：节点的 id，它对于加载远程数据很重要。
 *  text：要显示的节点文本。
 *  state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。
 *  checked：指示节点是否被选中。
 *  attributes：给一个节点添加的自定义属性。
 *  children：定义了一些子节点的节点数组。
 *  iconCls：用来显示图标的 css class。
 *  target：目标的 DOM 对象。这个是回调时用的！

**1、树的基本用法**

<div id="tree" style="width:30%">
    		<ul id="tt"></ul>
    	</div>
    
    --index.js--
    $(function(){	
    	$("#tt").tree({
    		data: [
    			{id:0,text:"全部",children:[
    				{id:"1",text:"node1"},
    				{id: 2, text:"node2"},
    				{id:"3", checked:true,text:"node3"}, //复选框有效可用checked属性
    				{id:"5",text:"node4",children:[
    					{id:"5",text:"node4-1",iconCls:"icon-save"},
    					{id:"6",text:"node4-1"}
    				]}
    			]}
    		],
    		dnd: true, //可拖放
    		lines: true, //显示树线条
    		checkbox: true, //显示复选框
    		animate: true //展开动画效果
    	});
    	
    });

1： ![70][]      2：![70 1][]

**2、格式化树节点和过滤树节点** **  **

<table> 
 <tbody> 
  <tr> 
   <td><span style="color:#f33b45;">formatter</span></td> 
   <td>function(node)</td> 
   <td>定义如何呈现节点文本。<br> 代码实例： <pre>
<code>&nbsp;</code></pre> 
    <ol> 
     <li>$('#tt').tree({ </li> 
     <li>formatter:function(node){ </li> 
     <li>return node.text;</li> 
     <li>}</li> 
     <li>});</li> 
    </ol></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">loadFilter</span></td> 
   <td>function(data,parent)</td> 
   <td>返回要显示的过滤数据。返回数据时以标准树格式返回的。该函数有下列参数：<br> data：要加载的原始数据。<br> parent：DOM 对象，表示父节点。</td> 
  </tr> 
 </tbody> 
</table>

在1中添加如下js

animate: true, //展开动画效果
    		formatter: function(node){	//格式化节点，参数node：为tree所有节点
    			var ftext = node.text;
    			if (node.children){
    				ftext += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>';
    			}
    			return ftext;
    		},
    		loadFilter: function(data){ //对显示节点过滤，data：要加载的原始数据。
    			for(var i=0; i<data.length; i++){
    				if(data.text == "node2"){
    					data.iconCls = "icon-add";
    				}else{
    					for(var j=0; j<data[i].children.length; j++){
    						if(data[i].children[j].text == "node2"){
    							data[i].children[j].iconCls = "icon-ok";
    						}
    					}
    				}
    			}
    			return data; //返回重构的data
    		}

**3、节点加右键菜单可编辑** ： 事件与方法见文档

### 事件 ###

<table> 
 <tbody> 
  <tr> 
   <td> <p>名称</p> </td> 
   <td> <p>参数</p> </td> 
   <td> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td> <p>onClick</p> </td> 
   <td> <p>node</p> </td> 
   <td> <p>当用户点击一个节点时触发。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>onAfterEdit</p> </td> 
   <td> <p>node</p> </td> 
   <td> <p>编辑节点后触发。&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">onContextMenu</span></td> 
   <td>e, node</td> 
   <td>当右键点击节点时触发。</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <td> <p>名称</p> </td> 
   <td> <p>参数</p> </td> 
   <td> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#f33b45;">beginEdit</span></p> </td> 
   <td> <p>target</p> </td> 
   <td> <p>开始编辑节点。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>getSelected</p> </td> 
   <td> <p>none</p> </td> 
   <td> <p>获取选中的节点并返回它，如果没有选中节点，则返回 null。</p> </td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">select</span></td> 
   <td>target</td> 
   <td>选中一个节点，target 参数表示节点的 DOM 对象。</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">append</span></td> 
   <td>param</td> 
   <td>追加一些子节点到一个父节点，param 参数有两个属性：<br><span style="color:#f33b45;">parent：DOM 对象</span>，要追加到的父节点，如果没有分配，则追加为根节点。<br><span style="color:#3399ea;">data：数组</span>，节点的数据。</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">insert</span></td> 
   <td>param</td> 
   <td>在指定节点的前边或后边插入一个节点，param 参数包括下列属性：<br><span style="color:#f33b45;">before：DOM 对象</span>，前边插入的节点。<br><span style="color:#f33b45;">after</span>：DOM 对象，后边插入的节点。<br><span style="color:#3399ea;">data：对象</span>，节点数据。</td> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">remove</span></td> 
   <td>target</td> 
   <td>移除一个节点和它的子节点，target 参数表示节点的 DOM 对象。</td> 
  </tr> 
 </tbody> 
</table>

<div id="tree" style="width:30%">
    		<ul id="tt"></ul>
    	</div>
    	<div id="mm" class="easyui-menu">
    		<div id="addSonNode" data-options="iconCls:'icon-add'">添加子节点</div>
    		<div id="addBrotherNode" data-options="iconCls:'icon-add'">添加兄弟节点</div>
    		<div id="delNode" data-options="iconCls:'icon-clear'">删除节点</div>
    	</div>
    
    --index.js--
    $(function(){	
    	$("#tt").tree({
    		data: [
    			{id:0,text:"全部",children:[
    				{id:"1",text:"node1"},
    				{id: 2, text:"node2"},
    				{id:"3", checked:true,text:"node3"}, //复选框有效可用checked属性
    				{id:"4",text:"node4",children:[
    					{id:"5",text:"node4-1",iconCls:"icon-save"},
    					{id:"6",text:"node4-1"}
    				]}
    			]}
    		],
    		dnd: true, //可拖放
    		lines: true, //显示树线条
    		checkbox: true, //显示复选框
    		animate: true, //展开动画效果
    		onContextMenu: function(e,node){
    			e.preventDefault();
    			$(this).tree("select",node.target); //让右键点击的节点对象被选中
    			$("#mm").menu("show",{
    				left: e.pageX,
    				top:e.pageY
    			});
    		}
    	});
    	
    	var id = 7;
    	$("#addSonNode").on("click",function(){
    		//获取选中的节点对象
    		var selectedNode = $("#tt").tree("getSelected");
    		//创建新添加的子节点
    		var node = {
    			parent: selectedNode.target,	
    			data: [
    				{
    					id: ++id, //模拟数据id，项目中取数据库中最新的id+1
    					text: ""
    				}
    			]
    		}
    		//把子节点追加添加到树上
    		$("#tt").tree("append",node);
    		//通过新节点的id获取它的对象
    		var actNode = $("#tt").tree("find",id); //模拟数据id
    		//alert(actNode + id);
    		$("#tt").tree("beginEdit",actNode.target); 
    		
    	});
    	$("#addBrotherNode").on("click",function(){
    		var selectedNode = $("#tt").tree("getSelected");
    		//创建新添加的兄弟节点
    		var node = {
    				after: selectedNode.target,	
    				data: {
    						id: ++id, //模拟数据id，项目中取数据库中最新的id+1
    						text: ""
    					}
    		}
    		$("#tt").tree("insert",node);
    		var actNode = $("#tt").tree("find",id); //模拟数据id
    		//alert(actNode + id);
    		$("#tt").tree("beginEdit",actNode.target); 
    		
    	});
    	$("#delNode").on("click",function(){
    		//获取选中的节点对象
    		var selectedNode = $("#tt").tree("getSelected");
    		//删除选中的节点对象
    		$("#tt").tree("remove",selectedNode.target);
    		
    	});
    	
    });

![70 2][]    ![70 3][]

**4、获取带复选框的树**

### 关联的属性 ###

<table> 
 <tbody> 
  <tr> 
   <td> <p>cascadeCheck</p> </td> 
   <td> <p>boolean</p> </td> 
   <td> <p>定义是否级联检查。</p> </td> 
   <td> <p>true</p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#f33b45;">onlyLeafCheck</span></p> </td> 
   <td> <p>boolean</p> </td> 
   <td> <p>定义是否只在叶节点前显示复选框。</p> </td> 
   <td> <p>false</p> </td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <td> <p>名称</p> </td> 
   <td> <p>参数</p> </td> 
   <td> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#f33b45;">getChecked</span></p> </td> 
   <td> <p>state</p> </td> 
   <td> <p>获取选中的节点。状态可用值有：<span style="color:#f33b45;">'checked'、'unchecked'、'indeterminate</span>'。如果状态未分配，则返回 'checked' 节点。</p> </td> 
  </tr> 
 </tbody> 
</table>

###   具体使用：获取选中的节点，没选中的节点，半选中的节点  ###

arrayObject.join(*separator*)   方法用于把**数组**中的所有元素放入一个**字符串**。元素是通过指定的分隔符进行分隔的。

**jQuery 遍历 - each() 方法**

$(*selector*).each(*function(index,element)*)

**参数必需**。为每个匹配元素规定运行的函数。

*  *index* - 选择器的 index 位置
 *  *element* - 当前的元素（也可使用 "this" 选择器）

<div id="tree" style="width:30%">
    		<ul id="tt"></ul>
    	</div>
    	<input type="button" id="allchk" value="选中"/>
    	<input type="button" id="unchk" value="没选中"/>
    	<input type="button" id="nochk" value="半选中"/>
    --index.js--
    $(function(){	
    	$("#tt").tree({
    		data: [
    			{id:0,text:"全部",children:[
    				{id:"1",text:"node1"},
    				{id: 2, text:"node2"},
    				{id:"3", checked:true,text:"node3"}, //复选框有效可用checked属性
    				{id:"4",text:"node4",children:[
    					{id:"5",text:"node4-1",iconCls:"icon-save"},
    					{id:"6",text:"node4-1"}
    				]}
    			]}
    		],
    		dnd: true, //可拖放
    		lines: true, //显示树线条
    		checkbox: true, //显示复选框
    		animate: true, //展开动画效果
    	});
    
    	$("#allchk").on("click",function(){
    		getCheckedArr("checked");
    	});
    	$("#unchk").on("click",function(){
    		getCheckedArr("unchecked");
    	});
    	$("#nochk").on("click",function(){
    		getCheckedArr("indeterminate");
    	});
    	
    });
    
    function getCheckedArr(state){
    	var nodes = $("#tt").tree("getChecked",state);
    	var textarr = new Array();
    	$(nodes).each(function(i,node){
    		textarr[i] = node["text"];
    	});
    	alert(textarr.join(", "));
    }

![70 4][]

## **5、**与数据库同步的异步树 ##

## 属性 ##

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td><span style="color:#f33b45;">url</span></td> 
   <td>string</td> 
   <td>获取远程数据的 URL 。</td> 
   <td>null</td> 
  </tr> 
 </tbody> 
</table>

### 事件  ###

<table> 
 <tbody> 
  <tr> 
   <td><span style="color:#f33b45;">onAfterEdit</span></td> 
   <td>node</td> 
   <td>编辑节点后触发。</td> 
  </tr> 
 </tbody> 
</table>

**1）前端**

<mvc:view-controller path="/" view-name="index"/>  所有index.jsp 页面注意ajax的url

<h3>欢迎进入首页</h3>
    	<div id="tree" style="width:30%">
    		<ul id="tt"></ul>
    	</div>
    	<input type="button" id="allchk" value="选中"/>
    	<input type="button" id="unchk" value="没选中"/>
    	<input type="button" id="nochk" value="半选中"/>
    
    --index.js--
    $(function(){	
    	var id = 0;
    	$("#tt").tree({
    		url: "getAllNodes",
    		dnd: true, //可拖放
    		lines: true, //显示树线条
    		checkbox: true, //显示复选框
    		animate: true, //展开动画效果
    		onAfterEdit:function(node){
    			//获取修改后的节点数据，通过ajax修改后台数据
    			console.log(node);
    			var nodeText = node.text;
    			var parentNode = $("#tt").tree("getParent",node.target);
    			if(parentNode != null){
    				$.post("addNode",{
    					text: nodeText,
    					parentId: parentNode.id
    				},function(data){
    					alert(data);
    				});
    			}else{
    				$.post("addNode",{
    					text: nodeText
    				},function(data){
    					alert(data);
    				});
    			}
    		},
    		onContextMenu: function(e,node){
    			//右键点击时， ajax 获取数据库中最新的id值，赋值给全局变量id;
    			$.post("getNewestId",{},function(data){
    				id = data;
    			});
    			e.preventDefault();
    			$(this).tree("select",node.target); //让右键点击的节点对象被选中
    			$("#mm").menu("show",{
    				left: e.pageX,
    				top:e.pageY
    			});
    		}
    	});
    	
    	$("#addSonNode").on("click",function(){
    		var selectedNode = $("#tt").tree("getSelected");
    		//创建新添加的子节点
    		var node = {
    			parent: selectedNode.target,	
    			data: [
    				{
    					id: ++id, 
    					text: ""
    				}
    			]
    		}
    		//把子节点追加添加到树上
    		$("#tt").tree("append",node);
    		//通过新节点的id获取它的对象
    		var actNode = $("#tt").tree("find",id); 
    		$("#tt").tree("beginEdit",actNode.target); 
    		
    	});
    	$("#addBrotherNode").on("click",function(){
    		var selectedNode = $("#tt").tree("getSelected");
    		//创建新添加的兄弟节点
    		var node = {
    				after: selectedNode.target,	
    				data: {
    						id: ++id, 
    						text: ""
    					}
    		}
    		$("#tt").tree("insert",node);
    		var actNode = $("#tt").tree("find",id); 
    		$("#tt").tree("beginEdit",actNode.target); 
    		
    	});
    	$("#delNode").on("click",function(){
    		var selectedNode = $("#tt").tree("getSelected");
    		$("#tt").tree("remove",selectedNode.target);
    		//删除数据库中的节点对象
    		$.ajax({
    			type : "post",
    			url : "deleteNode",
    			data : {id:selectedNode.id},
    			datatype : "json",
    			success : function(data){
    				alert(data);
    			}
    		});
    		
    	});
    	
    });

**2）后****端**

数据库：![70 5][]

model:

public class TreeNode {
    
    	private int id;
    	private String text;
    	private List<TreeNode> children = new ArrayList<>();
    	private String parentId;

service:

@Service("treeNodeService")
    public class TreeNodeServiceImpl extends BaseServiceImpl<TreeNode> implements TreeNodeService{
    
    	@Autowired
    	private TreeNodeDao treeNodeDao;
    	
    	/**
    	 * 实现节点的层次结构，返回一个有层次结构的list
    	 */
    	@Override
    	public List<TreeNode> getAllNodes() {
    		
    		//获取所有节点：父子节点没有被区分，children属性为空
    		List<TreeNode> allnodes = treeNodeDao.getAllNodes();
    		//重构父子结构
    		List<TreeNode> listDTO = parentAndChildrenList(allnodes);
    		
    		//添加全部根节点，
    		List<TreeNode> list = new ArrayList<>();
    		TreeNode firstNode = new TreeNode();
    		firstNode.setId(0);
    		firstNode.setText("全部");
    		firstNode.setChildren(listDTO);
    		list.add(firstNode);
    		
    		return list;
    	}
    	
    
    	@Override
    	public int getNewestId() {
    		return treeNodeDao.getNewestId();
    	}
    	
    	//重构父子结构, 返回一个父子分层结构的List
    	public List<TreeNode> parentAndChildrenList(List<TreeNode> allNodeList){
    		List<TreeNode> listDTO = new ArrayList<>(); 
    		Map<Integer,TreeNode> allNodeMap = new HashMap<>();
    		
    		for(TreeNode node : allNodeList) {
    			allNodeMap.put(node.getId(), node); //放allnodes
    			if(node.getParentId() == null) { //.equals("0")
    				listDTO.add(node);	//放没有父节点的根节点
    			}
    		}
    		for(TreeNode node : allNodeList) {
    			int parent_id= 0;
    			if(node.getParentId() != null) {
    				parent_id = Integer.parseInt(node.getParentId());
    				TreeNode parent = allNodeMap.get(parent_id); //null,null,null,3
    				parent.getChildren().add(node);  //组装父子关系
    			}
    		}
    		return listDTO;
    	}
    	
    }

controller:

@Controller
    public class TreeNodeController {
    	
    	@Autowired
    	private TreeNodeService treeNodeService;
    
    	@ResponseBody //返回jsonString
    	@RequestMapping(value="/getAllNodes", method=RequestMethod.POST)
    	public List<TreeNode> getAllNodes(){
    		List<TreeNode> nodes = treeNodeService.getAllNodes();
    		return nodes;
    	}
    	
    	@ResponseBody 
    	@RequestMapping(value="/getNewestId", method=RequestMethod.POST)
    	public int getNewestId(){
    		return treeNodeService.getNewestId();
    	}
    	
    	@ResponseBody 
    	@RequestMapping(value="/addNode", method=RequestMethod.POST)
    	public String addNode(TreeNode node){
    		System.out.println(node);
    		treeNodeService.add(node);
    		return "添加success";
    	}
    	
    	@ResponseBody 
    	@RequestMapping(value="/deleteNode", method=RequestMethod.POST)
    	public String deleteNode(@RequestParam("id") int id){
    		System.out.println(id);
    		treeNodeService.delete(id);
    		return "删除success";
    	}
    }

![70 6][]

小问题：ajax回调data 有点乱码，后续解决

在springmvc.xml 中配置：

<mvc:annotation-driven >
    		<mvc:message-converters>
    	        <bean class="org.springframework.http.converter.StringHttpMessageConverter">
    	            <constructor-arg value="UTF-8" />
    	        </bean>
    	    </mvc:message-converters>
    	</mvc:annotation-driven>

![70 7][]

EasyUI Tree 树 到此 可实现基本操作

[http_www.jeasyui.net_plugins_185.html]: http://www.jeasyui.net/plugins/185.html
[70]: https://img-blog.csdn.net/20181007103833821?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220509/9b1b1cca3ba24ba49e816596989e1a65.png
[70 2]: https://img-blog.csdn.net/20181007161021799?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: /images/20220509/a79bbe4943aa4713a2ead91abc57e03a.png
[70 4]: /images/20220509/99155200491347c396807535cb4fbcfe.png
[70 5]: /images/20220509/45a78f72311f4d60bcde4ff1afecc6f2.png
[70 6]: /images/20220509/5340a2fca67b4c468ade979fbb348b86.png
[70 7]: /images/20220509/d1146829f1174371878aee9ae5f5d12a.png