easyui里面的加载tree的两种方式
第一种:
符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的
- [{
- "id":1,
- "text":"My Documents",
- "children":[{
- "id":22,
- "text":"Photos",
- "state":"closed",
- "children":[{
- "id":111,
- "text":"Friend"
- },{
- "id":112,
- "text":"Wife"
- },{
- "id":113,
- "text":"Company"
- }]
- },{
- "id":12,
- "text":"Program Files",
- "children":[{
- "id":121,
- "text":"Intel"
- },{
- "id":122,
- "text":"Java",
- "attributes":{
- "p1":"Custom Attribute1",
- "p2":"Custom Attribute2"
- }
- },{
- "id":123,
- "text":"Microsoft Office"
- },{
- "id":124,
- "text":"Games",
- "checked":true
- }]
- },{
- "id":13,
- "text":"index.html"
- },{
- "id":14,
- "text":"about.html"
- },{
- "id":15,
- "text":"welcome.html"
- }]
- }]
第一次看了之后,由于没有思路就给放弃了,就采取了Tree中的老大ZTree,可以问题接踵而至,它与前台的EasyUi有时会发生冲突,没办法最后还是只能采取EasyUi中Tree,仔细分析一下,貌似可以采用算法中的递归来实现,于是乎小编就有了以下的解决思路。
1.先创建一个符合EasyUi中树形格式的类
- /* 树的节点类
- id:节点id,对载入远程数据很重要。
- text:显示在节点的文本。
- state:节点状态,'open' or 'closed',默认为'open'。当设置为'closed'时,拥有子节点的节点将会从远程站点载入它们。
- checked:表明节点是否被选择。
- children:子节点,必须用数组定义。
- */
- public class TreeNode
- {
- public string id { get; set; } //节点的id值
- public string text { get; set; } //节点显示的名称
- public string state { get; set; }//节点的状态
// 请在整个树转换成jsonString时,将字符串Checked换成checked,否则easyui不认
public bool Checked { get; set; } //注意:转成JsonTreeString时,将"Checked"替换成"checked",否则选中效果出不来的
- public List<TreeNode> children { get; set; } //集合属性,可以保存子节点
- }
2.把从后台查出来的对象,转换成为EasyUi中格式
- #region 2.0 将当前组织 对象 转成 树节点对象 +TreeNode ToNode()
- /// <summary>
- /// 将当前组织 对象 转成 树节点对象
- /// </summary>
- /// <returns></returns>
- public TreeNode ToNode()
- {
- TreeNode node = new TreeNode()
- {
- id = this.pid,
- text = this.OrganizationName,
- state = "open",
- Checked = false,
- children = new List<TreeNode>()
- };
- return node;
- }
- #endregion
3.第三步通过递归转换好的树形节点,来找到自己的子节点,然后放到自己默认的属性中
- #region 2.0 将 组织集合 转成 树节点集合 +List<MODEL.EasyUIModel.TreeNode> ToTreeNodes(List<Ou_Permission> listPer)
- /// <summary>
- /// 将 组织集合 转成 树节点集合
- /// </summary>
- /// <param name="listPer"></param>
- /// <returns></returns>
- public static List<TreeNode> ToTreeNodes(List<Organization> listPer)
- {
- List<TreeNode> listNodes = new List<TreeNode>();
- //生成 树节点时,根据 pid=0的根节点 来生成
- LoadTreeNode(listPer, listNodes, "0");
//if (listCurrentPermissions.Count > 0)
//listNodes[0].Checked = false;
SetFathersUnchecked(listNodes, argPId);
- return listNodes;
- }
- #endregion
- #region 3.0 递归组织集合 创建 树节点集合
- /// <summary>
- /// 递归组织集合 创建 树节点集合
- /// </summary>
- /// <param name="listPer">组织集合</param>
- /// <param name="listNodes">节点集合</param>
- /// <param name="pid">节点父id</param>
- public static void LoadTreeNode(List<Organization> listPer, List<TreeNode> listNodes, string pid)
- {
- foreach (var permission in listPer)
- {
- //如果组织父id=参数
- if (permission.pParent == pid)
- {
- //将 组织转成 树节点
- TreeNode node = permission.ToNode();
- //将节点 加入到 树节点集合
- listNodes.Add(node);
- //递归 为这个新创建的 树节点找 子节点
- LoadTreeNode(listPer, node.children, node.id);
- }
- }
- }
- #endregion
public static void SetFathersUnchecked(List<TreeNode> listNodes, string pid)
{
//叶子节点,则取消父节点的勾选状态,让其变成不确定状态 (否则会自动勾选父下的所有节点而显示不正确)
foreach (var node in listNodes)
{
if (node.children.Count > 0)
{
SetFathersUnchecked(node.children, node.id);
if (node.children.Exists(c => c.Checked)//如果节点A下有勾选的子节点,则节点A取消勾选(界面上会自动变成不确定状态)
|| node.children.TrueForAll(c => !c.Checked))//都未勾选,则父取消勾选
node.Checked = false;
}
else
{
//叶子节点
}
}
}
public static class Extensions
{
/// <summary>
/// 转换成Json串,供界面easyui使用
/// </summary>
public static string ToJson(this List<TreeNode> list)
{
string res = DataHelper.Obj2Json(list);
res = res.Replace("\"Checked\"", "\"checked\"");
return res;
}
}
通过以上操作最终就返回了类似树形结构的集合,只要在转换为Json串就OK了,当然也可以采用strbuilder的形式来拼接,但是那样操作起来有点太麻烦了,所以采取了递归的形式。
第二种方式:
前端页面就不用介绍了,现在只介绍后台的代码:
package com.ynbd.apply.entity;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONObject;
/**
* 在easyui中的tree_data.json数据中,只能有一个root节点
*
* [{
* "id":1,
* "text":"folder1",
* "iconCls":"icon-save",
* "children":[{
* "text":"File1",
* "checked":true
* }]
* }]
*
* easyui里面提供静态方法formatTree(List<TreeJson> list)返回结果
*
* TreeJson.formatTree(treeJsonList);
* @author PTTD
*
*/
@SuppressWarnings("serial")
public class TreeJson implements Serializable{
private String id;//节点id
private String pid;//父节点id
private String text;//文本内容,节点里面的内容
private String iconCls;//easyui里面的样式
private String state;//easyui里面节点的状态
private String checked;//easyui里面是否被选中
private JSONObject attribute=new JSONObject();//easyui里面绑定该节点自定义属性
private List<TreeJson> children=new ArrayList<TreeJson>();
//设置TreeJson里面的set/get方法
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getIconCls() {
return iconCls;
}
public void setIconCls(String iconCls) {
this.iconCls = iconCls;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getChecked() {
return checked;
}
public void setChecked(String checked) {
this.checked = checked;
}
public JSONObject getAttribute() {
return attribute;
}
public void setAttribute(JSONObject attribute) {
this.attribute = attribute;
}
public List<TreeJson> getChildren() {
return children;
}
public void setChildren(List<TreeJson> children) {
this.children = children;
}
/*
* 编写里面的方法
*/
public static List<TreeJson> formatTree(List<TreeJson> list){
//定义根节点
TreeJson root=new TreeJson();
//定义子节点
TreeJson node=new TreeJson();
//定义树集合
List<TreeJson> treeList=new ArrayList<TreeJson>();
//定义存放所有父节点的parentNodes
List<TreeJson> parentNodes=new ArrayList<TreeJson>();
if(list.size()>0 && list !=null){
//获取根节点
root=list.get(0);
//循环遍历oracle数据库中所有节点
for( int i = 1 ; i< list.size(); i++ ){
//获取根节点下面的子节点
node =list.get(i);
if(node.getPid().equals(root.getId())){
//为root(根)节点增加子节点
parentNodes.add(node);
root.getChildren().add(node);
}else{
getChildrenNodes(parentNodes, node);
parentNodes.add(node) ;
}
}
}
treeList.add(root);
return treeList;
}
/*
* 循环遍历所有的节点,确定节点与父节点之间的父子关系
*/
public static void getChildrenNodes(List<TreeJson> parentNodes, TreeJson node){
/*
* 循环遍历所有的父节点和node里面的所有节点
*
* for循环里面的循环条件,循环变量的初始化,和循环变量的更新是否可以更改为
* 自增型的,验证完这个以后就验证循环变量的自增型
*/
for(int i=parentNodes.size()-1; i >= 0; i--){
//获取当前的节点
TreeJson pnode=parentNodes.get(i);
if(pnode.getId().equals(node.getPid())){
//将获取出来的子节点添加到相应的父节点里面去
pnode.getChildren().add(node);
//添加子节点后关闭子节点的树形,关闭二级树
pnode.setState("closed");
//退出本次循环
return ;
}else{
/*
* 如果查询出来不是父子关系,就在上一级节点中删除该节点栈
* 里面的当前的节点
*
* 继续循环,直到检查出该节点的子节点或者该节点里面不存在
* 子节点后才退出for循环
*/
parentNodes.remove(i);
}
}
}
}
easyui里面的加载tree的两种方式的更多相关文章
- WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一.加载网络页面 加载网络页面,是最简单的一种方式,只需要传入http的URL就可以,实现WebView加载网络页面 代码如下图: 二.加载本地页面 1.加载asse ...
- [Android] Android ViewPager 中加载 Fragment的两种方式 方式(二)
接上文: https://www.cnblogs.com/wukong1688/p/10693338.html Android ViewPager 中加载 Fragmenet的两种方式 方式(一) 二 ...
- [Android] Android ViewPager 中加载 Fragment的两种方式 方式(一)
Android ViewPager 中加载 Fragmenet的两种方式 一.当fragment里面的内容较少时,直接 使用fragment xml布局文件填充 文件总数 布局文件:view_one. ...
- easyui datagrid加载数据的两种方式
1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- iOS 加载Image的两种方式
Apple官方文档对于加载image提供了两个方法 + (nullable UIImage *)imageNamed:(NSString *)name; + (nullable UIImage *)i ...
- mybatis 加载配置文件的两种方式
package com.atguigu.day03_mybaits.test; import java.io.IOException;import java.io.InputStream;import ...
- JavaScript判断图片是否加载完成的三种方式
JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...
- Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...
随机推荐
- 136. Single Number唯一的数字
[抄题]: Given an array of integers, every element appears twice except for one. Find that single one. ...
- eclipse+hbase开发环境部署
一.前言 1. 前提 因为hbase的运行模式是伪分布式,需要用到hdfs,所以在此之前,我已经完成了hadoop-eclipse的开发环境搭建,详细看另一篇文章:hadoop开发环境部署——通过ec ...
- 在centos6.3_64bit 上的GO语言开发环境搭建
1.下载go安装包 http://golang.org/ go1.2.linux-amd64.tar.gz 2.配置环境变量 3.编写helloworld package main import ...
- spring4-3-AOP-基于配置文件
1.建立业务类和切面类 2.在配置文件中配置bean 引入命名空间:
- 浅谈利用PLSQL的多线程处理机制,加快处理大数据表的效率
我们在处理大数据表的时候经常会感觉的处理速度不够快,效率不够高,那么今天下面我就来简单实现下PLSQL的多线程编程处理数据: 我模拟一个简单的场景,把某一张表中的数据(当然这张表的数据非常大)同步到目 ...
- .net 多线程同步的相关知识点
在多线程开发中,共享对象的同步是经常遇到的问题,以下总结了C#中线程同步的几种技术: 1,InterLocked原子操作 Decrement(ref int location);递减1 Add(ref ...
- DeepLearning 学习资料
1 sotfmax 函数: stanford UFLDL: http://deeplearning.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD ...
- innerText兼容性问题
/* text方法,给网页元素设置文本值的方法 主要处理火狐不支持innerText这个属性的问题. 还学习了如何判断一个字符串类型的属性是否存在 如果判断一个对象类型的属性是否存在,用if(ele. ...
- 微信小程序中使用阿里字体图标
在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...
- NSArray去除重复元素
直接上代码吧! 1.可以创建一个新的数组,对需要去除重复的数组进行遍历,如果新数组不包含就数组,那么添加元素,如果包含就不添加. NSMutableArray *array = [NSMutableA ...