这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下GridView 和 Repeater 关于重复数据合并的方法。

效果图如下 :

GridView :

前台代码 :

  1. <div>
  2. <asp:GridView ID="gvIncome" runat="server" AutoGenerateColumns="False">
  3. <Columns>
  4. <asp:TemplateField HeaderText="一级">
  5. <ItemTemplate>
  6. <asp:Label ID="Label0" runat="server" Text='<%#Eval("aname") %>'></asp:Label>
  7. </ItemTemplate>
  8. </asp:TemplateField>
  9. <asp:TemplateField HeaderText="二级">
  10. <ItemTemplate>
  11. <asp:Label ID="Label1" runat="server" Text='<%#Eval("bname") %>'></asp:Label>
  12. </ItemTemplate>
  13. </asp:TemplateField>
  14. <asp:TemplateField HeaderText="三级">
  15. <ItemTemplate>
  16. <asp:Label ID="Label2" runat="server" Text='<%#Eval("cname") %>'></asp:Label>
  17. </ItemTemplate>
  18. </asp:TemplateField>
  19. <asp:TemplateField HeaderText="四级">
  20. <ItemTemplate>
  21. <asp:Label ID="Label3" runat="server" Text='<%#Eval("dname") %>'></asp:Label>
  22. </ItemTemplate>
  23. </asp:TemplateField>
  24. </Columns>
  25. </asp:GridView>
  26. </div>

GridView 前台代码

  1.  

后台代码  :

  1. public void DataBind()
  2. {
  3. string sql = "select a.aname,b.bname,c.cname ,d.dname from aa as a right join bb as b on a.aid=b.aid right join cc as c on b.bid=c.bid left join dd as d on d.cid=c.cid order by a.aid";
  4. SqlDataAdapter sda = new SqlDataAdapter(sql, cn);
  5. DataSet ds = new DataSet();
  6. sda.Fill(ds);
  7. gvIncome.DataSource = ds;
  8. gvIncome.DataBind();
  9. //MergeRows(gvIncome.HeaderRow, gvIncome.Rows.Count);
  10. int colnum = gvIncome.Columns.Count; // 获取GridView中获取列数
  11. MergeRows(gvIncome, , "Label"); // GridView 要整合的列数 需要改变的Lable控件
  12. }
  13. public static void MergeRows(GridView gvw, int colnum, string controlNameo)
  14. {
  15. for (int col = ; col < colnum; col++) // 遍历每一列
  16. {
  17. string controlName = controlNameo + col.ToString(); // 获取当前列需要改变的Lable控件ID
  18. for (int rowIndex = gvw.Rows.Count - ; rowIndex >= ; rowIndex--) //GridView中获取行数 并遍历每一行
  19. {
  20. GridViewRow row = gvw.Rows[rowIndex]; // 获取当前行
  21. GridViewRow previousRow = gvw.Rows[rowIndex + ]; // 获取当前行 的上一行
  22. Label row_lbl = row.Cells[col].FindControl(controlName) as Label; //// 获取当前列当前行 的 Lable 控件ID 的文本
  23. Label previousRow_lbl = previousRow.Cells[col].FindControl(controlName) as Label; //// 获取当前列当前行 的上一行 的 Lable控件ID 的文本
  24. if (row_lbl != null && previousRow_lbl != null) // 如果当前行 和 上一行 要改动的 Lable 的ID 的文本不为空
  25. {
  26. if (row_lbl.Text == previousRow_lbl.Text) // 如果当前行 和 上一行 要改动的 Lable 的ID 的文本不为空 且相同
  27. {
  28. // 当前行的当前单元格(单元格跨越的行数。 默认值为 0 ) 与下一行的当前单元格的跨越行数相等且小于一 则 返回2 否则让上一行行的当前单元格的跨越行数+1
  29. row.Cells[col].RowSpan = previousRow.Cells[col].RowSpan < ? : previousRow.Cells[col].RowSpan + ;
  30. //并让上一行的当前单元格不显示
  31. previousRow.Cells[col].Visible = false;
  32. }
  33. }
  34. }
  35. }
  36.  
  37. }

GridView 后台代码

********************************************************
*                华丽的分割线                *
********************************************************

Repeater :

前台代码 :

  1. // table样式
  2. <style>
  3. table {
  4. border-collapse:collapse;
  5. }
  6. table tr td,th {
  7. border:1px solid black;
  8. }
  9. </style>
  10.  
  11. //*****************
  12.  
  13. <div>
  14. <table>
  15. <tr>
  16. <th>一级</th> <th>二级</th> <th>三级</th> <th>四级</th>
  17. </tr>
  18. <asp:Repeater ID="rptIncome" runat="server">
  19. <ItemTemplate>
  20. <tr>
  21. <td runat="server" id="td0"><%#Eval("aname") %></td>
  22. <td runat="server" id="td1"><%#Eval("bname") %></td>
  23. <td runat="server" id="td2"><%#Eval("cname") %></td>
  24. <td runat="server" id="td3"><%#Eval("dname") %></td>
  25. </tr>
  26. </ItemTemplate>
  27. </asp:Repeater>
  28. </table>
  29. </div>

Repeater 前台代码

后台代码  :

  1. public void DataBind()
  2. {
  3. string sql = "select a.aname,b.bname,c.cname ,d.dname from aa as a right join bb as b on a.aid=b.aid right join cc as c on b.bid=c.bid left join dd as d on d.cid=c.cid order by a.aid";
  4. SqlDataAdapter sda = new SqlDataAdapter(sql, cn);
  5. DataSet ds = new DataSet();
  6. sda.Fill(ds);
  7. rptIncome.DataSource = ds;
  8. rptIncome.DataBind();
  9.  
  10. for (int i = ; i < ; i++) // 遍历每一列
  11. {
  12. string rpttd = "td";
  13. string tdIdName1 = rpttd + i.ToString();
  14. MergeCell(tdIdName1); // 把当前列的 td 的 ID文本作为方法的参数
  15. }
  16.  
  17. }
  18.  
  19. /// <summary>
  20. ///
  21. /// </summary>
  22. /// <param name="tdIdName1">当前列当前行的 td 的ID文本</param>
  23. private void MergeCell(string tdIdName1)
  24. {
  25. for (int i = rptIncome.Items.Count - ; i > ; i--) // rptIncome.Items.Count - 1 数据总行数(数据从0开始) 遍历当前列的每一行
  26. {
  27. MergeCellSet(tdIdName1, i);
  28. }
  29. }
  30. /// <summary>
  31. ///
  32. /// </summary>
  33. /// <param name="tdIdName1">当前列当前行的 td 的ID文本</param>
  34. /// <param name="i">当前行</param>
  35. private void MergeCellSet(string tdIdName1, int i)
  36. {
  37. HtmlTableCell cellPrev = rptIncome.Items[i - ].FindControl(tdIdName1) as HtmlTableCell; // 获取下一行当前列的 td 所在的单元格
  38. HtmlTableCell cell = rptIncome.Items[i].FindControl(tdIdName1) as HtmlTableCell; // 获取当前行当前列的 td 所在的单元格
  39. cell.RowSpan = (cell.RowSpan == -) ? : cell.RowSpan; // 获取当前行当前列单元格跨越的行数
  40. cellPrev.RowSpan = (cellPrev.RowSpan == -) ? : cellPrev.RowSpan; // 获取下一行当前列单元格跨越的行数
  41. if (cell.InnerText == cellPrev.InnerText)
  42. {
  43. // 让下一行的当前单元格的跨越行数 + 当前行的跨越行数
  44. cellPrev.RowSpan += cell.RowSpan;
  45. cell.Visible = false; // 隐藏当前行
  46.  
  47. //关键代码,再判断执行第2列的合并单元格方法
  48. }
  49. }

Repeater 后台代码

ASP.NET 关于GridView 表格重复列合并的更多相关文章

  1. ASP.NET 为GridView添加序号列,且支持分页连续累计显示

    为GridView添加序号列,且支持分页连续累计显示,废话不多说,直接上代码: <%@ Page Language="C#" AutoEventWireup="tr ...

  2. 使用模板技术处理ASP.NET中GridView额外序号列的问题

    问题描述: 现在要在一张GridView表中添加一列来显示行号,要求是显示下一页的时候能够递增而不是从新编号.数据库中的没有相关序号列 如何在软件端实现呢? 通过测试,添加以下代码即可解决需求. &l ...

  3. ASP.NET中重复表格列合并的实现方法(转自脚本之家)

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...

  4. GRIDVIEW多行多列合并单元格(合并列)

    GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章:  GridView多行多列合并单元格(完整代码和例子) ...

  5. asp.net教程:GridView导出到Excel或Word文件

    asp.net教程:GridView导出到Excel或Word文件</ br> 在项目中我们经常会遇到要求将一些数据导出成Excel或者Word表格的情况,比如中国移动(我是中国移动用户) ...

  6. Asp.net中GridView使用详解(引)

    GridView无代码分页排序GridView选中,编辑,取消,删除GridView正反双向排序GridView和下拉菜单DropDownList结合GridView和CheckBox结合鼠标移到Gr ...

  7. 关于开发C#中的asp.net中gridview控件的使用

    原文网址:http://blog.sina.com.cn/s/blog_67f1b4b201017663.html 1.GridView无代码分页排序: 效果图: 1.AllowSorting设为Tr ...

  8. Asp.net中GridView详解《转》

    ASP.NET服务器控件GridView 1         ASP.NET 服务器控件GridView使用 本教程不介绍服务器端控件的呈现,事件处理,状态等理论知识,只介绍服务器端控件的使用操作,如 ...

  9. Asp.net中GridView使用详解(很全,很经典 转来的)

    Asp.net中GridView使用详解 效果图参考:http://hi.baidu.com/hello%5Fworld%5Fws/album/asp%2Enet中以gv开头的图片 l         ...

随机推荐

  1. Backbone学习笔记 - Model篇

    2 Model 在Backbone中,Model用于存储核心数据,可以将数据交互相关的逻辑代码放在这里.基本形式如下: var Human = Backbone.Model.extend({ init ...

  2. day74天中间件介绍

    一. importlib settings 执行结果: 两个process_request  process_response按照注册顺序的倒叙进行执行 PROCESS_VIEW  Process_v ...

  3. 廖雪峰Python学习笔记——序列化

    序列化 定义:程序运行时所有变量都存在内存中,把变量从内存中变成可存储或可传输的过程称为序列化pickling,在其他语言中称为serialization,marshalling,flattening ...

  4. nginx 场景业务汇总 (初)

    本文链接:http://www.cnblogs.com/zhenghongxin/p/8891385.html 在下面的测试中,建议每次修改nginx配置文件后,都用此命令检查一下语法是否正确: [r ...

  5. 基于unoconv的在线office预览

    这几天在搞在线文档预览,网上查了几种方案, 第一种:使用google的在线预览 -> 国内被Q,pass 第二种:使用第三方的,比如:永中dcs -> 要钱,pass 第三种:先转换为pd ...

  6. poj1456---贪心

    题目大意: 有n个商品,每个商品有价值和一个最后期限,过了这个期限该商品就不能卖出去了 问你如何去卖,能得到最大的收益.(每个东西卖一天,不能同时卖两种东西) 思路: 贪心: 先按价值对商品排序,价值 ...

  7. 网站引入外部js

    有时想看某个网站下一些数据,需要用到js做一个实时的筛选,却又苦于该网站没用jQuery导致想使用jQuery时,还无法下手,那么下面这段js或许可以帮助你.1.打开我们的chrome调试工具,切换到 ...

  8. VUE 项目刷新路由指向index.html

    背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE ...

  9. [Swift实际操作]七、常见概念-(7)日历Calendar和日期组件DateComponents

    本文将为你演示日历和日期组件的使用.通过日历的日期部件,可以获得日期的各个部分. 首先引入需要用到的界面工具框架 import UIKit 初始化一个日期对象,其值为当前的日期. let dt = D ...

  10. h5移动端聊天室|仿微信界面聊天室|h5多人聊天室

    今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...