EasyUI Tree 树

其他 2018-10-26 07:14:25 阅读次数: 0

一、EasyUI Tree 树：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：       2：

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

formatter function(node) 定义如何呈现节点文本。
代码实例： 
 
  1. $('#tt').tree({
  2. formatter:function(node){
  3. return node.text;
  4. }
  5. });
  
loadFilter function(data,parent) 返回要显示的过滤数据。返回数据时以标准树格式返回的。该函数有下列参数：
data：要加载的原始数据。
parent：DOM 对象，表示父节点。

  在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、节点加右键菜单可编辑 ： 事件与方法见文档

事件

名称

参数

描述

onClick

node

当用户点击一个节点时触发。

onAfterEdit

node

编辑节点后触发。 
onContextMenu e, node 当右键点击节点时触发。

方法

名称

参数

描述

beginEdit

target

开始编辑节点。

getSelected

none

获取选中的节点并返回它，如果没有选中节点，则返回 null。
select target 选中一个节点，target 参数表示节点的 DOM 对象。
append param 追加一些子节点到一个父节点，param 参数有两个属性：
parent：DOM 对象，要追加到的父节点，如果没有分配，则追加为根节点。
data：数组，节点的数据。
insert param 在指定节点的前边或后边插入一个节点，param 参数包括下列属性：
before：DOM 对象，前边插入的节点。
after：DOM 对象，后边插入的节点。
data：对象，节点数据。
remove target 移除一个节点和它的子节点，target 参数表示节点的 DOM 对象。 
	<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);
		
	});
	
});

        

4、获取带复选框的树

关联的属性

cascadeCheck

boolean

定义是否级联检查。

true

onlyLeafCheck

boolean

定义是否只在叶节点前显示复选框。

false

方法

名称

参数

描述

getChecked

state

获取选中的节点。状态可用值有：'checked'、'unchecked'、'indeterminate'。如果状态未分配，则返回 'checked' 节点。

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

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(", "));
}

    

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

属性

名称 类型 描述 默认值
url string 获取远程数据的 URL 。 null

事件 

onAfterEdit node 编辑节点后触发。

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）后端

数据库：

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

小问题：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>

   

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

猜你喜欢

转载自blog.csdn.net/qq_42402854/article/details/82956296
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022