精华内容
下载资源
问答
  • 带复杂表头合并单元格HtmlTable转换成DataTable并导出Excel

    步骤:

    一、前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来

    <!--导出Excel-->
    <script type="text/javascript">
        //导出Excel
        function exportExcel() {
            var data = "";
            $("#divRptTable").find("table").find("tr").each(function () {
                var tr = $(this);
                tr.find("td").each(function () {
                    var td = $(this);
                    var rowspan = td.attr("rowspan") ? td.attr("rowspan") : 1;
                    var colspan = td.attr("colspan") ? td.attr("colspan") : 1;
                    data = data + td.text() + "#{valueSeparater}" + rowspan + "#{valueSeparater}" + colspan + "#{columnSeparater}";
                });
                data = data + "#{rowSeparater}";
            });
            $("#hidTableData").val(data);
            var year = $("select[name='year']").find("option[value='" + $("select[name='year']").val() + "']").text();
            var sem = $("select[name='sem']").find("option[value='" + $("select[name='sem']").val() + "']").text();
            var scl = $("select[name='school']").find("option[value='" + $("select[name='school']").val() + "']").text();
            var grade = $("select[name='grade']").find("option[value='" + $("select[name='grade']").val() + "']").text();
            var exam = $("select[name='exam']").find("option[value='" + $("select[name='exam']").val() + "']").text();
            $("#hidTitle").val(scl + " " + grade + " " + year + " " + sem + " " + exam);
            $("#frm").submit();
        }
    </script>

    二、后台先把前台传过来的字符串转换成HtmlTable实体,然后再转换成DataTable实体

    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Data;
    using System.Web.UI.HtmlControls;
    // 2014年4月2日
    namespace QuaEdu.Controller.Core.Utils
    {
        /// <summary>
        /// HtmlTable工具类
        /// 提供字符串转换成HtmlTable,HtmlTable转换成DataTable
        /// </summary>
        public class HtmlTableUtil
        {
            #region 变量
            /// <summary>
            /// 行分隔
            /// </summary>
            public static readonly string rowSeparater = "|||||";
            /// <summary>
            /// 列分隔
            /// </summary>
            public static readonly string columnSeparater = "@@@@@";
            /// <summary>
            /// 值分隔
            /// </summary>
            public static readonly string valueSeparater = "$$$$$";
            /// <summary>
            /// 空值标识
            /// </summary>
            public static readonly string nullFlag = "HtmlTableUtil_NULL_FLAG";
            #endregion
            #region 字符串转换成HtmlTable
            /// <summary>
            /// 字符串转换成HtmlTable
            /// </summary>
            public static HtmlTable String2HtmlTable(string data)
            {
                HtmlTable htmlTable = new HtmlTable();
                string[] rowArray = data.Split(new string[] { rowSeparater }, StringSplitOptions.RemoveEmptyEntries);
                foreach (string row in rowArray)//遍历行
                {
                    HtmlTableRow htmlTableRow = new HtmlTableRow();
                    string[] colArray = row.Split(new string[] { columnSeparater }, StringSplitOptions.RemoveEmptyEntries);
    
                    foreach (string col in colArray)//遍历列
                    {
                        HtmlTableCell htmlTableCell = new HtmlTableCell();
                        string[] valArr = col.Split(new string[] { valueSeparater }, StringSplitOptions.None);
                        string val = valArr[0];
                        int rowspan = int.Parse(valArr[1]);
                        int colspan = int.Parse(valArr[2]);
                        htmlTableCell.InnerText = val;
                        htmlTableCell.RowSpan = rowspan;
                        htmlTableCell.ColSpan = colspan;
                        htmlTableRow.Cells.Add(htmlTableCell);
                    }
                    htmlTable.Rows.Add(htmlTableRow);
                }
                return htmlTable;
            }
            #endregion
            #region HtmlTable转换成DataTable
            /// <summary>
            /// HtmlTable转换成DataTable
            /// </summary>
            public static DataTable HtmlTable2DataTable(HtmlTable htmlTable)
            {
                DataTable dataTable = new DataTable();
                #region DataTable列数
                int colCount = 0;
                if (htmlTable.Rows.Count > 0)
                {
                    foreach (HtmlTableCell htmlTableCell in htmlTable.Rows[0].Cells)
                    {
                        colCount += htmlTableCell.ColSpan;
                    }
                }
                #endregion
                #region DataTable行数
                int rowCount = htmlTable.Rows.Count;
                #endregion
                #region 给DataTable添加列
                for (int i = 0; i < colCount; i++)
                {
                    dataTable.Columns.Add();
                }
                #endregion
                #region 给DataTable添加行
                for (int i = 0; i < rowCount; i++)//遍历行
                {
                    DataRow dataRow = dataTable.NewRow();
                    for (int j = 0; j < colCount; j++)//遍历列
                    {
                        dataRow[j] = null;
                    }
                    dataTable.Rows.Add(dataRow);
                }
                #endregion
                #region 转换
                for (int i = 0; i < htmlTable.Rows.Count; i++)//遍历HtmlTable行
                {
                    HtmlTableRow htmlTableRow = htmlTable.Rows[i];
                    int delta = 0;//列增量
                    for (int j = 0; j < htmlTableRow.Cells.Count; j++)//遍历HtmlTable列
                    {
                        HtmlTableCell htmlTableCell = htmlTableRow.Cells[j];
                        #region 计算delta
                        for (int k = j + delta; k < colCount; k++)
                        {
                            string cellValue = dataTable.Rows[i][k].ToString();
                            if (cellValue != null)
                            {
                                if (cellValue.IndexOf(nullFlag) == 0)
                                {
                                    delta++;
                                    continue;
                                }
                            }
                            break;
                        }
                        #endregion
                        #region 填充DataTable
                        dataTable.Rows[i][j + delta] = htmlTableCell.InnerText + valueSeparater + htmlTableCell.RowSpan + valueSeparater + htmlTableCell.ColSpan;
                        if (htmlTableCell.RowSpan > 1 || htmlTableCell.ColSpan > 1)
                        {
                            for (int m = 0; m < htmlTableCell.RowSpan; m++)
                            {
                                for (int n = 0; n < htmlTableCell.ColSpan; n++)
                                {
                                    if (!(m == 0 && n == 0))
                                    {
                                        int ii = i + m;
                                        int jj = j + delta + n;
                                        dataTable.Rows[ii][jj] = nullFlag + valueSeparater + "1" + valueSeparater + "1";
                                    }
                                }
                            }
                        }
                        #endregion
                    }
                }
                #endregion
                return dataTable;
            }
            #endregion
        }
    }

    三、将DataTable导出到Excel

    using System;
    using System.Collections.Generic;
    using System.Text;
    using NPOI.HSSF.UserModel;
    using System.Data;
    using System.IO;
    using NPOI.SS.UserModel;
    using QuaEdu.Helper;
    // 2014年4月2日
    namespace QuaEdu.Controller.Core.Utils
    {
        /// <summary>
        /// Excel工具类
        /// 利用NPOI生成Excel
        /// </summary>
        public class ExcelUtil
        {
            #region 生成Excel
            /// <summary>
            /// 生成Excel
            /// DataTable必须使用HtmlTableUtil.HtmlTable2DataTable生成
            /// </summary>
            public static void CreateExcel(DataTable dataTable, string path)
            {
                HSSFWorkbook workbook = new HSSFWorkbook();
                ISheet sheet = string.IsNullOrEmpty(dataTable.TableName) ? workbook.CreateSheet("Sheet1") : workbook.CreateSheet(dataTable.TableName);//创建工作表
                #region 标题
                if (!string.IsNullOrEmpty(dataTable.TableName))
                {
                    dataTable.Rows.InsertAt(dataTable.NewRow(), 0);
                    if (dataTable.Columns.Count > 0)
                    {
                        dataTable.Rows[0][0] = dataTable.TableName + HtmlTableUtil.valueSeparater + "1" + HtmlTableUtil.valueSeparater + dataTable.Columns.Count;
                    }
                    for (int i = 1; i < dataTable.Columns.Count; i++)
                    {
                        dataTable.Rows[0][i] = HtmlTableUtil.nullFlag + HtmlTableUtil.valueSeparater + "1" + HtmlTableUtil.valueSeparater + "1";
                    }
                }
                #endregion
                #region 填充数据
                for (int i = 0; i < dataTable.Rows.Count; i++)//遍历DataTable行
                {
                    DataRow dataRow = dataTable.Rows[i];
                    IRow row = sheet.CreateRow(i);//在工作表中添加一行
                    row.HeightInPoints = 20;
                    for (int j = 0; j < dataTable.Columns.Count; j++)//遍历DataTable列
                    {
                        string cellValue = dataRow[j].ToString();
                        ICell cell = row.CreateCell(j);//在行中添加一列
                        ICellStyle cellStyle = workbook.CreateCellStyle();
                        cellStyle.BorderBottom = BorderStyle.Thin;
                        cellStyle.BorderLeft = BorderStyle.Thin;
                        cellStyle.BorderRight = BorderStyle.Thin;
                        cellStyle.BorderTop = BorderStyle.Thin;
                        cellStyle.VerticalAlignment = VerticalAlignment.Top;
                        cell.CellStyle = cellStyle;
                        string[] valArr = cellValue.Split(new string[] { HtmlTableUtil.valueSeparater }, StringSplitOptions.None);
                        if (valArr[0] != HtmlTableUtil.nullFlag)
                        {
                            double d;
                            if (double.TryParse(valArr[0], out d))
                            {
                                cell.SetCellType(CellType.Numeric);
                                cell.SetCellValue(d);//设置列的内容              
                            }
                            else
                            {
                                cell.SetCellValue(valArr[0]);//设置列的内容
                                if (i != 0) cellStyle.Alignment = HorizontalAlignment.Center;
                            }
                            if (i != 0)
                            {
                                int unitWidth = 400;
                                int oldWidth = sheet.GetColumnWidth(j);
                                int width = (int)Math.Round(CommonHelper.GetWidthUnitCount(valArr[0])) * unitWidth;
                                width = width > unitWidth * 30 ? unitWidth * 30 : width;
                                width = width < unitWidth * 2 ? unitWidth * 2 : width;
                                if (width > oldWidth)
                                {
                                    sheet.SetColumnWidth(j, width);
                                }
                            }
                        }
                    }
                }
                #endregion
                #region 合并单元格
                for (int i = 0; i < dataTable.Rows.Count; i++)//遍历DataTable行
                {
                    DataRow dataRow = dataTable.Rows[i];
                    for (int j = 0; j < dataTable.Columns.Count; j++)//遍历DataTable列
                    {
                        string cellValue = dataRow[j].ToString();
                        string[] valArr = cellValue.Split(new string[] { HtmlTableUtil.valueSeparater }, StringSplitOptions.None);
                        int rowSpan = int.Parse(valArr[1]);
                        int colSpan = int.Parse(valArr[2]);
                        if (rowSpan > 1 || colSpan > 1)
                        {
                            sheet.AddMergedRegion(new NPOI.SS.Util.CellRangeAddress(i, i + rowSpan - 1, j, j + colSpan - 1));
                        }
                    }
                }
                #endregion
                #region 输出到Excel
                MemoryStream ms = new MemoryStream();
                workbook.Write(ms);
                using (FileStream fs = new FileStream(path, FileMode.Create, FileAccess.Write))
                {
                    byte[] bArr = ms.ToArray();
                    fs.Write(bArr, 0, bArr.Length);
                    fs.Flush();
                }
                #endregion
            }
            #endregion
        }
    }
    展开全文
  • x ...近期要生成一些复杂表头合并单元格之类的; 研究了一下. x 去官网上也查到了[复杂表头(rowspan 和 colspan)(Complex headers (rowspan and colspan))],[复杂表头], 但是只是html代...

    x

    →Datatables官网←

    x

    项目中用到的Table都是用Datatables插件来搞得;
    以前都是生成一般性的table;
    近期要生成一些复杂表头,合并单元格之类的;
    研究了一下.

    x

    去官网上也查到了[复杂表头(rowspan 和 colspan)(Complex headers (rowspan and colspan))],[复杂表头], 但是只是html代码,蛋疼啊...

    后来看到了[创建行回调(Row created callback)]哪里的时候 ,豁然开朗!!!   先上行回调的官网js代码>>>

    $(document).ready(function() {
        $('#example').dataTable( {
            "createdRow": function ( row, data, index ) {
                if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
                    $('td', row).eq(5).css('font-weight',"bold").css("color","red");
                }
            }
        } );
    } );

    最终解决方案(修改下上面的代码即可)

    $(document).ready(function() {
        $('#example').dataTable( {
            "createdRow": function ( row, data, index ) {
                            //生成了行之后,开始生成表头>>>
                                if (index == 1) {
                                    var innerTh = '<tr><th rowspan="2">Name</th>';
                       var columnsCount = 3;//具体情况
                                    innerTh +='<th colspan="2">Information</th>';                             
                       innerTh +='<th colspan="3">Contact</th>';                               
                                    innerTh += '</tr>';
                       //table的id为"id_table"
                                    document.getElementById('id_table').insertRow(0);
                                    var $tr = $("#id_table tr").eq(0);
                                    $tr.after(innerTh);
                                }
                            } } ); } );

     

    x

    总结-

    其实会用[创建行回调]之后,
    复杂表头只是一个demo了,
    想搞其他的只要操作table就行了,比如合并单元格,嘎嘎···
    抛砖引玉了...

     

    转载于:https://www.cnblogs.com/love-zf/p/7124016.html

    展开全文
  • 我目前正在使用以下方法创建表格图像: SummaryTable index, xa, xb, ya, yb, za, zb ) names(SummaryTable) "Main X Sub A", "Main X Sub B", "Main Y Sub... X,Y和Z在合并单元格内. 有人能够协助合并细胞的方法吗?

    我目前正在使用以下方法创建表格图像:

    SummaryTable

    index,

    xa,

    xb,

    ya,

    yb,

    za,

    zb

    )

    names(SummaryTable)

    "Main X Sub A",

    "Main X Sub B",

    "Main Y Sub A",

    "Main Y Sub B",

    "Main Z Sub A",

    "Main Z Sub B")

    tt

    tbl

    grid.arrange(tbl,as.table=TRUE)

    带输出:

    CWHHg.png

    使用dput(SummaryTable):

    structure(list(Index = 0:8, `Main X Sub A` = c(1, 0.69, 0.61,

    0.56, 0.5, 0.44, 0.4, 0.36, 0.33), `Main X Sub B` = c(0.86, 0.62,

    0.51, 0.42, 0.36, 0.31, 0.27, 0.24, 0.23), `Main Y Sub A` = c(1,

    0.8, 0.74, 0.68, 0.63, 0.56, 0.52, 0.47, 0.43), `Main Y Sub B` = c(0.86,

    0.77, 0.67, 0.59, 0.53, 0.47, 0.43, 0.39, 0.36), `Main Z Sub A` = c(0,

    0.17, 0.23, 0.27, 0.33, 0.37, 0.42, 0.46, 0.49), `Main Z Sub B` = c(0,

    0.24, 0.33, 0.42, 0.48, 0.55, 0.6, 0.64, 0.66)), .Names = c("Index",

    "Main X Sub A", "Main X Sub B", "Main Y Sub A", "Main Y Sub B",

    "Main Z Sub A", "Main Z Sub B"), row.names = c(NA, -9L), class = "data.frame")

    但是,我想合并顶部标题以实现此输出(如png或pdf):

    OsKWm.png

    此表是在Excel中创建的. X,Y和Z在合并的单元格内.

    有人能够协助合并细胞的方法吗?

    展开全文
  • table表格表头合并单元格问题

    千次阅读 2017-11-24 17:04:17
    3、表头样式 tr th { text-align: center; border: 0px solid #ccc !important; border-right-width: 1px !important; border-bottom: 1px solid #333 !important; vertical-align: middle !...

    1、效果图




    2、代码


     <thead>
                    <tr>
                        <th rowspan="2">班级</th>
                        <th rowspan="2">人数</th>
                        <th colspan="2">总分平均分</th>
    					<th colspan="2">总分平均分(折后)</th>
                        <th colspan="3">语文</th>
    					<th colspan="3">数学</th>
                        <th colspan="3">英语</th>
    					<th colspan="5">物理</th>
    					<th colspan="5">生物化学</th>
    					<th colspan="5">历史</th>
                        <th colspan="5">地理</th>
    					<th colspan="5">政治</th>
                    </tr>
                    <tr>
                        <th>总分</th>
                        <th>排名</th>
                        <th>总分折后</th>
                        <th>排名</th>
                        <th>科任</th>
                        <th>语总</th>
                        <th>排名</th>
                        <th>科任</th>
                        <th>数总</th>
                        <th>排名</th>
                        <th>科任</th>
                        <th>英总</th>
                        <th>排名</th>
                        <th>科任</th>
                        <th>物总</th>
                        <th>排名</th>
                        <th>物总折后</th>
                        <th>排名</th>
                        <th>科任</th>
                        <th>生化总</th>
                        <th>排名</th>
                        <th>生化总折后</th>
                        <th>排名</th>
                        <th>科任</th>
                        <th>历总</th>
                        <th>排名</th>
                        <th>历总折后</th>
                        <th>排名</th>
                        <th>科任</th>
                        <th>地总</th>
                        <th>排名</th>
                        <th>地总折后</th>
                        <th>排名</th>
                        <th>科任</th>
                        <th>政总</th>
                        <th>排名</th>
                        <th>政总折后</th>
                        <th>排名</th>
                        
                    </tr>
                </thead>

    3、表头样式


     tr th {
                text-align: center;
                border: 0px solid #ccc !important;
                border-right-width: 1px !important;
                border-bottom: 1px solid #333 !important;
                vertical-align: middle !important;
            }
            tr th.cell-m,
            tbody td {
                white-space: nowrap;
            }
            td.highlight {
                background-color: whitesmoke !important;
            }
            td {
                text-align: center;
            }
            td.d {
                text-align: right;
            }



    展开全文
  • * Copyright (c) 2010 china yewf * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.PHP * http://www.gnu.org/licenses/gpl.html * ...
  • Swing 表头合并单元格

    千次阅读 2010-04-15 10:50:00
    http://www.blogjava.net/zeyuphoenix/category/44715.htmlhttp://www.jug-muenster.de/steelseries-java-swing-component-library-715/
  • 表头合并单元格. 照例不多说了, 看代码吧.首先需要定义一个接口, 看看表头是怎么合并的/** *//** * 列头组 * * @author Brad.Wu * @version 1.0 */public interface Group ...{ /** *//** * 获取...
  • EXCEL中表头合并,怎么实现筛选数据?亲,如下面的动画演示,选中第5行,点击菜单“数据”,“筛驯。excel中有合并单元格的行怎么才能筛选整个表格其中直接对合并过的单元格筛选无论怎么样都不能筛选整个项目,不过...
  • 一、前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来 <!--导出Excel--> <script type="text/javascript"> //导出Excel function exportExcel() { var data = ""; $("#divRptTabl...
  • 前言 前两篇文章主要基本导入导出和导出不同格式文件,这次是因为有小伙伴问我怎么合并...我们先创建一个具有合并单元格的xlsx表格就以表头数据合并示例吧:示例1.2.写个简单的数据导入功能(你可以参考前言中的文章编...
  • layui table 复杂表头设计及固定表头单元格内容相同自动合并、合计去除小数点
  • 一些LayUI底层方法介绍_WEB前端开发layui是一款采用自身模块规范...html表格合并单元格的方法html中,colspan属性是合并列,rowspan属性是合并行,合并行的时候,比如rowspan=”2″,它的下一行tr会少一列;合并列的...
  • 表格的基本语法表头单元格标签表格的结构标签 表格标签 表格是实际开发中非常常用的标签: 1.表格的主要作用 表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的...
  • @Excel(name = "序号",isColumnHidden=true,orderNum="0",fixedIndex = 0 ) 进行排序就可以
  • table边框表头单元格空间合并等设置,表格由标签来定义,每个表格均有若干行(由标签定义),每行被分割为若干单元格(由标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片...
  • elementui表格单元格合并表头单元格合并 页面效果如下 代码 html部分 <base-table default-height="true" class="numTable sorTable noTableBorder" :border-style="true" :columns="column" :data-...
  • layui table+复杂表头+合并单元格

    千次阅读 2019-10-01 12:44:26
    效果图: 问题:行hover效果感觉错乱 所以改为透明色 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <...复杂表头+select下拉框默认值+单元格合...
  • 1、合并单元格代码示例 表头列合并代码: 效果图 2、jqgrid表头合并和行合并,基于jquery脚本插件 下面的js是近期写的一个jqgrid表头与行合并脚本。jqgrid也真是,表头合并的功能都不提供,用起来好尴尬...
  • 表格由标签来定义,每个表格均有若干行(由标签定义),每行被分割为若干单元格(由标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格...
  • headnum0:第一行合并单元格的参数  * head1:表头第二行列名;headnum1:第二行合并单元格的参数;detail:导出的表体字段  *  */  public void reportMergeXls(HttpServletRequest request,  ...
  • 如果我们要实现表头单元格合并,即如下图这种形式,需要在前台和后台都进行相关的设置。 在前台最主要的是为GridView设置OnRowCreated事件 前台代码: <asp:GridView ID="GridView1" runat="server" ...
  • 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 data数据是后端...
  • 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头。 这个需求在js里用Juicer模板很好做的,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,514
精华内容 4,605
关键字:

html表头合并单元格