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

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

  Asp.Net Mvc自定义控件之树形结构数据生成表格 - WPF特工队内部资料_第1张图片

 

 

   源码:

  

@{
    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
    {
        /// 
        /// 构建数据源
        /// 
        /// 
        public static List GetData()
        {
            List _datas = new List();
            //
            #region 深度测试

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

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

            #region 阀门

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

            #region 阀门2

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

            #region 电容器柜

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

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

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

        #endregion

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

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

            return _depth;
        }
    }

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

    }

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

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

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

    /// 
    /// TabTree 自定义控件
    /// 
    public static class MvcHtmlStringExtensions
    {
        /// 
        /// 构建表格
        /// 
        /// 
        /// 
        public static MvcHtmlString TabTree(this HtmlHelper helper, V_Tab values, String classname)
        {
            StringBuilder htmlStr = new StringBuilder();
            if (values == null) return new MvcHtmlString("
"); htmlStr.Append("" + classname + ">"); if (values.Ths != null) { foreach (var th in values.Ths) { htmlStr.Append(""); if (th.Tds != null) { foreach (var td in th.Tds) { htmlStr.Append(""); } } htmlStr.Append(""); } } if (values.Trs != null) { foreach (var tr in values.Trs) { htmlStr.Append(""); if (tr.Tds != null) { foreach (var td in tr.Tds) { htmlStr.Append(""); } } htmlStr.Append(""); } } htmlStr.Append("
" + td.Colspan + " rowspan =" + td.Rowspan + " >"); htmlStr.Append(td.Value + "
" + td.Colspan + " rowspan =" + td.Rowspan + " >"); htmlStr.Append(td.Value + "
"); return new MvcHtmlString(htmlStr.ToString()); } /// /// 构建表格 /// /// /// /// public static MvcHtmlString TabTree(this HtmlHelper helper, List source, String classname) { StringBuilder htmlStr = new StringBuilder(); V_Tab _tab = new V_Tab(); _tab.Trs = BuildTr(source); return TabTree(helper, _tab, classname); } /// /// 将树形的数据构建为HTML Table数据模型 /// /// /// private static List BuildTr(List values) { List _trs = new List(); foreach (var value in values) { _trs.AddRange(GenerateTr(value)); //一个顶级节点的行数由value.Depth属性来确定 } return _trs; } /// /// 仅满足1级节点合并 /// /// /// private static List BuildTr(V_TabTree value) { List _trs = new List(); //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; } /// /// 仅满足1-2级节点合并 /// /// /// private static List BuildTrEx(V_TabTree parentNode) { List _trs = new List(); 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; } /// /// 多级节点嵌套合并 /// /// 父节点 /// private static List GenerateTr(V_TabTree parentNode) { List _trs = new List(); if (!parentNode.IsGenerate) { V_Tr _tr = new V_Tr(); _tr.Tds = BuildTd(parentNode); _trs.Add(_tr); } if (parentNode.Depth > 1) //有多级深度 { //检测其子节点是否包含深度,肯定是要添加一个循环遍历的 List childNodes = parentNode.Childs; for (int i = 0; i < childNodes.Count; i++) { _trs.AddRange(GenerateTr(childNodes[i])); } } return _trs; } private static List BuildTd(V_TabTree value) { List _tds = new List(); 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

 

  

  

 

你可能感兴趣的:(Asp.Net Mvc自定义控件之树形结构数据生成表格 - WPF特工队内部资料)