最近项目中有一个需求,将树形结构的数据,以表格的形式展示在页面中,下图是最终呈现效果:

  

 

 

   源码:

  

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Asp.Net Mvc自定义控件之树形结构数据生成表格 - WPF特工队内部资料</title>
    <style type="text/css">
        table.hovertable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #999999;
            border-collapse: collapse;
        }

            table.hovertable th {
                background-color: #c3dde0;
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #a9c6c9;
            }

            table.hovertable tr {
                background-color: #d4e3e5;
            }

            table.hovertable td {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #a9c6c9;
                text-align: center;
            }

                table.hovertable td.td-left {
                    text-align: left;
                }
    </style>
</head>
<body>
    @Html.TabTree(ViewData["Source"] as List<V_TabTree>, @classname: "hovertable")
</body>
</html>

 

后台代码:

namespace FLSoft.WebUI
{
    public class Data
    {
        /// <summary>
        /// 构建数据源
        /// </summary>
        /// <returns></returns>
        public static List<V_TabTree> GetData()
        {
            List<V_TabTree> _datas = new List<V_TabTree>();
            //
            #region 深度测试

            var 深度测试 = new V_TabTree("测试1", 5)
            {
                Childs = new List<V_TabTree>() {
                     new V_TabTree("测试1-1",4){ 
                        Childs = new List<V_TabTree>(){
                             new V_TabTree("测试1-1-1",2){
                                Childs =new List<V_TabTree>(){
                                    new V_TabTree("测试1-1-1-1"),
                                    new V_TabTree("测试1-1-1-2")
                                    }
                             },
                             new V_TabTree("测试1-1-2",2){
                                Childs =new List<V_TabTree>(){
                                    new V_TabTree("测试1-1-2-1"),
                                    new V_TabTree("测试1-1-2-2")
                                }
                             }
                        }
                     },
                     new V_TabTree("测试1-2",1){
                         Childs = new List<V_TabTree>(){
                                 new V_TabTree("测试1-2-1",1){
                                     Childs =new List<V_TabTree>(){
                                        new V_TabTree("测试1-2-1-1")
                                     }
                                 }
                            }
                     }
                 }
            };
            #endregion

            #region 高压配电柜
            var 高压配电柜 = new V_TabTree("高压配电柜", 4)
            {
                Childs = new List<V_TabTree>() {
                     new V_TabTree("真空断路器",1){ 
                        Childs = new List<V_TabTree>(){
                             new V_TabTree("固定牢固无松动,外表清洁完好,分合闸无异常")
                        }
                     },
                     new V_TabTree("“五防”功能",1){
                         Childs = new List<V_TabTree>(){
                                 new V_TabTree("工作正常")
                            }
                     },
                     new V_TabTree("接线端子",1){
                         Childs = new List<V_TabTree>(){
                                 new V_TabTree("无烧毁或松动")
                            }
                     },
                     new V_TabTree("微机综保",1){
                         Childs = new List<V_TabTree>(){
                                 new V_TabTree("上下级联动协调")
                            }
                     }
                 }
            };
            #endregion

            #region 阀门

            var 阀门 = new V_TabTree("阀门", 4)
            {
                Childs = new List<V_TabTree>() {
                     new V_TabTree("阀门保养",3){ 
                        Childs = new List<V_TabTree>(){
                             new V_TabTree("检查各零件部件的腐蚀、磨损程度,发现损坏则更换或整修"),
                             new V_TabTree("清除垃圾油污,并加注润滑脂1"),
                             new V_TabTree("清除垃圾油污,并加注润滑脂2")
                        }
                     },
                     new V_TabTree("计量仪表",1){
                         Childs = new List<V_TabTree>(){
                                 new V_TabTree("计量准确")
                            }
                     }
                 }
            };
            #endregion

            #region 阀门2

            var 阀门2 = new V_TabTree("阀门2", 2)
            {
                Childs = new List<V_TabTree>() {
                     new V_TabTree("阀门保养",2){ 
                        Childs = new List<V_TabTree>(){
                             new V_TabTree("检查各零件部件的腐蚀、磨损程度,发现损坏则更换或整修"),
                             new V_TabTree("清除垃圾油污,并加注润滑脂")
                        }
                     }
                 }
            };
            #endregion

            #region 电容器柜

            var 电容器柜 = new V_TabTree("电容器柜", 3)
            {
                Childs = new List<V_TabTree>() {
                     new V_TabTree("电力电容",1){ 
                        Childs = new List<V_TabTree>(){
                             new V_TabTree("无漏油、过热、膨胀现象,绝缘正常")
                        }
                     },
                     new V_TabTree("接触器",1){
                         Childs = new List<V_TabTree>(){
                                 new V_TabTree("触头无烧损痕迹、闭合紧密")
                            }
                     },
                     new V_TabTree("熔断器",1){
                         Childs = new List<V_TabTree>(){
                                 new V_TabTree("无烧损痕迹")
                            }
                     }
                 }
            };
            #endregion

            _datas.Add(深度测试);
            _datas.Add(高压配电柜);
            _datas.Add(阀门);
            _datas.Add(阀门2);
            _datas.Add(电容器柜);
            return _datas;
        }
    }
    /// <summary>
    /// 表格树数据模型
    /// </summary>
    public class V_TabTree
    {
        #region 构造函数

        public V_TabTree()
        {
            this.Depth = 0;
            this.Childs = new List<V_TabTree>();
        }
        public V_TabTree(String value)
            : this()
        {
            this.Value = value;
        }
        public V_TabTree(String value, Int32 depth)
            : this(value)
        {
            this.Depth = depth;
        }

        #endregion

        /// <summary>
        /// 主键
        /// </summary>
        public Int32 ID { get; set; }
        /// <summary>
        /// 所属父节点
        /// </summary>
        public Int32 ParentID { get; set; }
        /// <summary>
        /// 节点内容
        /// </summary>
        public String Value { get; set; }
        /// <summary>
        /// 子字节
        /// </summary>
        public List<V_TabTree> Childs { get; set; }
        /// <summary>
        /// 节点深度
        /// </summary>
        public Int32 Depth { get; private set; }
        /// <summary>
        /// 节点是否已生成
        /// </summary>
        public Boolean IsGenerate { get; set; }
        /// <summary>
        /// 添加子节点
        /// </summary>
        /// <param name="node"></param>
        public virtual void Addchildren(V_TabTree node)
        {
            this.Childs.Add(node);
        }

        /// <summary>
        /// 获取当前节点的深度
        /// 参考:
        ///        --| 菜单1
        ///        ----|菜单1.1
        ///        ------|菜单1.1.1
        ///        ------|菜单1.1.2
        ///        ----|菜单1.2
        ///        ------|菜单1.2.1
        ///        ------|菜单1.2.2
        ///        如上是一个三级节点,但是顶级节点的深度为4,表示这个菜单1的所有子节点总和
        /// </summary>
        /// <returns></returns>
        public virtual Int32 GetDepth()
        {
            Int32 _depth = 0;
            //获取当前节点的深度
            if (this.Childs.Count > 1)
            {
                
            }

            return _depth;
        }
    }

    /// <summary>
    ///  创建HTML Table数据模型
    /// </summary>
    public class V_Tab
    {
        public V_Tab()
        {
            this.Ths = new List<V_Tr>();
            this.Trs = new List<V_Tr>();
        }
        /// <summary>
        /// 表格标题
        /// </summary>
        public List<V_Tr> Ths { get; set; }
        /// <summary>
        /// 表格内容
        /// </summary>
        public List<V_Tr> Trs { get; set; }

    }

    /// <summary>
    /// 创建HTML Table 列数据模型
    /// </summary>
    public class V_Td
    {
        public V_Td()
        {
            this.Colspan = 1;
            this.Rowspan = 1;
        }

        /// <summary>
        /// 显示内容
        /// </summary>
        public String Value { get; set; }
        /// <summary>
        /// 标题合并列数
        /// </summary>
        public Int32 Colspan { get; set; }
        /// <summary>
        /// 标题合并行数
        /// </summary>
        public Int32 Rowspan { get; set; }
    }

    /// <summary>
    /// 创建HTML Table行数据模型
    /// </summary>
    public class V_Tr
    {
        public V_Tr()
        {
            this.Tds = new List<V_Td>();
        }
        /// <summary>
        /// 行样式名称
        /// </summary>
        public String ClassName { get; set; }
        /// <summary>
        /// 列数据集合
        /// </summary>
        public List<V_Td> Tds { get; set; }
    }

    /// <summary>
    /// TabTree 自定义控件
    /// </summary>
    public static class MvcHtmlStringExtensions
    {
        /// <summary>
        /// 构建表格
        /// </summary>
        /// <param name="helper"></param>
        /// <returns></returns>
        public static MvcHtmlString TabTree(this HtmlHelper helper, V_Tab values, String classname)
        {
            StringBuilder htmlStr = new StringBuilder();
            if (values == null) return new MvcHtmlString("<TABLE></TABLE>");
            htmlStr.Append("<TABLE class= " + classname + ">");
            if (values.Ths != null)
            {
                foreach (var th in values.Ths)
                {
                    htmlStr.Append("<TR>");
                    if (th.Tds != null)
                    {
                        foreach (var td in th.Tds)
                        {
                            htmlStr.Append("<TH colspan =" + td.Colspan + " rowspan =" + td.Rowspan + " >");
                            htmlStr.Append(td.Value + "</TH>");
                        }
                    }
                    htmlStr.Append("</TR>");
                }
            }
            if (values.Trs != null)
            {
                foreach (var tr in values.Trs)
                {
                    htmlStr.Append("<TR>");
                    if (tr.Tds != null)
                    {
                        foreach (var td in tr.Tds)
                        {
                            htmlStr.Append("<TD colspan =" + td.Colspan + " rowspan =" + td.Rowspan + " >");
                            htmlStr.Append(td.Value + "</TD>");
                        }
                    }
                    htmlStr.Append("</TR>");
                }
            }
            htmlStr.Append("</TABLE>");
            return new MvcHtmlString(htmlStr.ToString());
        }

        /// <summary>
        /// 构建表格
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="tab"></param>
        /// <returns></returns>
        public static MvcHtmlString TabTree(this HtmlHelper helper, List<V_TabTree> source, String classname)
        {
            StringBuilder htmlStr = new StringBuilder();
            V_Tab _tab = new V_Tab();
            _tab.Trs = BuildTr(source);
            return TabTree(helper, _tab, classname);
        }

        /// <summary>
        /// 将树形的数据构建为HTML Table数据模型
        /// </summary>
        /// <param name="values"></param>
        /// <returns></returns>
        private static List<V_Tr> BuildTr(List<V_TabTree> values)
        {
            List<V_Tr> _trs = new List<V_Tr>();
            foreach (var value in values)
            {
                _trs.AddRange(GenerateTr(value));        //一个顶级节点的行数由value.Depth属性来确定
            }
            return _trs;
        }
        /// <summary>
        /// 仅满足1级节点合并
        /// </summary>
        /// <param name="value"></param>
        /// <returns></returns>
        private static List<V_Tr> BuildTr(V_TabTree value)
        {
            List<V_Tr> _trs = new List<V_Tr>();
            //Depth属性用于判断当前的数据产生Tr的数量
            for (int i = 0; i < value.Depth; i++)
            {
                V_Tr _tr = new V_Tr();
                if (i == 0)
                {
                    V_Td _td = new V_Td() { Value = value.Value, Rowspan = value.Depth };
                    _tr.Tds.Add(_td);
                }
                //检测是否包含子节点,如果包含
                if (value.Childs != null && value.Childs.Count > 0)
                {
                    //顶级节点的深度与其子节点数目相等时,后续表格的列都是一对一的
                    if (value.Depth == value.Childs.Count)
                    {
                        _tr.Tds.AddRange(BuildTd(value.Childs[i]));
                    }
                    else //如果几点深度大于子节点时,需要计算循环深度
                    {
                        //父节点的级别与所有子节点的深度总和相等
                    }
                }
                _trs.Add(_tr);
            }
            return _trs;
        }

        /// <summary>
        /// 仅满足1-2级节点合并
        /// </summary>
        /// <param name="parentNode"></param>
        /// <returns></returns>
        private static List<V_Tr> BuildTrEx(V_TabTree parentNode)
        {
            List<V_Tr> _trs = new List<V_Tr>();
            V_Tr _tr = new V_Tr();                                        //当包含一个数据节点时,创建第一个TR
            _tr.Tds = BuildTd(parentNode);                        //填充TR包含的所有的TD
            _trs.Add(_tr);                                                    //填充TR集合
            if (parentNode.Depth > 1)                                //判断Depth>1表示这个节点下面还包含TR行
            {
                if (parentNode.Childs.Count > 1)                    //如果当前节点包含多个子节点,需要循环遍历
                {
                    //后续描述的"当前节点",是当前For循环上下文的节点,不是指的参数节点
                    var _childNodes = parentNode.Childs;
                    for (int i = 0; i < _childNodes.Count; i++) //在循环子节点时,子节点的第一个项已经赋值给Parent节点了
                    {
                        //所以只处理Depth>1的业务,parentNode的子节点(childNodes)还包含可以循环子节点
                        if (_childNodes[i].Depth > 1)   //表示当前这个节点后续的TR行包含多个
                        {
                            //继续循环当前节点的子节点(顶级节点的子节点的子节点判断,有点绕)
                            for (int ii = 0; ii < _childNodes[i].Childs.Count; ii++)
                            {
                                if (ii > 0)
                                {
                                    //因为是当前节点的二级节点,那么第一条数据被上父节点给取走了,循环就需要从i+1开始
                                    _trs.AddRange(BuildTrEx(_childNodes[i].Childs[ii]));
                                }
                            }
                        }
                        else    //如果当前节点的Depth =1 ,表示这个节点已经被赋值给Parent节点了,
                        {
                            if (i > 0)
                            {
                                _trs.AddRange(BuildTrEx(_childNodes[i]));  //取子节点递归查找
                            }
                        }

                    }
                }
                else  //二级节点只有一项时
                {
                    for (int i = 0; i < parentNode.Childs[0].Childs.Count - 1; i++)
                    {
                        _trs.AddRange(BuildTrEx(parentNode.Childs[0].Childs[i + 1]));
                    }
                }
            }


            return _trs;
        }

        /// <summary>
        /// 多级节点嵌套合并
        /// </summary>
        /// <param name="parentNode">父节点</param>
        /// <returns></returns>
        private static List<V_Tr> GenerateTr(V_TabTree parentNode)
        {
            List<V_Tr> _trs = new List<V_Tr>();
            if (!parentNode.IsGenerate)
            {
                V_Tr _tr = new V_Tr();
                _tr.Tds = BuildTd(parentNode);
                _trs.Add(_tr);
            }
            if (parentNode.Depth > 1)  //有多级深度
            {
                //检测其子节点是否包含深度,肯定是要添加一个循环遍历的
                List<V_TabTree> childNodes = parentNode.Childs;
                for (int i = 0; i < childNodes.Count; i++)
                {
                    _trs.AddRange(GenerateTr(childNodes[i]));
                }
            }
            return _trs;
        }

        private static List<V_Td> BuildTd(V_TabTree value)
        {
            List<V_Td> _tds = new List<V_Td>();
            value.IsGenerate = true;
            V_Td _td = new V_Td() { Value = value.Value, Rowspan = value.Depth > 0 ? value.Depth : 1 };
            _tds.Add(_td);
            if (value.Depth > 0)
            {
                _tds.AddRange(BuildTd(value.Childs[0]));
            }
            return _tds;
        }


    }

}

 

全部源码:Asp.Net Mvc自定义控件之树形结构数据生成表格-WPF特工队内部资料.rar

 

  

  

 

posted @ 2019-10-17 15:00 fujc2dev 阅读(938) 评论(0) 推荐(0) 编辑
摘要: 理解类、对象、实例、原型链以及继承 阅读全文
posted @ 2019-05-15 15:27 fujc2dev 阅读(248) 评论(0) 推荐(0) 编辑
摘要: 最近做一个演示的管理系统项目,需要用到分页控件,在网上找了很多,依然找到与UI模版匹配的,最后干脆自己写一个。 分页控件分析: 1、分页控件分简单显示和复杂显示两种; 2、包含上一页、下一页以及页码明细逻辑处理; 3、页码总数小于7时显示默认显示,大于7时切换复杂显示; 4、页码数、索引、总条数计算 阅读全文
posted @ 2017-12-29 09:43 fujc2dev 阅读(1055) 评论(0) 推荐(1) 编辑
摘要: 由于项目需要制作一个可通用的报表多行标题,且可实现各种类型的内容显示,包括文本、输入框、下拉框、多选框等(自定的显示内容可自行扩展),并支持参数绑定转换,效果如下: 源码结构 ColumnItem类:对列的宽度,对象方式,显示类型,绑定名称,converter资源进行设置 报表内容中需要其他类型时, 阅读全文
posted @ 2017-05-11 16:21 fujc2dev 阅读(1651) 评论(5) 推荐(0) 编辑
摘要: 闲来无事,分享一个仪表盘 源码: 直接复制代码即可运行,=。=! 阅读全文
posted @ 2017-05-08 14:24 fujc2dev 阅读(687) 评论(0) 推荐(0) 编辑
摘要: 闲得蛋疼做了一个WPF制作轮播动画(随机动画),勉强可以看,写个随笔留个脚印。 效果图: 阅读全文
posted @ 2017-05-04 11:28 fujc2dev 阅读(571) 评论(2) 推荐(0) 编辑
摘要: 写个随笔记录下。 经过一周多各种莫名其妙的研究与分析,然后在论坛中大神给一个命令完美解决之。 ionic build android --prod --release 阅读全文
posted @ 2017-03-14 12:11 fujc2dev 阅读(586) 评论(0) 推荐(0) 编辑
摘要: Ionic2混合开发,入坑系列:Ionic2中腾讯Bugly异常捕获以及上报 1、Ionic2中处理全局异常,直接继承IonicErrorHandler即可,代码如下 2、在AppModule.ts中将自定义的异常扩类添加到providers中 阅读全文
posted @ 2017-03-01 17:00 fujc2dev 阅读(1149) 评论(0) 推荐(0) 编辑
摘要: Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1、编写Bugly.js代码 var exec = require('cordova/exec'); module.exports = { /** * 发送Bugly异常信息 * @param success 成功回调函数 阅读全文
posted @ 2017-03-01 16:34 fujc2dev 阅读(1510) 评论(0) 推荐(0) 编辑
摘要: Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2,以下是集成sweetalert1 1、安装Typings 在命令行中输入:npm install 阅读全文
posted @ 2017-03-01 16:23 fujc2dev 阅读(745) 评论(2) 推荐(1) 编辑
点击右上角即可分享
微信分享提示