MVC4 使用 easyui treegrid 展示数据

//数据格式

public class BaseVo
    {
        public int ID { get; set; }
        [DisplayName("版本号")]
        public Nullable<int> Version { get; set; }
        [DisplayName("开始生命周期/输入时间")]
        public Nullable<System.DateTime> StartLifeCycle { get; set; }
        [DisplayName("结束生命周期")]
        public Nullable<System.DateTime> EndLifeCycle { get; set; }
        [DisplayName("编号")]
        public string Code { get; set; }
        [DisplayName("名称")]
        public string Name { get; set; }
        [DisplayName("输入人")]
        public string InputUser { get; set; }
        [DisplayName("更新人")]
        public string UpdateUser { get; set; }
        [DisplayName("更新时间")]
        public Nullable<System.DateTime> UpdateTime { get; set; }

        public BaseVo() { }

        public BaseVo(string code, string name)
        {
            this.Code = code;
            this.Name = name;
        }

        public BaseVo(int id,string code, string name)
        {
            this.ID = id;
            this.Code = code;
            this.Name = name;
        }

        public BaseVo(int id, int? version,string code, string name)
        {
            this.ID = id;
            this.Version = version;
            this.Code = code;
            this.Name = name;
        }

        public BaseVo(int id, int? version, DateTime? startLifeCycle, DateTime? endLifeCycle,string code, string name)
        {
            this.ID = id;
            this.Version = version;
            this.StartLifeCycle = startLifeCycle;
            this.EndLifeCycle = endLifeCycle;
            this.Code = code;
            this.Name = name;
        }

        public BaseVo(int id, int? version, DateTime? startLifeCycle, DateTime? endLifeCycle,
            string code, string name, string inputUser, string updateUser, DateTime? updateTime)
        {
            this.ID = id;
            this.Version = version;
            this.StartLifeCycle = startLifeCycle;
            this.EndLifeCycle = endLifeCycle;
            this.Code = code;
            this.Name = name;
            this.InputUser = inputUser;
            this.UpdateUser = updateUser;
            this.UpdateTime = updateTime;
        }
    }

//treegrid 需要 一个字段区分子父关系（'_parentId'，'children'），这里使用children 

public class SysMenuVo : BaseVo
    {
        public string Iconic { get; set; }
        public string Comment { get; set; }
        public string Url { get; set; }

        public List<SysMenuVo> children { get; set; }

        public SysMenuVo()
        {
            this.children = new List<SysMenuVo>();
        }

        public SysMenuVo(int id, int? version, DateTime? startLifeCycle, DateTime? endLifeCycle,
            string code, string name, string inputUser, string updateUser, DateTime? updateTime,
             string url, string iconic, string comment)
            : base(id, version, startLifeCycle, endLifeCycle, code, name, inputUser, updateUser, updateTime)
        {
            this.children = new List<SysMenuVo>();
            this.InputUser = inputUser;
            this.Url = url;
            this.Iconic = iconic;
            this.Comment = comment;
        }
    }　　

 

//服务层 数据查询组装

public List<SysMenuVo> FindAllMenu()
        {
            List<SysMenuVo> vos = new List<SysMenuVo>();
            using (RepositoryContextManager manager = new RepositoryContextManager())
            {
                IRepository<SysMenu> menuRpt = manager.GetRepository<SysMenu>();
                List<SysMenu> sMenu = menuRpt.GetAll(Specification<SysMenu>.Eval(r => r.EndLifeCycle > DateTimeHelper.GetSysDateTime() &&
                    r.ParentSysMenu == null)).ToList();

                foreach (var item in sMenu)
                {
                    vos.Add(MenuTree(item));
                }
                return vos;
            }
        }

        private SysMenuVo MenuTree(SysMenu menu)
        {
            SysMenuVo vo = new SysMenuVo(menu.ID, menu.Version, menu.StartLifeCycle, menu.EndLifeCycle, menu.Code, menu.Name,
                menu.InputUser, menu.UpdateUser, menu.UpdateTime, menu.Url, menu.Iconic, menu.Comment);
            if (menu.SysChildMenus.Count != 0)
            {
                foreach (var item in menu.SysChildMenus)
                {
                    if (item.EndLifeCycle < DateTimeHelper.GetSysDateTime()) continue;
                    SysMenuVo cVo = MenuTree(item);
                    vo.children.Add(cVo);
                }
            }
            return vo;
        }

 //控制器的使用

 

public JsonResult GetMenuInfo()
        {
            Dictionary<string, object> json = new Dictionary<string, object>();
            ICollection<SysMenuVo> vos = new List<SysMenuVo>();
            try
            {
                ISysManageServices service = ServiceLocator.Instance.GetService<ISysManageServices>();
                vos = service.FindAllMenu();
                if (vos.Count == 0)
                {
                    message = StringMessage.NOT_FIND_DATA;
                    json.Add("message", message);
                }
            }
            catch (Exception ex)
            {
                message = ex.Message + GetInnerException(ex).Message;
                MonitorLog.Exception = message;
                LogHelper.ErrorInfo(MonitorLog);
                json.Add("message", StringMessage.SYSTEM_BUG + "<br />" + message);
            }
            json.Add("total", vos.Count);
            json.Add("rows", vos.Skip(Rows * (Page - 1)).Take(Rows).ToList());
            return Json(json, JsonRequestBehavior.DenyGet);
        }

 

//cshtml使用

 

@{
    ViewBag.Title = "MenuManage";
    Layout = "~/Views/Shared/_LayoutEasyUI.cshtml";
}

<div id="myLayout" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',title:'菜单列表',split:true" style="width:600px;">
        <table id="menu" style="width:600px;height:600px"></table>

    </div>
    <div data-options="region:'center',title:'操作',fit:true" style="padding:5px;background:#eee;">
        <div class="divW500">
            <ul>
                <li><a href="javascript:void(0)" class="easyui-linkbutton" id="btnAdd" data-options="iconCls:'icon-add'">增加</a></li>
                <li><a href="javascript:void(0)" class="easyui-linkbutton" id="btnUpdate" data-options="iconCls:'icon-edit'">修改</a></li>
                <li><a href="javascript:void(0)" class="easyui-linkbutton" id="btnDelete" data-options="iconCls:'icon-remove'">删除</a></li>
                <li><a href="javascript:void(0)" class="easyui-linkbutton" id="btnReload" data-options="iconCls:'icon-reload'">刷新</a></li>
            </ul>
        </div>
        @Html.LabelFor(dto => dto.Name)
        @Html.TextBoxFor(dto => dto.Name, htmlAttributes: new { })
    </div>
</div>

<script>
    $('#menu').treegrid({
        url: '/Account/GetMenuInfo',
        idField: 'ID',
        treeField: 'Name',
        columns: [[
            { field: 'Name', title: '名称', width: 120 },
            { field: 'Code', title: '编号', width: 80, align: 'left' },
            { field: 'Url', title: '地址', width: 120 },
            { field: 'Iconic', title: '图标', width: 120 },
            { field: 'Comment', title: '备注', width: 120 },
            { field: 'InputUser', title: '创建人', width: 120 },
            { field: 'UpdateUser', title: '更新人', width: 120 },
            { field: 'UpdateTime', title: '更新时间', width: 120 }
        ]]
    });
</script>

 

页面展示效果