报表的动态明细行的前端显示 C# ASP.net

前言

孔子曾经曰过：温故而知新。

果不其然啊：喜欢的书，要多读几遍；喜欢的椰汁，要多喝几盒；喜欢的人呢，也要多见几面。

然后就会领悟到新的东西了：这书还是第一遍读的时候有意思；这椰汁越喝越难喝了；这人呢，哎呦，还不错嘞；

问题背景

不多扯了，开始我们今天的问题。数据库有两个表，简称a和b，a是主表，b是明细表，用户需要我们将明细表做为主表的明细行来显示。下面我们给出实验用的表格以及用户需要的格式，方便大家理解。

简化的问题模型

students表：

scores表：

其中students表主键为id，scores表的主键为（id，subject）
两个表的关联字段为id

用户需要显示的格式

关于表格的样式呢，就自己调吧，这里我们只探讨一下核心问题。

分析

首先为了方便后面的说明，这里我们先定义几个概念,见下面两张图

我们前端代码大概是这样的

<table><asp:Lable ...></table>

我们需要做的是拼接一个table内的字符串，放到这个lable里面就可以了。

开始了：我们还是采用老套路，先将明细部分合并到一个格子里面

明细部分的字段之间用逗号隔开。

关于这个如何做到的，可以查看博主的这两篇博客：

http://blog.csdn.net/wf824284257/article/details/74905618

http://blog.csdn.net/wf824284257/article/details/76713400

接下来就是想办法将上面的表显示为用户需要的格式了。

大家很容易想到，行的head部分和明细部分是要分开处理的，而且head部分要根据对应的明细数量来设置rowspan属性。是的，就是这么做。

这里实验用的表格中，明细列有两列：subject和score

所以我们先写一个函数，来判断是否是明细列：

    //该列是否是明细列    protected bool IsDetailCol(DataColumn dc)    {        switch(dc.ColumnName)        {            case "subject":            case "score":                return true;            default:                return false;        }    }

有同学可能会说了，只有两列有必要写个函数么？

有必要。第一，这里只是实验表，所以字段少，而真正工作中用到的表的字段往往非常多；第二，就算字段少，写个函数，也能增加可读性(只有一个字段就当我没说)；第三，最重要的，可扩展性，在日后需求变更时，我们希望改动部分代码对其他代码的影响尽可能的少，所以写个函数非常有必要的。

还需要一个函数来获取当前行的 附加行 的数量

    //获取指定行的附加行数量。理清定义：若指定行明细数据有5个，则第一个算是主数据，后面4个算是附加行数据，所以返回4    //主要用来控制html table 的行 的head 部分的rowspan    protected int GetAttachRowCountByRow(DataRow dr)    {        int ans = 0;        string str = dr["subject"].ToString();        string[] strs = str.Split(',');        ans = strs.Length - 1;        return ans;    }

接下来需要函数来获取指定行的明细部分格子内的数据

    //获取指定的明细数据    protected string GetAttachData(DataRow dr,DataColumn dc,int index)    {           //index: 逆序序号        string str = dr[dc].ToString();        string[] strs = str.Split(',');        int dataIndex = strs.Length - index;        return strs[dataIndex];    }

准备完毕了，下面我们可以用上面的函数来完成我们的前端代码拼接

先来看看直接显示一个dataTable时的拼接代码

    //通常情况下：拼接<table></table>内的字符串    //protected string GetHtmlStrByDataTable(DataTable dt)    //{    //    StringBuilder sb = new StringBuilder();    //    //表头    //    sb.Append("<tr>");    //    foreach(DataColumn dc in dt.Columns)    //    {    //        sb.Append("<th>"+dc.ColumnName+"</th>");    //    }    //    sb.Append("</tr>");    //    //数据    //    for(int i=0;i<dt.Rows.Count;i++)    //    {    //        sb.Append("<tr>");    //        for(int j=0;j<dt.Columns.Count;j++)    //        {    //            sb.Append("<td>"+dt.Rows[i][j].ToString()+"</td>");    //        }    //        sb.Append("</tr>");    //    }    //    return sb.ToString();    //}

非常简单吧。

对于我们的问题，就稍微复杂一点了，主要思路是控制 每一行的head部分的rowspan属性

代码如下：

    /// <summary>    /// 一行分为head部分和明细部分时，这样获取htmlStr    /// </summary>    /// <param name="dt"></param>    /// <returns></returns>    protected string GetHtmlStrByDataTable(DataTable dt)    {        StringBuilder sb = new StringBuilder();        //表头        sb.Append("<tr>");        foreach (DataColumn dc in dt.Columns)        {            sb.Append("<th>" + dc.ColumnName + "</th>");        }        sb.Append("</tr>");        //数据        int attachRowCount = 0;//当前行剩余附加行的数量        for (int i = 0; i < dt.Rows.Count; i++)        {            sb.Append("<tr>");            //正在处理行的明细部分：只对明细列进行html代码拼接            if(attachRowCount>0)            {                for (int j = 0; j < dt.Columns.Count; j++)                {                    if (IsDetailCol(dt.Columns[j]))                    {                        sb.Append("<td>" + GetAttachData(dt.Rows[i], dt.Columns[j], attachRowCount) + "</td>");                    }                }                attachRowCount--;//处理完一条明细                if (attachRowCount > 0) i--;//该行仍有明细数据                sb.Append("</tr>");                continue;            }            //正常处理行            attachRowCount = GetAttachRowCountByRow(dt.Rows[i]);            for (int j = 0; j < dt.Columns.Count; j++)            {                if(!IsDetailCol(dt.Columns[j]))                {                    string tdRowSpan = "rowspan=\"" + (attachRowCount + 1).ToString() + "\" ";                    sb.Append("<td " + tdRowSpan + ">" + dt.Rows[i][j].ToString() + "</td>");                }                else                {                    sb.Append("<td>" + GetAttachData(dt.Rows[i],dt.Columns[j],attachRowCount+1)+ "</td>");                }            }            if(attachRowCount>0) i--;//该行仍有明细数据            sb.Append("</tr>");        }        return sb.ToString();    }

把上面获取到的htmlStr放到label中，就ok了。 关于table的格式就自己看着设置吧，这里就只关注核心问题了。

后面几周应该会介绍一下如何在导出excel中做到这样的效果。这里先欠着。

It’s a nice Day today.