easyui里面的加载tree的两种方式

第一种:

使用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);
}
}
}
}

时间： 2024-10-25 08:06:18

easyui里面的加载tree的两种方式的相关文章

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

接上文: https://www.cnblogs.com/wukong1688/p/10693338.html Android ViewPager 中加载 Fragmenet的两种方式 方式(一) 二.使用Fragment来填充ViewPager Google 官方是建议我们使用Fragment来填充ViewPager的,这样可以更加方便的生成每个Page以及管理 每个Page的生命周期!当然它给我们提供了两个不同的Adapter,他们分别是: FragmentPageAdapter和Fragm

动态加载dex的两种方式

DexClassLoader 加载的类是没有组件生命周期的,也就是说即使DexClassLoader通过对dex的动态加载完成了对组件的加载,当系统启动该组件时,还会出现加载类失败的异常.有两种方式可以解决上面出现的问题: 方法一:http://blog.csdn.net/androidsecurity/article/details/8809542,更改系统的classloader使其为自定义的加载器. 特点:两个dex具有明显的分割线,第一个dex只起启动作用,后面不会出现第一个dex的类加

easyui datagrid加载数据的两种方式

1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id:"2",name:"二"}]}; $('#dg').datagrid('loadData',obj); 注意:这里的数据必须是json对象,要是json字符串,必须先转换成json对象才能作为datagrid的数据源.否则会出现异常:Cannot read proper

iOS 加载Image的两种方式

Apple官方文档对于加载image提供了两个方法 + (nullable UIImage *)imageNamed:(NSString *)name; + (nullable UIImage *)imageWithContentsOfFile:(NSString *)path; 那么这两个方法对于加载图片有什么区别呢,下面我们用序列帧动画来演示这两个方法的区别: 这个程序一共加载了三组序列帧动画: 首先我们使用+ (nullable UIImage *)imageNamed:(NSString

spring加载配置文件的两种方式

一 . <bean id="jdbcProperties" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">       <property name="locations">           <list>               <value>classpath:jdbc.prop

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

一.load事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head>     <meta charset="utf-8">     <title>img - load event</title> </head> <body>     <img id="img1" src=&qu

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

JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head>     <meta charset="utf-8">     <title>img - load event</title>

[Android] Android ViewPager 中加载 Fragmenet的几种方式

Android ViewPager 中加载 Fragmenet的几种方式 1.当fragment里面的内容较少时,可以利用加载view 的方法来进行: private List<View> viewList; //在onCreate方法里面添加  viewList = new ArrayList<View>();        View view1 = View.inflate(this, R.layout.view1, null);        View view2 = Vie

EasyUI实现异步加载tree(整合Struts2)

首先jsp页面有一ul用于展现Tree <ul id="mytree"></ul> 加载Tree <script type="text/javascript"> $('#mytree').tree({ url:'treeLoad.action' }); </script> 配置Action <struts> <package name="tree_json" extends=&qu