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

前言

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

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

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

问题背景

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

简化的问题模型

students表:
#####1

scores表:
#########2

其中students表主键为id,scores表的主键为(id,subject)
两个表的关联字段为id

用户需要显示的格式

########final

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

分析

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

#############s1

#############s2

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

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

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

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

##########3

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

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

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.

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值