EasyUi（2）

最新推荐文章于 2022-07-07 14:50:01 发布
最新推荐文章于 2022-07-07 14:50:01 发布
阅读量164 收藏
点赞数
分类专栏： Easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lzxccas/article/details/106893410
版权

EasyUi2

前言

今天我们来学习 EasyUi 中的 Tree（树）;

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

在这里插入图片描述

普通我们写一个树形结构的功能需要这样写 一层一层套进去 代码多还杂

在这里插入图片描述
树控件也可以定义在一个空

  • 元素中并使用Javascript加载数据。

只需要 在页面上写上 再引用就行

<script type="text/javascript"
 src="${pageContext.request.contextPath }/static/js/index.js"></script> 

<ul id="tt"></ul>

在这里插入图片描述
在写一个json文件

在这里插入图片描述
在js里面写个index.js文件调用就行
在这里插入图片描述

tree后台实现

我们的目标是

在这里插入图片描述

先写一个案例测试下

TreeVOone 实体类

package com.zhuchenxi.vo;

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

public class TreeVOone {

	private String id;
	private String text;
	private List<TreeVOone> children = new ArrayList<TreeVOone>();
	private String pid;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public List<TreeVOone> getChildren() {
		return children;
	}
	public void setChildren(List<TreeVOone> children) {
		this.children = children;
	}
	public String getPid() {
		return pid;
	}
	public void setPid(String pid) {
		this.pid = pid;
	}
	public TreeVOone(String id, String text, List<TreeVOone> children, String pid) {
		super();
		this.id = id;
		this.text = text;
		this.children = children;
		this.pid = pid;
	}
	@Override
	public String toString() {
		return "TreeVOone [id=" + id + ", text=" + text + ", children=" + children + ", pid=" + pid + "]";
	}
	
	public TreeVOone() {
		// TODO Auto-generated constructor stub
	}
	public TreeVOone(String id, String text, String pid) {
		super();
		this.id = id;
		this.text = text;
		this.pid = pid;
	}
	
	
}

TreeVOText

package com.zhuchenxi.vo;

import java.util.List;
import org.junit.Test;


import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class TreeVOText {

	@Test
	public void test() throws JsonProcessingException {
		TreeVOone  o = new TreeVOone("1","my documents","-1");
		TreeVOone  o1 = new TreeVOone("11","photos","1");
		TreeVOone  o2 = new TreeVOone("12","program files","1");
		TreeVOone  o3 = new TreeVOone("13","index.html","1");
		TreeVOone  o4 = new TreeVOone("14","about.html","1");
		TreeVOone  o5 = new TreeVOone("15","welcome.html","1");
		
		List<TreeVOone> parent = o.getChildren();
		
		parent.add(o1);
		parent.add(o2);
		parent.add(o3);
		parent.add(o4);
		parent.add(o5);
		
		ObjectMapper  om = new ObjectMapper();
		String jsonStr = om.writeValueAsString(o);
		System.out.println(jsonStr);
	}
	
}

输出出来是这样的

{"id":"1","text":"my documents","children":[{"id":"11","text":"photos","children":[],"pid":"1"},{"id":"12","text":"program files","children":[],"pid":"1"},{"id":"13","text":"index.html","children":[],"pid":"1"},{"id":"14","text":"about.html","children":[],"pid":"1"},{"id":"15","text":"welcome.html","children":[],"pid":"1"}],"pid":"-1"}

这样不好辨认 我们去

JSON在线解析

解析下得到

在这里插入图片描述

解析表 t_easyui_Permission

这是数据库的样子

在这里插入图片描述

先用一个写好的助手类 TreeVo

每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

package com.zhuchenxi.vo;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;


public class TreeVo<T> {
	/**
	 * 节点ID
	 */
	private String id;
	/**
	 * 显示节点文本
	 */
	private String text;
	/**
	 * 节点状态，open closed
	 */
	private Map<String, Object> state;
	/**
	 * 节点是否被选中 true false
	 */
	private boolean checked = false;
	/**
	 * 节点属性
	 */
	private Map<String, Object> attributes;

	/**
	 * 节点的子节点
	 */
	private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();

	/**
	 * 父ID
	 */
	private String parentId;
	/**
	 * 是否有父节点
	 */
	private boolean hasParent = false;
	/**
	 * 是否有子节点
	 */
	private boolean hasChildren = false;

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Map<String, Object> getState() {
		return state;
	}

	public void setState(Map<String, Object> state) {
		this.state = state;
	}

	public boolean isChecked() {
		return checked;
	}

	public void setChecked(boolean checked) {
		this.checked = checked;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<TreeVo<T>> getChildren() {
		return children;
	}

	public void setChildren(List<TreeVo<T>> children) {
		this.children = children;
	}

	public boolean isHasParent() {
		return hasParent;
	}

	public void setHasParent(boolean isParent) {
		this.hasParent = isParent;
	}

	public boolean isHasChildren() {
		return hasChildren;
	}

	public void setChildren(boolean isChildren) {
		this.hasChildren = isChildren;
	}

	public String getParentId() {
		return parentId;
	}

	public void setParentId(String parentId) {
		this.parentId = parentId;
	}

	public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.hasParent = isParent;
		this.hasChildren = isChildren;
		this.parentId = parentID;
	}

	public TreeVo() {
		super();
	}

}

实体类 Permission 要和数据库一样

package com.zhuchenxi.entity;

public class Permission {

	private long id;
	private String name;
	private String description;
	private String url;
	private long pid;
	private int ismenu;
	private long displayno;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getDescription() {
		return description;
	}
	public void setDescription(String description) {
		this.description = description;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
	public long getPid() {
		return pid;
	}
	public void setPid(long pid) {
		this.pid = pid;
	}
	public int getIsmenu() {
		return ismenu;
	}
	public void setIsmenu(int ismenu) {
		this.ismenu = ismenu;
	}
	public long getDisplayno() {
		return displayno;
	}
	public void setDisplayno(long displayno) {
		this.displayno = displayno;
	}
	public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
		super();
		this.id = id;
		this.name = name;
		this.description = description;
		this.url = url;
		this.pid = pid;
		this.ismenu = ismenu;
		this.displayno = displayno;
	}
	@Override
	public String toString() {
		return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
				+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
	}
	
	public Permission() {
		// TODO Auto-generated constructor stub
	}
	
}

导入我们的助手类和包 然后继承BaseDao 写个方法测试下

package com.zhuchenxi.dao;

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

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zhuchenxi.entity.Permission;
import com.zhuchenxi.util.BaseDao;
import com.zhuchenxi.util.BuildTree;
import com.zhuchenxi.util.PageBean;
import com.zhuchenxi.vo.TreeVo;

public class PermissionDao extends BaseDao<Permission> {

	public List<Permission> list(Permission permission,PageBean pageBean) throws Exception {
		
		String sql="select * from t_easyui_Permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}
	
	public static void main(String[] args) throws Exception {
		PermissionDao pd = new PermissionDao();
		List<Permission> list = pd.list(null, null);
		
//		通过工具类完成指定格式的输出
		List<TreeVo<Permission>> nodes = new ArrayList<TreeVo<Permission>>();
//		Permission的格式不满足easyui的tree组件的展现的数据格式的
//		将List<Permission>转换成<TreeVo<T>>
//		实现，将List<Permission>得到的单个permission转成TreeVo，将Treev加入到nodes
		
		TreeVo treeVo = null;
		
		for (Permission p : list) {
			treeVo = new TreeVo<>();
			treeVo.setId(p.getId()+"");
			treeVo.setText(p.getName());
			treeVo.setParentId(p.getPid()+"");
//			Map<String, Object> attributes = new HashMap<String, Object>();
//			attributes.put("self", p);
//			treeVo.setAttributes(attributes);
			nodes.add(treeVo);
		}
		
		TreeVo<Permission> parent = BuildTree.build(nodes);
		ObjectMapper om = new ObjectMapper();
		String jsonstr = om.writeValueAsString(parent);
		System.out.println(jsonstr);
		
		
	}
}

输出是这样也得转一下

{"id":"000","text":"椤剁骇鑺傜偣","state":{"opened":true},"checked":true,"attributes":null,"children":[{"id":"1","text":"书籍管理","state":null,"checked":false,"attributes":null,"children":[{"id":"2","text":"新增（crud）","state":null,"checked":false,"attributes":null,"children":[],"parentId":"1","hasParent":true,"hasChildren":false},{"id":"3","text":"未上架","state":null,"checked":false,"attributes":null,"children":[],"parentId":"1","hasParent":true,"hasChildren":false},{"id":"4","text":"已上架","state":null,"checked":false,"attributes":null,"children":[],"parentId":"1","hasParent":true,"hasChildren":false},{"id":"5","text":"已下架","state":null,"checked":false,"attributes":null,"children":[],"parentId":"1","hasParent":true,"hasChildren":false}],"parentId":"0","hasParent":false,"hasChildren":true},{"id":"6","text":"订单管理","state":null,"checked":false,"attributes":null,"children":[{"id":"7","text":"未发货","state":null,"checked":false,"attributes":null,"children":[],"parentId":"6","hasParent":true,"hasChildren":false},{"id":"8","text":"已发货","state":null,"checked":false,"attributes":null,"children":[],"parentId":"6","hasParent":true,"hasChildren":false},{"id":"9","text":"已签收","state":null,"checked":false,"attributes":null,"children":[],"parentId":"6","hasParent":true,"hasChildren":false},{"id":"14","text":"订单项","state":null,"checked":false,"attributes":null,"children":[],"parentId":"6","hasParent":true,"hasChildren":false}],"parentId":"0","hasParent":false,"hasChildren":true},{"id":"10","text":"订单管理","state":null,"checked":false,"attributes":null,"children":[{"id":"11","text":"未发货","state":null,"checked":false,"attributes":null,"children":[],"parentId":"10","hasParent":true,"hasChildren":false},{"id":"12","text":"已发货","state":null,"checked":false,"attributes":null,"children":[],"parentId":"10","hasParent":true,"hasChildren":false},{"id":"13","text":"已签收","state":null,"checked":false,"attributes":null,"children":[],"parentId":"10","hasParent":true,"hasChildren":false}],"parentId":"0","hasParent":false,"hasChildren":true}],"parentId":"-1","hasParent":false,"hasChildren":true}

转出来

{
	"id": "000",
	"text": "椤剁骇鑺傜偣",
	"state": {
		"opened": true
	},
	"checked": true,
	"attributes": null,
	"children": [{
		"id": "1",
		"text": "书籍管理",
		"state": null,
		"checked": false,
		"attributes": null,
		"children": [{
			"id": "2",
			"text": "新增（crud）",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "3",
			"text": "未上架",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "4",
			"text": "已上架",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "5",
			"text": "已下架",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false
		}],
		"parentId": "0",
		"hasParent": false,
		"hasChildren": true
	}, {
		"id": "6",
		"text": "订单管理",
		"state": null,
		"checked": false,
		"attributes": null,
		"children": [{
			"id": "7",
			"text": "未发货",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "6",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "8",
			"text": "已发货",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "6",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "9",
			"text": "已签收",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "6",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "14",
			"text": "订单项",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "6",
			"hasParent": true,
			"hasChildren": false
		}],
		"parentId": "0",
		"hasParent": false,
		"hasChildren": true
	}, {
		"id": "10",
		"text": "订单管理",
		"state": null,
		"checked": false,
		"attributes": null,
		"children": [{
			"id": "11",
			"text": "未发货",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "10",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "12",
			"text": "已发货",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "10",
			"hasParent": true,
			"hasChildren": false
		}, {
			"id": "13",
			"text": "已签收",
			"state": null,
			"checked": false,
			"attributes": null,
			"children": [],
			"parentId": "10",
			"hasParent": true,
			"hasChildren": false
		}],
		"parentId": "0",
		"hasParent": false,
		"hasChildren": true
	}],
	"parentId": "-1",
	"hasParent": false,
	"hasChildren": true
}

在这里插入图片描述

是不是很接近了 今天的分想就到這了

沿途为何没爱河
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI2-数据绑定&分页
weixin_50624008的博客
04-12 562
easyui数据绑定（查询）&分页
Easyui EasyLoader（加载器）用法
tnjun123456的专栏
03-05 8208
这个组件主要是为了easyui的其他组件的按需加载而出生。那么什么情况下会用到他呢。 第一，你觉得一次性导入easyui的核心min Js和css太大 第二，你只用到easyui的其中几个组件 第三，你想使用其中的一个组件，但是你又不知道这个组件依赖了那些组件。 如果你有以上三中情况，那么推荐你使用easyLoader。它正是为了解决这些而存在的。 easyloader有7个属性
easyui2
only老K的博客 qq:1025271924
07-29 152
在easyui1的基础上实现权限设置 二星权限设计（用户权限多对多） 1、执行数据库脚本 2、修改原有的实体类 3、建立实体类 4、创建dao 5、修改原有的dao 6、新增web的方法 7、新增登入界面，跳入前端树形菜单 项目大体结构如下： 在easyui1的基础上新加了一点 直接提供代码： index.jsp <%@ page language="java" contentType="...
EasyUI2
扬 帆 起 航ing
02-15 154
http://www.jeasyui.com/demo/index.php 1.draggable droppable http://www.jeasyui.com/tutorial/dd/dnd3_demo.html   &lt;form id="form1" runat="server"&gt; &lt;div class="drag-item" style=" width:...
java源码 EasyUI-2 后台框架(仅供参考) 2018127
12-07
java源码 EasyUI-2 后台框架(仅供参考) .
EasyUI简介
qq_63845026的博客
04-05 3832
目录 一：EasyUI是什么? 二: EasyUI如何使用? 三.总结 EasyUI是什么? 1.easyui是一种基于jQuery、Angular.、Vue和Re...
easyui dialog 按钮居中
weixin_42239949的博客
09-09 1029
easyui dialog 按钮居中 在html文件中增加样式： <style type="text/css"> .dialog-button { padding: 5px; text-align: center; } </style>
easyui
weixin_67677668的博客
05-04 1272
http://www.jeasyui.net/（中文网） http://www.jeasyui.com/（英文版） EasyUI官方下载地址：http://www.jeasyui.com/download/index.php 常见UI： Layui，Bootstrap，element ui,ant design,iview vue 前后端分离 1.什么是easyui？ easyui是一种基于jQuery的用户界面插件集合 2.easyui能带给我们什么好处？ 1）easyui是个完美支持H...
EasyUI datagrid 排序
weixin_40293364的博客
07-07 4061
如果需要设置默认排序状态，可以使用datagrid的sortName、sortOrder属性设置默认，如果多个列之间有依赖顺序关系，可以开启multiSort，如果多个列之间没有关系，且独立，不想更改都判断多个属性的状态，建议使用columns属性的sortable、order。...
easyui蓝色2
12-26
【标题】"easyui蓝色2" 是一个基于EasyUI框架的网页界面设计资源，它提供了蓝色调的皮肤组件。EasyUI是一款基于jQuery的用户界面插件集合，它可以帮助开发者快速构建具有专业外观的Web应用程序界面。 【描述】"漂亮...
EasyUI项目
07-07
本项目采用struts2+JDBC+easyui进行编写，对easyui各个组件进行详细介绍。 由于水平有限,项目bug在所难免,欢迎指正。 博文参考地址：http://blog.csdn.net/itmyhome1990/article/details/37502601 使用方法： 1、...
jqueryEasyUI
07-16
2. **准备 HTML 结构**：按照 EasyUI 的组件规范编写 HTML 结构，添加必要的类名和属性。 3. **初始化组件**：通过 JavaScript 或 jQuery 选择器对元素进行初始化，调用相应的组件方法。 4. **绑定事件**：根据需要...
easyui框架
03-30
2. **JavaScript 控制**：为了实现动态效果和交互，JavaScript 文件会利用 jQuery 和 EasyUI 的 API 进行操作。例如，`$(function() {...})` 是 jQuery 的文档加载完成后的回调函数，里面可能会有初始化组件、绑定...
EasyUi使用
04-15
2. **数据绑定**：EasyUI 支持与后端数据源的直接绑定，例如，`datagrid` 可以直接绑定到 JSON 数据或服务器接口，实现动态加载和分页，无需手动处理数据的获取和更新。 3. **主题系统**：EasyUI 提供了一套完整的...
Uncaught TypeError: Cannot read property ‘isparent‘ of undefined at HTMLUListElement.onClick (ma
心猿问道的博客
12-10 561
报错： Uncaught TypeError: Cannot read property 'isparent' of undefined at HTMLUListElement.onClick (main.jsp:22) at HTMLUListElement.<anonymous> (jquery.easyui.min.js:1416) at HTMLUListElement.dispatch (jquery.min.js:3) at HTMLUListEle...
EasyUi之Dialog（对话框窗口）
Lzxccas的博客
06-28 4001
Dialog（对话框窗口）Dialog（对话框窗口）+Window（窗口）+Panel（面板）Dialog属性Dialog事件+方法Window属性,事件,方法Panel属性,事件,方法案列 实现过程 Dialog（对话框窗口）+Window（窗口）+Panel（面板） 今天我们涉及到的内容较多 我们一个一个整理 但我们着重学习的还是Dialog 该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collaps
EasyUi之Tabs(选项卡)
Lzxccas的博客
06-24 2110
Tabs控件什么是TabsTabs的使用案例Tabs的属性Tabs的事件Tabs的方法Tabs面板创建一个选项卡右键关闭tabs 什么是Tabs 选项卡是最流行的导航模式之一(与菜单栏和垂直导航一样)。 选项卡最大的优点是用户很熟悉，而且经常是持久的内容，所以即使用户在网站或应用程序中跳出刚浏览过的内容，他们也不会迷失。 官方示例 成品示例 Tabs的使用案例 通过标签创建选项卡 通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给标签添加一个类ID’easyui-ta
EasyUi之DataGrid（数据表格）
Lzxccas的博客
06-25 975
DataGrid（数据表格）简介DataGrid属性事件方法案例 简介 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 EasyUi学习文档光网链接：EasyUI Datagrid 数据网格 成品展示 DataGrid属性 事件 方法 案例 目标 这里有三种方式 这是前两种 我们要使用
Easyui
Lzxccas的博客
06-20 172
EasyUI简介我们为什么要学习easyui案例 简介 全称为jQueryEasyUI，是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。 官网链接 我们为什么要学习easyui 现在ui框架这一块还有 名称 上线时间 是否收费 easyui 2016 不收费 bootstrap
全面解析：easyUI 使用指南
2. 基础引入路径 - 引入 CSS 文件的顺序是：`easyui/themes/default/easyui.css`, `easyui/themes/icon.css`, `easyui/demo/demo.css`。 - JavaScript 文件的引入顺序也很关键，首先是 jQuery（`jquery.min.js`）...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值