精华内容
下载资源
问答
  • 表格跨行
    2021-11-10 11:06:38

    1.概述

    element table 有一个属性:span-method 可以设置单元格合并,通过给table传入span-method方法可以实现合并行或列。

    方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。

    该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

    因为:span-method的函数会自动遍历每一个单元格的数据,这里可以打印一下函数的参数。我们需要对一维数组进行相同项处理,把每一行需要合并的数据放在一个数组里形式例如[3,0,0,2,0],这个数据形式代表第一行合并3行,第二行被合并,第三行被合并,第四行合并2行…

    2.template区域

    <el-table border stripe :data="tableData" :span-method="objectSpanMethod">
      <el-table-column></el-table-column>
      <el-table-column></el-table-column>
      <el-table-column></el-table-column>
    </el-table>
    

    3.JS区域

    data() {
      return {
        tableData: [],
        spanArr: [],
        pos: 0
      }
    },
    methods: {
    	// 获取列表数据  
      async getDetail() {
          const params = {}
          const { data: res } = await this.$http.post('')
          if (res.code && res.code !== 200) return messageTip(res.message, 4)
          const data = res.data
          this.tableData = res.data
          this.getSpanArr(tableData)
        },
        // 要合并的数组
        getSpanArr(data) {
          this.spanArr = []
          data.forEach((item, index) => {
            if (index === 0) {
              this.spanArr.push(1)
              this.pos = 0 // 指针
            } else {
              if (item['etype'] && item['etype'] === data[index - 1]['etype']) { //当前项和前一项比较 
                this.spanArr[this.pos] += 1; //相同值第一个出现的位置,统计需要合并多少行,指针往后移动一位
                this.spanArr.push(0); //新增一个被合并行 0表示要合并
              } else {
                this.spanArr.push(1); //否则不合并
                this.pos = index; //指向位移
              }
            }
          })
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0) {
            // item.etype == '1' ? '订单' : '结算'
            const _row = this.spanArr[rowIndex];
            /*  
              第一行:_row = [2, 0, 2, 0][0] = 2
              第二行:_row = [2, 0, 2, 0][1] = 0
              第三行:_row = [2, 0, 2, 0][2] = 2
              第四行:_row = [2, 0, 2, 0][3] = 0
            */
            const _col = _row > 0 ? 1 : 0;
            /*  
              第一列:_col = 1
              第二列:_col = 0
              第三列:_col = 1
              第四列:_col = 0
            */
            console.log('rowIndex', rowIndex) // 0, 1, 2, 3
            console.log('spanArr', this.spanArr) // [2, 0, 2, 0]
            console.log('_row', _row)
            console.log('_col', _col)
            return {
              rowspan: _row, // rowspan: [2, 0, 2, 0]
              colspan: _col, // colspan: [1, 0, 1, 0]
              // 最终结果:
              // 合并两行合并1列, 不合并, 不合并
              // 合并两行合并1列, 不合并, 不合并
              // 第一行合并两行,第二行被合并,第三行合并两行,第四行被合并
              // 第一行合并1列,第二列被合并,第三行合并1列,第四行被合并
            };
          }
        }
      }
    }
    
    更多相关内容
  • 今天小编就为大家分享一篇layui数据表格跨行自动合并的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 由于按照条件提取多台服务器生成的报表数据的需要,我们很可能用到php动态生成可以跨行跨列的表格,table跨行跨列杂糅在一起经常出现不好控制,而且行列合并属性的逻辑耦合度很高,所以对于这次的需要就有了如下东西
  • HTML 表格跨行跨列

    千次阅读 2021-07-12 17:03:59
    8.8跨行跨列表格(次重点,必须掌握) <!DOCTYPE html> 9-表格跨行跨列 1.1 1.3 1.4 1.5 2.1 2.2 2.3 2.4 2.5 3.2 3.3 3.4 3.5 4.1 4.2 4.3 4.4

    HTML和CSS第一天

     8.8跨行跨列表格(次重点,必须掌握)
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>9-表格的跨行跨列</title>
    </head>
    <body>
    <!--需求: 一个五行五列的表格
              第一行,第一列的单元格要跨两列
              第二行第一列的单元格跨两行,
              第四行第四列的单元格跨两行两列。
    
              colspan  属性设置跨列
              rowspan  属性设置跨行
    
              -->
    <table border="1" width="300" height="300" cellspacing="0" align="center">
      <tr>
        <th colspan="2">1.1</th>
    <!--    <td>1.2</td>-->
    <!--    第一行第二列 删掉  被第一行第一列覆盖-->
        <td align="center">1.3</td>
        <td>1.4</td>
        <td>1.5</td>
      </tr>
      <tr>
        <th rowspan="2">2.1</th>
    <!--    覆盖掉第三行第一列-->
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
      </tr>
      <tr>
    <!--    <th>3.1</th>-->
    <!--    被第二行第一列所覆盖 删掉-->
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
      </tr>
      <tr>
        <th>4.1</th>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2" align="center"><b>4.4</b></td>
    <!--    覆盖掉原本的第四行第五列和第五行第四列,第五行第五列-->
    <!--    <td>4.5</td>-->
    <!--   被第四行第四列所覆盖掉-->
      </tr>
      <tr>
        <th>5.1</th>
        <td>5.2</td>
        <td>5.3</td>
    <!--    <td>5.4</td>-->
    <!--    <td>5.5</td>-->
    <!--    上两个单元格都被第四行第四列所覆盖掉了-->
      </tr>
    
    </table>
    </body>
    </html>
    
       ![代码运行结果](https://img-blog.csdnimg.cn/20210712170338504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MzQ1Njg0OQ==,size_16,color_FFFFFF,t_70)
    

    代码运行结果

    展开全文
  • 一般使用元素的colspan属性来实现单元格跨列操作,使用元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数,所有浏览器都支持colspan属性。其取值为number,如下图所示:例如:星期一星期...

    一般使用

    元素的colspan属性来实现单元格跨列操作,使用元素的rowspan属性来实现单元格的跨行操作。

    colspan属性规定单元格可横跨的列数,所有浏览器都支持colspan属性。其取值为number,如下图所示:

    fbf5c33b3cf644a65b7de2ad2312689c.gif

    例如:

    星期一星期二
    星期天

    实现结果如下图所示:

    fbf5c33b3cf644a65b7de2ad2312689c.gif

    rowspan属性规定单元格可横跨的列数,所有浏览器都支持rowspan属性。其取值为number,如下图所示:

    fbf5c33b3cf644a65b7de2ad2312689c.gif

    例如:

    星期一星期二
    星期三

    实现结果如下图所示:

    fbf5c33b3cf644a65b7de2ad2312689c.gif

    总结colspan和rowspan的使用如下:

    物资详情说明
    数量(支)重量(吨)
    实发数实收数
    1210100.00

    实现结果如下图所示:

    fbf5c33b3cf644a65b7de2ad2312689c.gif

    到此这篇关于HTML表格跨行跨列操作(rowspan、colspan)的文章就介绍到这了,更多相关HTML表格跨行跨列内容请搜索电脑自学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持电脑自学网!

    本文由 电脑自学网 用户搜集于网络,其版权均为原作者所有,若侵犯您的版权,请来信告知,如需转载,请注明文章来源。

    发表评论评分

    有人回复时邮件通知我

    本站文章均由网友收集于网络,若侵犯您的权益请来信告知,[email protected]

    Copyright © 2012-2017 52ZIXUE 电脑自学网  赣ICP备17008695号-1

    2eba5bc4af73ff208a997f4fe9857dab.png

    按文章类型进行搜索

    文章

    专题

    下载

    视频

    [xh_social_page_login]

    分享图片生成中…

    gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

    展开全文
  • itextpdf 表格跨行跨列与可视化图表

    万次阅读 热门讨论 2021-10-08 18:04:03
    文章目录itextpdf 表格跨行跨列与可视化图表效果图普通表格一(表头背景色)普通表格二 (隔列变色)表格跨行跨列可视化图表使用示例普通表格一(表头背景色)普通表格二 (隔列变色)表格跨行跨列可视化图表工具类...

    itextpdf 表格跨行跨列与可视化图表

    效果图

    普通表格一(表头背景色)

    在这里插入图片描述

    普通表格二 (隔列变色)

    在这里插入图片描述

    表格跨行跨列

    在这里插入图片描述

    可视化图表

    饼图
    在这里插入图片描述
    柱状图
    在这里插入图片描述
    折线图
    在这里插入图片描述

    使用示例

    普通表格一(表头背景色)

    PdfUtil.addLevel2Title(doc, "对外投资信息");
    PdfUtil.Table(7, textFont, new TableDataUtil()
            .add(RowData.add("序号", "名称", "法定代表人", "注册资金", "注册号", "成立日期", "地址"))
            .addList(GetData.get(desensitization, result, Compoent.INVESTMENTLIST, "NO", "InvestName", "Legal", "RegCapital", "EntRegNo", "EstDate", "RegAddress"))
            .toList(), doc);
    

    普通表格二 (隔列变色)

    PdfUtil.addLevel2Title(doc, "社保基本信息");
    PdfUtil.TableBuleColspan(4, textFont, new TableDataUtil()
            .add(RowData.add("社保单位编号", GetData.get(result, Compoent.INHFSOCIALSECURITY, "SocialSecurityNo", desensitization), "投保起始年", GetData.get(result, Compoent.INHFSOCIALSECURITY, "InsuredYear")))
            .add(RowData.add("投保起始月", GetData.get(result, Compoent.INHFSOCIALSECURITY, "InsuredMonth"), "当前状态", GetData.get(result, Compoent.INHFSOCIALSECURITY, "CurrentState")))
            .add(RowData.add("参保总人数", GetData.get(result, Compoent.INHFSOCIALSECURITY, "TotalCNT"), "养老参保人数", GetData.get(result, Compoent.INHFSOCIALSECURITY, "EICNT")))
            .add(RowData.add("医疗参保人数", GetData.get(result, Compoent.INHFSOCIALSECURITY, "MICNT"), "工伤参保人数", GetData.get(result, Compoent.INHFSOCIALSECURITY, "IICNT")))
            .add(RowData.add("失业参保人数", GetData.get(result, Compoent.INHFSOCIALSECURITY, "UICNT")))
            .toList(), doc, new int[]{5}, new int[]{2}, new int[]{3});
    

    表格跨行跨列

    PdfUtil.TableBlueColRowSpan(4, textFont, new TableDataUtil()
            .add(RowData.add("科目", "报表年份"))
            .add(balanceSheetKeys)
            .addList(RowData.add(balanceSheetDataGroup, (data) -> {
                List<List<String>> res = new ArrayList<>();
                data.forEach((k, v) -> {
                    List<String> row = new ArrayList<>();
                    row.add(k);
                    Map<String, String> kv = v.stream().collect(Collectors.toMap(key -> String.valueOf(key.get("PeriodYear")), value -> String.valueOf(value.get("ClosingBalanceAsset"))));
                    balanceSheetKeysGroup.keySet().forEach(i -> {
                        row.add(Optional.ofNullable(kv.get(i)).orElse(""));
                    });
                    if (row.size() < 4) {
                        for (int i = row.size() - 1; i < 3; i++) {
                            row.add("");
                        }
                    }
                    res.add(row);
                });
                return res;
            }))
            .toList(), doc, new int[][]{{1}, {1}}, new int[][]{{2}, {1}}, new int[][]{{3}, {2}});
    

    可视化图表

    饼图

    PdfPTable table = new PdfPTable(2);
    table.setTotalWidth(530);
    table.setLockedWidth(true);
    
    PdfPCell leftImage = new PdfPCell();
    
    bos = new ByteArrayOutputStream();
    ChartUtils.writeChartAsJPEG(bos, ChartUtil.pieChart(String.join("", balanceSheetChartDataGroup.keySet()) + "资产结构", balanceSheetPieData), 400, 400);
    image = Image.getInstance(bos.toByteArray());
    image.scalePercent(60);
    leftImage.addElement(image);
    leftImage.disableBorderSide(-1);
    table.addCell(leftImage);
    

    柱状图

    imageBaos = new ByteArrayOutputStream();
    ChartUtils.writeChartAsJPEG(imageBaos, ChartUtil.barChart("", "", "", balanceSheetBarChartDataset, "{2}%"), 850, 330);
    chartImage = Image.getInstance(imageBaos.toByteArray());
    chartImage.scalePercent(60);
    doc.add(chartImage);
    

    折线图

    ChartUtils.writeChartAsJPEG(imageBaos, ChartUtil.lineChart("用水量(立方)", "", "", waterLineDataset, CategoryLabelPositions.UP_90), 850, 430);
    chartImage = Image.getInstance(imageBaos.toByteArray());
    chartImage.scalePercent(60);
    doc.add(chartImage);
    

    工具类源码

    依赖包

    • itextpdf 5.5.6
    • jfreechart 1.5.3

    大家根据实际使用场景删除代码

    PdfUtil

    static class PdfUtil {
        public static void addLevel1Title(Document doc, String title) throws DocumentException {
            Paragraph p1 = new Paragraph(title, secondTitleFont);
            p1.setAlignment(Element.ALIGN_CENTER);
            doc.add(p1);
        }
    
        public static void addLevel2Title(Document doc, String title) throws DocumentException {
            Paragraph p1 = new Paragraph(title, threeTitleFont);
            p1.setAlignment(Element.ALIGN_LEFT);
            p1.setSpacingAfter(8);
            doc.add(p1);
        }
    
        public static void addOtherContent(Document doc, String content, int alignment, Font fontSize, float spacingAfter) throws DocumentException {
            Paragraph p1 = new Paragraph(content, fontSize);
            p1.setAlignment(alignment);
            p1.setSpacingAfter(spacingAfter);
            doc.add(p1);
        }
    
        public static void addLevel2Title(Document doc, String title, boolean newPage) throws DocumentException {
            doc.newPage();
            Paragraph p1 = new Paragraph(title, threeTitleFont);
            p1.setAlignment(Element.ALIGN_LEFT);
            p1.setSpacingAfter(8);
            doc.add(p1);
        }
    
        /**
         * 生成一个表格
         *
         * @param total    总列数
         * @param textFont 字体
         * @param data     表格数据     X行    Y列
         * @param doc      PDF文档对象
         * @throws DocumentException
         * @author hou_fx
         */
        public static void Table(int total, Font textFont, List<List<String>> data, Document doc) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            table.setPaddingTop(20);
            table.setSpacingAfter(20);
            table.setTotalWidth(530); //设置列宽
            table.setLockedWidth(true); //锁定列宽
            PdfPCell cell;
            for (int i = 0; i < data.size(); i++) {  //遍历数据行   每个数据行都是一个list
                Iterator<String> it = data.get(i).iterator();
                while (it.hasNext()) {               //遍历每行数据,每个数据都是一个单元格
                    String text = it.next();
                    cell = new PdfPCell(new Phrase(text, textFont));
                    //表头背景色
                    if (i == 0) {
                        cell = new PdfPCell(new Phrase(text, textFontBold));
                        cell.setBackgroundColor(new BaseColor(199, 217, 241));
                    }
                    cell.setMinimumHeight(17); //设置单元格高度
                    cell.setUseAscender(true); //设置可以居中
    
                    cell.setHorizontalAlignment(i == 0 ? Element.ALIGN_CENTER : Element.ALIGN_LEFT); //表头居中,其余左对齐
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
                    table.addCell(cell);
                }
            }
            doc.add(table);
        }
    
        public static void TableNoAfter(int total, Font textFont, List<List<String>> data, Document doc) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            table.setPaddingTop(20);
            table.setTotalWidth(530); //设置列宽
            table.setLockedWidth(true); //锁定列宽
            PdfPCell cell;
            for (int i = 0; i < data.size(); i++) {  //遍历数据行   每个数据行都是一个list
                Iterator<String> it = data.get(i).iterator();
                while (it.hasNext()) {               //遍历每行数据,每个数据都是一个单元格
                    String text = it.next();
                    cell = new PdfPCell(new Phrase(text, textFont));
                    //表头背景色
                    if (i == 0) {
                        cell = new PdfPCell(new Phrase(text, textFontBold));
                        cell.setBackgroundColor(new BaseColor(199, 217, 241));
                    }
                    cell.setMinimumHeight(17); //设置单元格高度
                    cell.setUseAscender(true); //设置可以居中
    
                    cell.setHorizontalAlignment(i == 0 ? Element.ALIGN_CENTER : Element.ALIGN_LEFT); //表头居中,其余左对齐
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
                    table.addCell(cell);
                }
            }
            doc.add(table);
        }
    
        public static void TableNoPadding(int total, Font textFont, List<List<String>> data, Document doc) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            table.setTotalWidth(530); //设置列宽
            table.setLockedWidth(true); //锁定列宽
            PdfPCell cell;
            for (int i = 0; i < data.size(); i++) {  //遍历数据行   每个数据行都是一个list
                Iterator<String> it = data.get(i).iterator();
                while (it.hasNext()) {               //遍历每行数据,每个数据都是一个单元格
                    String text = it.next();
                    cell = new PdfPCell(new Phrase(text, textFont));
                    cell.setMinimumHeight(17); //设置单元格高度
                    cell.setUseAscender(true); //设置可以居中
                    cell.setHorizontalAlignment(Element.ALIGN_LEFT); //表头居中,其余左对齐
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
                    table.addCell(cell);
                }
            }
            doc.add(table);
        }
    
        public static void TableNoPaddingTop(int total, Font textFont, List<List<String>> data, Document doc) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            table.setPaddingTop(0.0f);
            table.setSpacingAfter(0.0f);
            table.setTotalWidth(530); //设置列宽
            table.setLockedWidth(true); //锁定列宽
            PdfPCell cell;
            for (int i = 0; i < data.size(); i++) {  //遍历数据行   每个数据行都是一个list
                Iterator<String> it = data.get(i).iterator();
                while (it.hasNext()) {               //遍历每行数据,每个数据都是一个单元格
                    String text = it.next();
                    cell = new PdfPCell(new Phrase(text, textFont));
                    if (i == 0) {
                        cell = new PdfPCell(new Phrase(text, textFontBold));
                        cell.setBackgroundColor(new BaseColor(199, 217, 241));
                    }
                    cell.setMinimumHeight(17); //设置单元格高度
    
                    cell.setUseAscender(true); //设置可以居中
                    //表头背景色
    
                    cell.setHorizontalAlignment(i == 0 ? Element.ALIGN_CENTER : Element.ALIGN_LEFT); //表头居中,其余左对齐
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
                    table.addCell(cell);
                }
            }
            doc.add(table);
        }
    
        public static int appearNumber(String srcText, String findText) {
            int count = 0;
            Pattern p = Pattern.compile(findText);
            Matcher m = p.matcher(srcText);
            while (m.find()) {
                count++;
            }
            return count;
        }
    
        /**
         * 生成一个表格
         *
         * @param total    总列数
         * @param textFont 字体
         * @param data     表格数据     X行    Y列
         * @param doc      PDF文档对象
         * @throws DocumentException
         * @author hou_fx
         */
        public static void TableBule(int total, Font textFont, List<List<String>> data, Document doc) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            table.setPaddingTop(20);
            table.setSpacingAfter(20);
            table.setTotalWidth(530); //设置列宽
            table.setLockedWidth(true); //锁定列宽
            PdfPCell cell;
            for (int i = 0; i < data.size(); i++) {  //遍历数据行   每个数据行都是一个list
                int count = 0;
                for (int j = 0; j < data.get(i).size(); j++) {
                    cell = new PdfPCell(new Phrase(data.get(i).get(j), textFont));
                    //第一个单元格背景色
                    if (count % 2 == 0) {
                        cell = new PdfPCell(new Phrase(data.get(i).get(j), textFontBold));
                        cell.setBackgroundColor(new BaseColor(199, 217, 241));
                    }
                    cell.setMinimumHeight(17); //设置单元格高度
                    cell.setUseAscender(true); //设置可以居中
    
                    cell.setHorizontalAlignment(Element.ALIGN_LEFT); //左对齐
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
                    table.addCell(cell);
                    count++;
                }
            }
            doc.add(table);
        }
    
    
        /**
         * 生成一个表格
         *
         * @param total    总列数
         * @param textFont 字体
         * @param data     表格数据     X行    Y列
         * @param doc      PDF文档对象
         * @param colspan  第几列
         * @param rowspan  第几行
         * @param number   跨几列
         * @throws DocumentException
         * @author hou_fx
         */
        public static void TableBuleColspan(int total, Font textFont, List<List<String>> data, Document doc, int[] rowspan, int[] colspan, int[] number) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            table.setPaddingTop(20);
            table.setSpacingAfter(20);
            table.setTotalWidth(530); //设置列宽
            table.setLockedWidth(true); //锁定列宽
            PdfPCell cell;
            //数组下标
            int cos = 0;
            for (int i = 0; i < data.size(); i++) {  //遍历数据行   每个数据行都是一个list
                int count = 0;
                for (int j = 0; j < data.get(i).size(); j++) {
                    cell = new PdfPCell(new Phrase(data.get(i).get(j), textFont));
                    //第一个单元格背景色
                    if (j % 2 == 0) {
                        cell = new PdfPCell(new Phrase(data.get(i).get(j), textFontBold));
                        cell.setBackgroundColor(new BaseColor(199, 217, 241)); //173,216,230
                    }
                    cell.setMinimumHeight(17); //设置单元格高度
                    cell.setUseAscender(true); //设置可以居中
    
                    if (cos < rowspan.length && i == rowspan[cos] - 1 && count == colspan[cos] - 1) {
                        cell.setColspan(number[cos]);//跨单元格
                        cos++;
                    }
                    cell.setHorizontalAlignment(Element.ALIGN_LEFT); //左对齐
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
                    table.addCell(cell);
                    count++;
                }
            }
            doc.add(table);
        }
    
        /**
         * 生成一个表格
         *
         * @param total    总列数
         * @param textFont 字体
         * @param data     表格数据     X行    Y列
         * @param doc      PDF文档对象
         * @param colspan  第几列 [][] 0 跨列 1 跨行
         * @param rowspan  第几行 [][] 0 跨列 1 跨行
         * @param number   跨几列 [][] 0 跨列 1 跨行
         * @throws DocumentException
         * @author hou_fx
         */
        public static void TableBlueColRowSpan(int total, Font textFont, List<List<String>> data, Document doc, int[][] rowspan, int[][] colspan, int[][] number) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            table.setPaddingTop(20);
            table.setSpacingAfter(20);
            table.setTotalWidth(530); //设置列宽
            table.setLockedWidth(true); //锁定列宽
            PdfPCell cell;
            for (int i = 0, cos = 0, ros = 0; i < data.size(); i++) {
                for (int j = 0; j < data.get(i).size(); j++) {
                    cell = new PdfPCell(new Phrase(data.get(i).get(j), textFont));
                    if (total != data.get(i).size()) {
                        cell = new PdfPCell(new Phrase(data.get(i).get(j), textFontBold));
                        cell.setBackgroundColor(new BaseColor(199, 217, 241)); //173,216,230
                    }
                    if (data.get(i).get(j).contains("合计") || data.get(i).get(j).contains("总计")) {
                        cell.setBackgroundColor(new BaseColor(79, 129, 189)); //173,216,230
                    }
                    cell.setMinimumHeight(17); //设置单元格高度
                    cell.setUseAscender(true); //设置可以居中
                    cell.setHorizontalAlignment(Element.ALIGN_CENTER); //左对齐
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
    
                    if (cos < rowspan[0].length && i == rowspan[0][cos] - 1 && j == colspan[0][cos] - 1) {
                        cell.setColspan(number[0][cos]);
                        cos++;
                    }
    
                    if (ros < rowspan[1].length && i == rowspan[1][ros] - 1 && j == colspan[1][ros] - 1) {
                        cell.setRowspan(number[1][ros]);
                        ros++;
                    }
    
                    table.addCell(cell);
                }
            }
            doc.add(table);
        }
    
    
        /**
         * 生成一个表格
         *
         * @param total    总列数
         * @param textFont 字体
         * @param data     表格数据     X行    Y列
         * @param doc      PDF文档对象
         * @param colspan  第几列
         * @param rowspan  第几行
         * @param number   跨几列
         * @throws DocumentException
         * @author hou_fx
         */
        public static void TableColspan(int total, Font textFont, List<List<String>> data, Document doc, int[] rowspan, int[] colspan, int[] number) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            table.setPaddingTop(20);
            table.setSpacingAfter(20);
            table.setTotalWidth(530); //设置列宽
            table.setLockedWidth(true); //锁定列宽
            PdfPCell cell;
            //数组下标
            int cos = 0;
            for (int i = 0; i < data.size(); i++) {  //遍历数据行   每个数据行都是一个list
                Iterator<String> it = data.get(i).iterator();
                int count = 0;
                while (it.hasNext()) {               //遍历每行数据,每个数据都是一个单元格
                    cell = new PdfPCell(new Phrase(it.next(), textFont));
                    cell.setMinimumHeight(17); //设置单元格高度
                    cell.setUseAscender(true); //设置可以居中
                    if (cos < rowspan.length && i == rowspan[cos] - 1 && count == colspan[cos] - 1) {
                        cell.setColspan(number[cos]);//跨单元格
                        cos++;
                    }
                    cell.setHorizontalAlignment(Element.ALIGN_LEFT);
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
                    table.addCell(cell);
                    count++;
                }
            }
            doc.add(table);
        }
    
        public static void TableColspanNo(int total, Font textFont, List<List<String>> data, Document doc, int[] rowspan, int[] colspan, int[] number) throws DocumentException {
            // 创建一个有N列的表格
            PdfPTable table = new PdfPTable(total);
            //设置列宽
            table.setTotalWidth(530);
            //锁定列宽
            table.setLockedWidth(true);
            PdfPCell cell;
            //数组下标
            int cos = 0;
            for (int i = 0; i < data.size(); i++) {  //遍历数据行   每个数据行都是一个list
                Iterator<String> it = data.get(i).iterator();
                int count = 0;
                while (it.hasNext()) {               //遍历每行数据,每个数据都是一个单元格
                    cell = new PdfPCell(new Phrase(it.next(), textFont));
                    cell.setMinimumHeight(17); //设置单元格高度
                    cell.setUseAscender(true); //设置可以居中
                    if (cos < rowspan.length && i == rowspan[cos] - 1 && count == colspan[cos] - 1) {
                        cell.setColspan(number[cos]);//跨单元格
                        cos++;
                    }
                    cell.setHorizontalAlignment(Element.ALIGN_LEFT);
                    cell.setVerticalAlignment(Element.ALIGN_MIDDLE); //设置垂直居中
                    table.addCell(cell);
                    count++;
                }
            }
            doc.add(table);
        }
    }
    

    GetData

    static class GetData {
        private final static Map<String, String> desensitizationData = new LinkedHashMap<>();
    
        static {
            desensitizationData.put("EntName", "深圳******有限公司");
            desensitizationData.put("RegAddress", "深圳市**区******");
            desensitizationData.put("SocialCreditCode", "9***************1");
            desensitizationData.put("ESocialCreditCode", "9***************1");
            desensitizationData.put("EntRegNo", "1*******0");
            desensitizationData.put("Legal", "***");
            desensitizationData.put("EntOrgCode", "1********0");
            desensitizationData.put("ShareholderName", "***");
            desensitizationData.put("FDDBRXM", "***");
            desensitizationData.put("FDDBRSFZJHM", "440**************2");
            desensitizationData.put("FDDBRGDDH", "0755-*******");
            desensitizationData.put("FDDBRYDDH", "13********0");
            desensitizationData.put("MemberName", "***");
            desensitizationData.put("InvestName", "深圳******有限公司");
            desensitizationData.put("ChangeItem", "***变更");
            desensitizationData.put("ChangeBefore", "*****");
            desensitizationData.put("ChangeAfter", "********");
            desensitizationData.put("AccFundNo", "10*******3");
            desensitizationData.put("SocialSecurityNo", "1******0");
            desensitizationData.put("RestrictDesc", "******");
            desensitizationData.put("PatentName", "******");
            desensitizationData.put("PubNo", "******");
            desensitizationData.put("WorkName", "******");
            desensitizationData.put("RegNum", "******");
            desensitizationData.put("TrademarkName", "******");
            desensitizationData.put("RregCode", "******");
            desensitizationData.put("LicenseNo", "******");
            desensitizationData.put("CaseReason", "******");
            desensitizationData.put("CaseNo", "******");
            desensitizationData.put("CaseName", "******");
            desensitizationData.put("PunishContent", "******");
            desensitizationData.put("ViolationCaseNo", "*********");
            desensitizationData.put("projectName", "*********");
            desensitizationData.put("WebSite", "*********");
            desensitizationData.put("Tel", "*********");
            desensitizationData.put("Phone", "*********");
            desensitizationData.put("IDNo", "*********");
            desensitizationData.put("CaseCode", "*********");
    
        }
    
        public static String get(Map map, Compoent compoent, String key) {
            List data = Optional.ofNullable((List) map.get(compoent.getValue())).orElse(new ArrayList<>());
            IMap imap = new IMap();
    
            if (data.size() > 0) {
                if (data.get(0) instanceof JSONObject) {
                    ((JSONObject) data.get(0)).forEach(imap::put);
                }
            }
    
            return Optional.ofNullable(imap.get(key)).orElse("-");
        }
    
        public static String get(Map map, Compoent compoent, String key, boolean desensitization) {
            List data = Optional.ofNullable((List) map.get(compoent.getValue())).orElse(new ArrayList<>());
            IMap imap = new IMap();
    
            if (data.size() > 0) {
                if (data.get(0) instanceof JSONObject) {
                    if (desensitization) {
                        ((JSONObject) data.get(0)).forEach((k, v) -> {
                            String s = String.valueOf(v);
                            imap.put(k, desensitizationData.getOrDefault(k, s));
                        });
                    } else {
                        ((JSONObject) data.get(0)).forEach(imap::put);
                    }
                }
            }
            return Optional.ofNullable(imap.get(key)).orElse("-");
        }
    
        public static List<List<String>> get(Map result, Compoent compoent, String... keys) {
            List<List<String>> res = new ArrayList<>();
            Optional.ofNullable(result.get(compoent.getValue())).ifPresent(v -> {
                if (v instanceof ArrayList) {
                    ((ArrayList) v).forEach(o -> {
                        List<String> data = new ArrayList<>();
                        JSONObject item = ((JSONObject) o);
                        for (String key : keys) {
                            data.add(StringUtils.isEmpty(item.getString(key)) ? "-" : item.getString(key));
                        }
                        res.add(data);
                    });
                }
            });
            if (res.size() == 0) {
                List<String> data = new ArrayList<>();
                for (int i = 0; i < keys.length; i++) {
                    data.add("");
                }
                res.add(data);
            }
            return res;
        }
    
        public static List<List<String>> get(Boolean desensitization, Map result, Compoent compoent, String... keys) {
            List<List<String>> res = new ArrayList<>();
            Optional.ofNullable(result.get(compoent.getValue())).ifPresent(v -> {
                if (v instanceof ArrayList) {
                    ((ArrayList) v).forEach(o -> {
                        List<String> data = new ArrayList<>();
                        JSONObject item = ((JSONObject) o);
                        for (String key : keys) {
                            if (desensitization) {
                                data.add(StringUtils.isEmpty(item.getString(key)) ? "-" : desensitizationData.get(key) == null ? item.getString(key) : desensitizationData.get(key));
                            } else {
                                data.add(StringUtils.isEmpty(item.getString(key)) ? "-" : item.getString(key));
                            }
                        }
                        res.add(data);
                    });
                }
            });
            if (res.size() == 0) {
                List<String> data = new ArrayList<>();
                for (int i = 0; i < keys.length; i++) {
                    data.add("");
                }
                res.add(data);
            }
            return res;
        }
    
        public static List<List<String>> get(Map result, Predicate<JSONObject> predicate, Compoent compoent, String... keys) {
            List<List<String>> res = new ArrayList<>();
            Optional.ofNullable(result.get(compoent.getValue())).ifPresent(v -> {
                if (v instanceof ArrayList) {
                    ((ArrayList) v).stream().filter(predicate).forEach(o -> {
                        List<String> data = new ArrayList<>();
                        JSONObject item = ((JSONObject) o);
                        for (String key : keys) {
                            data.add(StringUtils.isEmpty(item.getString(key)) ? "-" : item.getString(key));
                        }
                        if (data.size() == 0) {
                            List<String> row = new ArrayList<>();
                            for (int i = 0; i < keys.length; i++) {
                                row.add("");
                            }
                            data.addAll(row);
                        }
                        res.add(data);
                    });
                }
            });
    
            return res;
        }
    
        public static List<Map> getListMap(Map result, Compoent compoent, String... keys) {
            List<Map> data = new ArrayList<>();
            Optional.ofNullable(result.get(compoent.getValue())).ifPresent(v -> {
                if (v instanceof ArrayList) {
                    ((ArrayList) v).forEach(o -> {
                        JSONObject item = ((JSONObject) o);
                        Map map = new LinkedHashMap(16);
                        for (String key : keys) {
                            map.put(key, StringUtils.isEmpty(item.getString(key)) ? "-" : item.getString(key));
                        }
                        data.add(map);
                    });
                }
            });
            return data;
        }
    }
    

    RowData

    static class RowData {
        public static List<String> add(String... cells) {
            return Arrays.asList(cells);
        }
    
        public static List<String> add(String cells, List<String> datas) {
            datas.add(0, cells);
            return datas;
        }
    
        public static List<String> add(String cells, Map<String, String> data, Function<Map<String, String>, List<String>> func) {
            List<String> res = func.apply(data);
            res.add(0, cells);
            return res;
        }
    
        public static List<List<String>> add(Map<String, List<Map>> data, Function<Map<String, List<Map>>, List<List<String>>> func) {
            List<List<String>> res = func.apply(data);
            return res;
        }
    }
    

    TableDataUtil

    static class TableDataUtil {
        public List<List<String>> data = new ArrayList<>();
    
        public TableDataUtil add(List<String> rowData) {
            if (rowData != null && rowData.size() > 0) {
                data.add(rowData);
            }
            return this;
        }
    
        public TableDataUtil addList(List<List<String>> rowData) {
            data.addAll(rowData);
            return this;
        }
    
        public List<List<String>> toList() {
            return data;
        }
    
        public TableDataUtil add(Map<String, List<Map>> data, Function<Map<String, List<Map>>, List<List<String>>> res) {
            this.data.addAll(res.apply(data));
            return this;
        }
    }
    

    ChartUtil

    static class ChartUtil {
    
        private static final Color[] BAR_COLORS = new Color[]{
                new Color(79, 129, 189),
                new Color(192, 80, 77),
                new Color(155, 187, 89),
                new Color(128, 100, 162),
                new Color(75, 172, 198),
                new Color(247, 150, 70),
                new Color(119, 44, 42),
                new Color(77, 59, 98),
                new Color(182, 87, 8),
        };
    
        private static final Color[] LINE_COLORS = new Color[]{
                new Color(90, 154, 213),
                new Color(237, 123, 46),
                new Color(155, 187, 89),
        };
    
        private static final Color[] PIE_COLORS = new Color[]{
                new Color(79, 129, 189),
                new Color(192, 80, 77),
                new Color(155, 187, 89),
                new Color(128, 100, 162),
                new Color(75, 172, 198),
                new Color(247, 150, 70),
                new Color(119, 44, 42),
                new Color(77, 59, 98),
                new Color(182, 87, 8),
        };
    
    
        private static StandardChartTheme initChartTheme() {
            StandardChartTheme currentTheme = new StandardChartTheme("JFree");
            currentTheme.setLargeFont(new java.awt.Font("宋体", java.awt.Font.BOLD, 15));
            currentTheme.setRegularFont(new java.awt.Font("宋体", java.awt.Font.PLAIN, 13));
            currentTheme.setExtraLargeFont(new java.awt.Font("宋体", java.awt.Font.BOLD, 20));
            currentTheme.setPlotBackgroundPaint(new Color(255, 255, 204, 0));
            currentTheme.setPlotOutlinePaint(new Color(0, 0, 0, 0));
            currentTheme.setRangeGridlinePaint(new Color(78, 74, 74));
            return currentTheme;
        }
    
        /**
         * 线图
         *
         * @param title             标题
         * @param categoryAxisLabel 分类标签
         * @param valueAxisLabel    数值标签
         * @param dataset           数据集
         * @return org.jfree.chart.JFreeChart
         * @author Hou_fx
         * @date 2021.8.4 10:39
         */
        public static JFreeChart lineChart(String title, String categoryAxisLabel, String valueAxisLabel, DefaultCategoryDataset dataset) {
            ChartFactory.setChartTheme(initChartTheme());
    
            JFreeChart chart = ChartFactory.createLineChart(
                    title,
                    categoryAxisLabel,
                    valueAxisLabel,
                    dataset,
                    PlotOrientation.VERTICAL,
                    true,
                    true,
                    false
            );
    
            CategoryPlot plot = chart.getCategoryPlot();
            LineAndShapeRenderer renderer = (LineAndShapeRenderer) plot.getRenderer();
            renderer.setDefaultItemLabelsVisible(true);
            renderer.setDefaultItemLabelGenerator(new StandardCategoryItemLabelGenerator());
            for (int i = 0; i < dataset.getRowKeys().size(); i++) {
                if (i > LINE_COLORS.length - 1) {
                    renderer.setSeriesPaint(i, new Color(RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200)));
                } else {
                    renderer.setSeriesPaint(i, LINE_COLORS[i]);
                }
            }
            return chart;
        }
    
        public static JFreeChart lineChart(String title, String categoryAxisLabel, String valueAxisLabel, DefaultCategoryDataset dataset, CategoryLabelPositions position) {
            ChartFactory.setChartTheme(initChartTheme());
    
            JFreeChart chart = ChartFactory.createLineChart(
                    title,
                    categoryAxisLabel,
                    valueAxisLabel,
                    dataset,
                    PlotOrientation.VERTICAL,
                    true,
                    true,
                    false
            );
    
            CategoryPlot plot = chart.getCategoryPlot();
            plot.getDomainAxis().setCategoryLabelPositions(position);
            LineAndShapeRenderer renderer = (LineAndShapeRenderer) plot.getRenderer();
            renderer.setDefaultItemLabelsVisible(true);
            renderer.setDefaultItemLabelGenerator(new StandardCategoryItemLabelGenerator());
            for (int i = 0; i < dataset.getRowKeys().size(); i++) {
                if (i > LINE_COLORS.length - 1) {
                    renderer.setSeriesPaint(i, new Color(RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200)));
                } else {
                    renderer.setSeriesPaint(i, LINE_COLORS[i]);
                }
            }
            return chart;
        }
    
        /**
         * 柱状图
         *
         * @param title
         * @param categoryAxisLabel
         * @param valueAxisLabel
         * @param dataset           数据集
         * @return org.jfree.chart.JFreeChart
         * @author Hou_fx
         * @date 2021.8.4 14:03
         */
        public static JFreeChart barChart(String title, String categoryAxisLabel, String valueAxisLabel, DefaultCategoryDataset dataset) {
            ChartFactory.setChartTheme(initChartTheme());
            JFreeChart chart = ChartFactory.createBarChart(
                    title,
                    categoryAxisLabel,
                    valueAxisLabel,
                    dataset,
                    PlotOrientation.VERTICAL,
                    true,
                    true,
                    false
            );
            CategoryPlot plot = chart.getCategoryPlot();
            BarRenderer renderer = (BarRenderer) plot.getRenderer();
            renderer.setBarPainter(new StandardBarPainter());
            renderer.setDefaultItemLabelsVisible(true);
            renderer.setDefaultItemLabelGenerator(new StandardCategoryItemLabelGenerator());
            renderer.setItemMargin(0.0);
    
            for (int i = 0; i < dataset.getRowKeys().size(); i++) {
                if (i > BAR_COLORS.length - 1) {
                    renderer.setSeriesPaint(i, new Color(RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200)));
                } else {
                    renderer.setSeriesPaint(i, BAR_COLORS[i]);
                }
            }
            return chart;
        }
    
        public static JFreeChart barChart2(String title, String categoryAxisLabel, String valueAxisLabel, DefaultCategoryDataset dataset, DefaultCategoryDataset dataset2, String format2) {
            ChartFactory.setChartTheme(initChartTheme());
            JFreeChart chart = ChartFactory.createBarChart(
                    title,
                    categoryAxisLabel,
                    valueAxisLabel,
                    dataset,
                    PlotOrientation.VERTICAL,
                    true,
                    true,
                    false
            );
            CategoryPlot plot = chart.getCategoryPlot();
            NumberAxis axis = new NumberAxis();
            axis.setNumberFormatOverride(new DecimalFormat("#,##%"));
            plot.setRangeAxis(1, axis);
            plot.setRangeAxisLocation(1, AxisLocation.BOTTOM_OR_RIGHT);
            plot.setDataset(1, dataset2);
            plot.mapDatasetToRangeAxis(1, 1);
            BarRenderer renderer2 = new BarRenderer();
            renderer2.setSeriesPaint(0, new Color(238, 8, 8, 0));
            renderer2.setDefaultItemLabelsVisible(true);
            renderer2.setDefaultItemLabelGenerator(new StandardCategoryItemLabelGenerator(format2, NumberFormat.getInstance()));
            ItemLabelPosition position1 = new ItemLabelPosition(ItemLabelAnchor.INSIDE12, TextAnchor.TOP_RIGHT);
            renderer2.setDefaultPositiveItemLabelPosition(position1);
            plot.setRenderer(1, renderer2);
    
            BarRenderer renderer = (BarRenderer) plot.getRenderer();
            renderer.setBarPainter(new StandardBarPainter());
            renderer.setDefaultItemLabelsVisible(true);
            renderer.setDefaultItemLabelGenerator(new StandardCategoryItemLabelGenerator());
            renderer.setItemMargin(0.0);
    
            for (int i = 0; i < dataset.getRowKeys().size(); i++) {
                if (i > BAR_COLORS.length - 1) {
                    renderer.setSeriesPaint(i, new Color(RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200)));
                } else {
                    renderer.setSeriesPaint(i, BAR_COLORS[i]);
                }
            }
            return chart;
        }
    
        public static JFreeChart barChart(String title, String categoryAxisLabel, String valueAxisLabel, DefaultCategoryDataset dataset, String format) {
            ChartFactory.setChartTheme(initChartTheme());
    
            JFreeChart chart = ChartFactory.createBarChart(
                    title,
                    categoryAxisLabel,
                    valueAxisLabel,
                    dataset,
                    PlotOrientation.VERTICAL,
                    true,
                    true,
                    false
            );
    
            CategoryPlot plot = chart.getCategoryPlot();
            BarRenderer renderer = (BarRenderer) plot.getRenderer();
            renderer.setBarPainter(new StandardBarPainter());
            renderer.setDefaultItemLabelsVisible(true);
            renderer.setDefaultItemLabelGenerator(new StandardCategoryItemLabelGenerator(format, NumberFormat.getInstance()));
            renderer.setItemMargin(0.0);
    
            for (int i = 0; i < dataset.getRowKeys().size(); i++) {
                if (i > BAR_COLORS.length - 1) {
                    renderer.setSeriesPaint(i, new Color(RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200)));
                } else {
                    renderer.setSeriesPaint(i, BAR_COLORS[i]);
                }
            }
            return chart;
        }
    
        /**
         * 饼图
         *
         * @param title
         * @param dataset
         * @return org.jfree.chart.JFreeChart
         * @author Hou_fx
         * @date 2021.8.4 14:04
         */
        public static JFreeChart pieChart(String title, DefaultPieDataset<String> dataset) {
            ChartFactory.setChartTheme(initChartTheme());
    
            JFreeChart chart = ChartFactory.createPieChart(
                    title,
                    dataset,
                    true,
                    true,
                    false
            );
            PiePlot plot = (PiePlot) chart.getPlot();
            for (int i = 0; i < dataset.getKeys().size(); i++) {
                if (i > PIE_COLORS.length - 1) {
                    plot.setSectionPaint(dataset.getKey(i), new Color(RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200), RandomUtils.nextInt(110, 200)));
                } else {
                    plot.setSectionPaint(dataset.getKey(i), PIE_COLORS[i]);
                }
            }
            plot.setDefaultSectionOutlinePaint(new Color(255, 255, 255));
            plot.setDefaultSectionOutlineStroke(new BasicStroke(3));
            //plot.setLabelLinkPaint(new Color(255, 255, 255, 0));
            plot.setLabelBackgroundPaint(new Color(255, 255, 255, 0));
            plot.setLabelOutlinePaint(new Color(255, 255, 255, 0));
            plot.setLabelShadowPaint(new Color(255, 255, 255, 0));
            plot.setShadowPaint(new Color(255, 255, 255, 0));
            //plot.setLabelGenerator(new StandardPieSectionLabelGenerator(("{0}{2}"), NumberFormat.getNumberInstance(), new DecimalFormat("0.00%")));
            plot.setLabelGenerator(new StandardPieSectionLabelGenerator(("{2}"), NumberFormat.getNumberInstance(), new DecimalFormat("0.00%")));
            return chart;
        }
    }
    
    展开全文
  • 之前做过的一个功能,需要将layui的表格数据行合并,于是在百度找了很多layui数据表格跨行自动合并的方法,经过多次的尝试,最后选择了下面这个方法。写完后发现最后一列的固定列的高度跟表格列相差太大,所以又对...
  • element+vue实现表格跨行

    千次阅读 2019-02-24 15:08:23
    这是一次记使用element-ui的table组件加vue实现的表格跨行跨列实践。 首先是查看element的table组件的api: &lt;template&gt; &lt;div&gt; &lt;el-table :data="tableData6"...
  • 一般使用元素的colspan属性来实现单元格跨列操作,使用元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数,所有浏览器都支持colspan属性。其取值为number,如下图所示:例如:星期一星期...
  • layui数据表格跨行自动合并

    万次阅读 热门讨论 2018-08-07 17:08:42
    在数据表格中,对于按某个分类展示数据其分类下又有多个细分的嵌套细分项,如省市区昵称,省下面有多个市,市下面有多个区,区下面有昵称,需要实现跨行合并,且操作按钮以分类为单位(即操作按钮需按照分类合并)。...
  • angular 表格跨行

    2017-04-07 15:15:03
    table class="table table-bordered"> thead> tr> th>teacherth> th>studentth> th>projectth> tr> thead> tbody ng-repeat="teacher in vm.teach
  • C# 表格跨行和跨列应用实例

    千次阅读 2018-01-27 17:58:52
    表格跨行和跨列使用实例    学生成绩表  学号姓名班级名称    2008011201  李金刚  软件1班      2008011202td>  王泽瑞  
  • Flutter实现Table跨行跨列
  • 在复杂的表格结构中,有的单元格在水平方向上是跨多个单元格的,这就需要使用跨行属性ROWSPAN。 基本语法 语法解释 VALUE代表单元格跨的行数。 文件范例:10-32.htm 通过ROWSPAN属性实现跨行的单元格。01 <!– ...
  • latex跨行跨列表格

    千次阅读 2021-08-11 16:56:21
    使用revtex模板的跨行跨列表格时候不需要使用\usepackage{booktabs},否则midrule,toprule这些线条不能够正常显示。因此需要使用自带的线条。 下面记录一下我试用过的跨行跨列表格latex语法 \begin{table}[hb] \...
  • colspan 属性设置跨列 rowspan 属性设置跨行 ...表格跨行跨列</title> </head> <body> <!-- 需求: 1、新建一个五行五列的表格——快捷创建方法:输入table>tr*5>td*5,
  • HTML 表格跨行与跨列

    万次阅读 2014-05-24 08:54:27
    <table border="1px" width="300px" cellspacing="0" cellpadding="0" bgcolor="red" ><!...--rowspan="3"3 --> 星期一 星期二 星期三 张3 里司 望物 张2 里司2 望物3
  • 主要介绍了js动态修改表格行colspan列跨度的方法,实例分析了javascript动态修改html中table属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • 表格跨行与跨列

    2020-09-01 00:04:51
    表格跨行与跨列(课表示例) colspan 属性:用来规定表格单元格可横跨的列数。 rowspan 属性:用来规定表格单元格可横跨的行数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset...
  • html表格跨行跨列

    2021-07-02 10:15:33
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta ...7.表格跨行跨列</title> <
  • html表格跨行和跨列

    千次阅读 2019-05-10 16:10:36
    单元格两格:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <...
  • 自定义导出word表格的格式和内容,跨行跨列等操作,可供学习和参考。
  • HTML表格的使用 与 跨行跨列

    千次阅读 2021-06-12 04:19:38
    表格标签table创建标签tr可以有多行3.在第一标签tr里创建单元格标签th可以创建表格标题4.在行标签tr里创建单元格标签td可以有多个单元格为了显示表格的轮廓,一般还需要设置table标签的border边框属性,指定...
  • 【HTML】表格跨行跨列

    千次阅读 2021-12-08 11:38:49
    表格跨行跨列 第一行第一列的单元格要跨两列,利用colspan属性来实现跨列 <tablealign="center"border="1"width="200"height="200"cellspacing="0"> <tr> <thcolspan="2">1.1</th>...
  • 而在table表格中,可以使用跨行或跨列属性的单元格有以下两种:1、表头单元格➜由标签创建的表头信息,其文本默认为居中的粗体文本;2、标准单元格➜由标签创建的数据信息,其文本默认为左对齐的普通文本;也就是说...
  • vue+element实现表格跨行或跨列合并

    千次阅读 2017-12-29 09:51:19
    vue+element用于pc后台管理系统比较多,所以后台管理系统一般以处理数据为主,数据结构的复杂程度变高,相对应的前端展示成本也提高,有些产品经理或许会要求表格跨行或跨列合并,如果你正在想怎么实现,那就接着往下看...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,168
精华内容 24,467
关键字:

表格跨行