第一种:

符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的

  1. [{
  2. "id":1,
  3. "text":"My Documents",
  4. "children":[{
  5. "id":22,
  6. "text":"Photos",
  7. "state":"closed",
  8. "children":[{
  9. "id":111,
  10. "text":"Friend"
  11. },{
  12. "id":112,
  13. "text":"Wife"
  14. },{
  15. "id":113,
  16. "text":"Company"
  17. }]
  18. },{
  19. "id":12,
  20. "text":"Program Files",
  21. "children":[{
  22. "id":121,
  23. "text":"Intel"
  24. },{
  25. "id":122,
  26. "text":"Java",
  27. "attributes":{
  28. "p1":"Custom Attribute1",
  29. "p2":"Custom Attribute2"
  30. }
  31. },{
  32. "id":123,
  33. "text":"Microsoft Office"
  34. },{
  35. "id":124,
  36. "text":"Games",
  37. "checked":true
  38. }]
  39. },{
  40. "id":13,
  41. "text":"index.html"
  42. },{
  43. "id":14,
  44. "text":"about.html"
  45. },{
  46. "id":15,
  47. "text":"welcome.html"
  48. }]
  49. }]

第一次看了之后,由于没有思路就给放弃了,就采取了Tree中的老大ZTree,可以问题接踵而至,它与前台的EasyUi有时会发生冲突,没办法最后还是只能采取EasyUi中Tree,仔细分析一下,貌似可以采用算法中的递归来实现,于是乎小编就有了以下的解决思路。

1.先创建一个符合EasyUi中树形格式的类

  1. /* 树的节点类
  2. id:节点id,对载入远程数据很重要。
  3. text:显示在节点的文本。
  4. state:节点状态,'open' or 'closed',默认为'open'。当设置为'closed'时,拥有子节点的节点将会从远程站点载入它们。
  5. checked:表明节点是否被选择。
  6. children:子节点,必须用数组定义。
  7. */
  8. public class TreeNode
  9. {
  10. public string id { get; set; } //节点的id值
  11. public string text { get; set; } //节点显示的名称
  12. public string state { get; set; }//节点的状态

// 请在整个树转换成jsonString时,将字符串Checked换成checked,否则easyui不认

public bool Checked { get; set; } //注意:转成JsonTreeString时,将"Checked"替换成"checked",否则选中效果出不来的

  1. public List<TreeNode> children { get; set; } //集合属性,可以保存子节点
  2. }

2.把从后台查出来的对象,转换成为EasyUi中格式

  1. #region 2.0 将当前组织 对象 转成 树节点对象 +TreeNode ToNode()
  2. /// <summary>
  3. /// 将当前组织 对象 转成 树节点对象
  4. /// </summary>
  5. /// <returns></returns>
  6. public TreeNode ToNode()
  7. {
  8. TreeNode node = new TreeNode()
  9. {
  10. id = this.pid,
  11. text = this.OrganizationName,
  12. state = "open",
  13. Checked = false,
  14. children = new List<TreeNode>()
  15. };
  16. return node;
  17. }
  18. #endregion

3.第三步通过递归转换好的树形节点,来找到自己的子节点,然后放到自己默认的属性中

  1. #region 2.0 将 组织集合 转成 树节点集合 +List<MODEL.EasyUIModel.TreeNode> ToTreeNodes(List<Ou_Permission> listPer)
  2. /// <summary>
  3. /// 将 组织集合 转成 树节点集合
  4. /// </summary>
  5. /// <param name="listPer"></param>
  6. /// <returns></returns>
  7. public static List<TreeNode> ToTreeNodes(List<Organization> listPer)
  8. {
  9. List<TreeNode> listNodes = new List<TreeNode>();
  10. //生成 树节点时,根据 pid=0的根节点 来生成
  11. LoadTreeNode(listPer, listNodes, "0");

        //if (listCurrentPermissions.Count > 0)
        //listNodes[0].Checked = false;

        SetFathersUnchecked(listNodes, argPId);

  1. return listNodes;
  2. }
  3. #endregion
  4.  
  5. #region 3.0 递归组织集合 创建 树节点集合
  6. /// <summary>
  7. /// 递归组织集合 创建 树节点集合
  8. /// </summary>
  9. /// <param name="listPer">组织集合</param>
  10. /// <param name="listNodes">节点集合</param>
  11. /// <param name="pid">节点父id</param>
  12. public static void LoadTreeNode(List<Organization> listPer, List<TreeNode> listNodes, string pid)
  13. {
  14. foreach (var permission in listPer)
  15. {
  16. //如果组织父id=参数
  17. if (permission.pParent == pid)
  18. {
  19. //将 组织转成 树节点
  20. TreeNode node = permission.ToNode();
  21. //将节点 加入到 树节点集合
  22. listNodes.Add(node);
  23. //递归 为这个新创建的 树节点找 子节点
  24. LoadTreeNode(listPer, node.children, node.id);
  25. }
  26. }
  27. }
  28. #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的两种方式的更多相关文章

  1. WebView加载页面的两种方式——网络页面和本地页面

    WebView加载页面的两种方式 一.加载网络页面 加载网络页面,是最简单的一种方式,只需要传入http的URL就可以,实现WebView加载网络页面 代码如下图: 二.加载本地页面 1.加载asse ...

  2. [Android] Android ViewPager 中加载 Fragment的两种方式 方式(二)

    接上文: https://www.cnblogs.com/wukong1688/p/10693338.html Android ViewPager 中加载 Fragmenet的两种方式 方式(一) 二 ...

  3. [Android] Android ViewPager 中加载 Fragment的两种方式 方式(一)

    Android ViewPager 中加载 Fragmenet的两种方式 一.当fragment里面的内容较少时,直接 使用fragment xml布局文件填充 文件总数 布局文件:view_one. ...

  4. easyui datagrid加载数据的两种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  5. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  6. iOS 加载Image的两种方式

    Apple官方文档对于加载image提供了两个方法 + (nullable UIImage *)imageNamed:(NSString *)name; + (nullable UIImage *)i ...

  7. mybatis 加载配置文件的两种方式

    package com.atguigu.day03_mybaits.test; import java.io.IOException;import java.io.InputStream;import ...

  8. JavaScript判断图片是否加载完成的三种方式

    JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...

  9. Vue加载组件、动态加载组件的几种方式

    https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...

随机推荐

  1. 136. Single Number唯一的数字

    [抄题]: Given an array of integers, every element appears twice except for one. Find that single one. ...

  2. eclipse+hbase开发环境部署

    一.前言 1. 前提 因为hbase的运行模式是伪分布式,需要用到hdfs,所以在此之前,我已经完成了hadoop-eclipse的开发环境搭建,详细看另一篇文章:hadoop开发环境部署——通过ec ...

  3. 在centos6.3_64bit 上的GO语言开发环境搭建

    1.下载go安装包 http://golang.org/ go1.2.linux-amd64.tar.gz   2.配置环境变量 3.编写helloworld package main import ...

  4. spring4-3-AOP-基于配置文件

    1.建立业务类和切面类 2.在配置文件中配置bean 引入命名空间:

  5. 浅谈利用PLSQL的多线程处理机制,加快处理大数据表的效率

    我们在处理大数据表的时候经常会感觉的处理速度不够快,效率不够高,那么今天下面我就来简单实现下PLSQL的多线程编程处理数据: 我模拟一个简单的场景,把某一张表中的数据(当然这张表的数据非常大)同步到目 ...

  6. .net 多线程同步的相关知识点

    在多线程开发中,共享对象的同步是经常遇到的问题,以下总结了C#中线程同步的几种技术: 1,InterLocked原子操作 Decrement(ref int location);递减1 Add(ref ...

  7. DeepLearning 学习资料

    1 sotfmax 函数: stanford UFLDL: http://deeplearning.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD ...

  8. innerText兼容性问题

    /* text方法,给网页元素设置文本值的方法 主要处理火狐不支持innerText这个属性的问题. 还学习了如何判断一个字符串类型的属性是否存在 如果判断一个对象类型的属性是否存在,用if(ele. ...

  9. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  10. NSArray去除重复元素

    直接上代码吧! 1.可以创建一个新的数组,对需要去除重复的数组进行遍历,如果新数组不包含就数组,那么添加元素,如果包含就不添加. NSMutableArray *array = [NSMutableA ...