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

第一种:

使用EasyUI中Tree

符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的
[{
"id":,
"text":"My Documents",
"children":[{
"id":,
"text":"Photos",
"state":"closed",
"children":[{
"id":,
"text":"Friend"
},{
"id":,
"text":"Wife"
},{
"id":,
"text":"Company"
}]
},{
"id":,
"text":"Program Files",
"children":[{
"id":,
"text":"Intel"
},{
"id":,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":,
"text":"Microsoft Office"
},{
"id":,
"text":"Games",
"checked":true
}]
},{
"id":,
"text":"index.html"
},{
"id":,
"text":"about.html"
},{
"id":,
"text":"welcome.html"
}]
}] 第一次看了之后,由于没有思路就给放弃了,就采取了Tree中的老大ZTree,可以问题接踵而至,它与前台的EasyUi有时会发生冲突,没办法最后还是只能采取EasyUi中Tree,仔细分析一下,貌似可以采用算法中的递归来实现,于是乎小编就有了以下的解决思路。 .先创建一个符合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; } //集合属性,可以保存子节点
} .把从后台查出来的对象,转换成为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 .第三步通过递归转换好的树形节点,来找到自己的子节点,然后放到自己默认的属性中
#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, "");         //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 > )
{
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()> && list !=null){
//获取根节点
root=list.get();
//循环遍历oracle数据库中所有节点
for( int i = ; 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()-; i >= ; 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. easyui中tree控件添加自定义图标icon

    来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...

  2. 做权限树时 使用EasyUI中Tree

    符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...

  3. easyui中tree型控件不正常显示的处理方法

    我在使用easyui中的tree控件时,出现不正常显示的现象,比如li中不能使用自定义的图标.父级展开或关闭时,其子级仍然显现并出现重叠等.找了很多资料,都没解决这个问题,后来逐个对照官方的源码,才找 ...

  4. Easyui中tree组件实现搜索定位功能及展开节点定位

    这几天遇到个input + tree  实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果     小二 上图  : 需要的部件知识: easyui ...

  5. easyUI中tree的简单使用

    一.在JS中的代码 $('#tt').tree({ url: baseCtx + 'lib/easyui-1.4/demo/tree/tree_data1.json',//tree数据的来源,json ...

  6. easyui中tree使用simpleData的形式加载数据

    了解了zTree的使用, 发现它的simpleData是非常好用的, 由后台返回一个扁平数据, 直接在前台解析成树形菜单, 网上查了一下, easyui也可以简单实现, 不过....没看懂, 先记录一 ...

  7. EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题

    // 获取选中一行的情况,下面的一个参数可以代表一个DataGridfunction getSelected(dialogEle,dataFileTextEle) { // 获取选中一行的情况. va ...

  8. PHP 使用编码树,生成easyui中的tree样式

    生成树的时候,数据库中一般设计的都为无级数,即为:父子节点的树,例如:基本的数据表设计为: nodecode 节点编码 parentnodecode 父节点编码 nodename  节点名称 这样的形 ...

  9. 修改EsayUi 中 tree 的原有样式,变为according 之类的样式 ,且子菜单显示在右侧

    easyUi 中 tree 框架的属性有: 修改原有展开样式代码如下: onExpand:function(node,param){ $(this).children("li"). ...

随机推荐

  1. ES5-bind用法及与以前的apply和call

    当我们调用一个函数的时候,函数中的this一般是指向调用者的.但是我们其实可以在调用函数的时候,传入一个对象,让函数中的this指向我们传入的对象,而不是调用者本身. apply,call,bind都 ...

  2. 关于vscode的配置

    Git插件 通过GitLens -- Git supercharged可以很方便的查看历史作者 Setting.json(谨慎使用,因为对import进行排序改变后可能导致类的循环引用,因此不要轻易改 ...

  3. 【剑指Offer面试编程题】题目1508:把字符串转换成整数--九度OJ

    题目描述: 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 输入: 输入可能包含多个测试样例. 对于每个测试案例,输入为一个合法或者非法的字符串,代表一个整数n(1<= n&l ...

  4. 夯实Java基础(二十五)——JDBC使用详解

    1.JDBC介绍 JDBC的全称是Java Data Base Connectivity(Java数据库连接).是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问(例如MyS ...

  5. lc 0226

    目录 ✅ 232. 用栈实现队列 描述 解答 c py ✅ 496. 下一个更大元素 I 描述 解答 java another java ✅ 232. 用栈实现队列 https://leetcode- ...

  6. Update(Stage5):Kudu入门_项目介绍_ CDH搭建

    Kudu 导读 什么是 Kudu 操作 Kudu 如何设计 Kudu 的表 Table of Contents 1. 什么是 Kudu 1.1. Kudu 的应用场景 1.2. Kudu 和其它存储工 ...

  7. rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题

    rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...

  8. 8.1.2hadoop Streaming 作业原理和参数设置

    1.1.1         Stream 作业 (1)hadoop streaming Hadoop streaming是hadoop的一个工具,用于运行费java的maper或reducer作业,例 ...

  9. SQL模糊匹配之正则表达式

    −      方括号[ ]:指定一个字符.字符串.匹配他们中的任意一个. −      示例1:查询用户名以J或者以M开头的用户信息 −      SELECT user_name FROM ecs_ ...

  10. 吴裕雄--天生自然ORACLE数据库学习笔记:SQL语言基础

    select empno,ename,sal from scott.emp; SELECT empno,ename,sal FROM scott.emp; selECT empno,ename,sal ...