符合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的形式来拼接,但是那样操作起来有点太麻烦了,所以采取了递归的形式。

 

做权限树时 使用EasyUI中Tree的更多相关文章

  1. 使用EasyUI中Tree

    easyui里面的加载tree的两种方式 第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ , "text":&qu ...

  2. easyui中tree控件添加自定义图标icon

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

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

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

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

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

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

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

  6. easyUI中tree的简单使用

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

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

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

  8. 第二百二十六节,jQuery EasyUI,Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...

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

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

随机推荐

  1. SG函数

    入门一: 首先来玩个游戏,引用杭电课件上的: (1) 玩家:2人:(2) 道具:23张扑克牌:(3) 规则:游戏双方轮流取牌:每人每次仅限于取1张.2张或3张牌:扑克牌取光,则游戏结束:最后取牌的一方 ...

  2. NeHe OpenGL教程 第十三课:图像字体

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  3. studio_ 优化Android Studio 启动、编译和运行速度?

    http://www.admin10000.com/document/6842.html: 作为一名 Android 程序员,选择一个好的 IDE 工具可以使开发变得非常高效,很多程序员喜欢使用 Go ...

  4. Makefile Shell 脚本;sed命令

    1. 在Makefile中想使用shell脚本,需要添加"@"符号,例如: @if [ -d xxx ]; then \                        //-d 判 ...

  5. Document root element "configuration", must match DOCTYPE root "mapper".

    最近剛剛鼓搗mybatis , 第一個demo就出了問題.其實原因是因為將mapper中的頭copy到了configuration里去了 <?xml version="1.0" ...

  6. 怎么安装phpcms?PHPCMS V9安装图文教程

    Phpcms是国内领先的网站内容管理系统, 同时也是一个开源的PHP开发框架.PHPCMS V9目前已提供文章.图片.下载等内容模型,在此基础上可非常方便的扩展出信息.房产.交友.点评等功能.已有的模 ...

  7. Sql Server Text 类型列 查询和更新

    Text(ntext.image)类型为大数据字段,因为存储方式不同,也决定了其查询和更新不同于一般方法. 1.表定义: 2.查询: Like查询是可用的: select * from dbo.nod ...

  8. 华为ICDcomm接口js测试

    1)获取坐席状态接口调用方法: “方法”------“坐席与班组” 中的 Phone.QueryAgentStatusEx(工号)如果该方法调用成功,那么坐席状态将会存入到属性: Phone.Agen ...

  9. java学习___File类的查看和删除

    一.查看目录下的子目录或文件 getName()获取文件或目录的名字 for(File file:files) 如果想看目录下的另外目录,引用递归调用,就是还要在获取的目录下再查看目录 二.如何删除一 ...

  10. Angularjs过滤器的开发.

    先上代码. <!DOCTYPE html> <html ng-app="FilterModule"> <head lang="en" ...