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 ...
随机推荐
- Ros学习——Cmakelists.txt文件解读
1.过程 .Required CMake Version (cmake_minimum_required) //CMake 需要的版本 .Package Name (project()) //#定义工 ...
- 764. Largest Plus Sign最大的dfs十字架
[抄题]: 求挖掉一些区域后,能允许出现的最大十字架 In a 2D grid from (0, 0) to (N-1, N-1), every cell contains a 1, except t ...
- "分辨率"到底是个什么概念?它和DPI之间是什么关系?
"分辨率"到底是个什么概念?它和DPI之间是什么关系? 分辨率:显示分辨率(屏幕分辨率)是屏幕图像的精密度,是指显示器所能显示的像素有多少.由于屏幕上的点.线和面都是由像素组成的, ...
- Flip
Flip是一个能够让任意HTML.文本或jQuery Element产生漂亮翻转效果的jQuery插件. 可以配置翻转方向:从右到左.上到下或从左到右.下到上.翻转的速度也可以配置. 效果如下图所示: ...
- scp 的时候提示WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
摘自:https://blog.csdn.net/haokele/article/details/72824847 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...
- Redhat9.0+Apache1.3.29+Mysql3.23.58+PHP4.3.4
Redhat9.0+Apache1.3.29+Mysql3.23.58+PHP4.3.4 TAG标签: 摘要:红帽创建于1993年,是目前世界上最资深的Linux和开放源代码提供商,同时也是最获认可的 ...
- NSPredicate过滤数组数据
NSPredicate编写软件时,经常需要获取一个对象集合,然后删除不满足条件的对象,保留符合条件的对象,从而提供一些有意义的对象.Cocoa提供了一个名为NSPredicate的类,他用于指定过滤器 ...
- iOS Programming Recipe 6: Creating a custom UIView using a Nib
iOS Programming Recipe 6: Creating a custom UIView using a Nib JANUARY 7, 2013 BY MIKETT 12 COMMENTS ...
- .NET基础 (07)异常的处理
异常的处理1 如何针对不同的异常进行捕捉2 如何使用Conditional特性3 如何避免类型转换时的异常 异常的处理 1 如何针对不同的异常进行捕捉 C#中一个try块可以有多个catch块,每个c ...
- 9.29学习的js基础
js基础 1.三种js引入方式 a).<input type="button" value="点击事件" onClick="documen ...