js中动态合并单元格

最新推荐文章于 2023-09-08 11:41:24 发布
最新推荐文章于 2023-09-08 11:41:24 发布
阅读量768 收藏 1
点赞数
分类专栏： 笔记 文章标签： js动态合并单元格

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>巡检结果报表</title>
    <#include "/common.html">
</head>
<body>

<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="searchbox">
            <form class="layui-form">
                <div class="searchbox-inline">
                    <label>部门选择：</label>
                    <div>
                        <input type="text" v-model="q.deptName"  @click="deptTree($event)" readonly="readonly" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="searchbox-inline">
                    <label>时间查询：</label>
                    <div>
                        <input type="text" autocomplete="off"  id="time" class="layui-input" v-model="q.time" placeholder="选择要查看的日期">
                    </div>
                </div>
                <div class="searchbox-inline">
                    <label style="opacity: 0">搜索</label>
                    <div>
                        <span class="layui-btn layui-icon layui-icon-search layui-btn-blue" @click="query" title="查询"></span>
                    </div>
                </div>
            </form>
        </div>
		<table class="layui-table" id="aduitTable">
            <thead>
            <tr style="text-align: center">
                <td colspan="11" style="font-weight: bold; font-size: 18px;">巡检时间修改报表</td>
            </tr>
            <!--列名-->
            <tr style="text-align: center">
                <td style="width: 120px">部门名称</td>
                <td>线别名称</td>
                <td>区间/站场</td>
                <td>公里标</td>
                <td>巡检开始时间</td>
                <td>巡检结束时间</td>
                <td>工作开始时间</td>
                <td>工作结束时间</td>
                <td>创建人</td>
                <td>创建时间</td>
                <td style="width: 80px">修改原因</td>
            </tr>
            </thead>
            <tbody id="aduitTableTr">
            </tbody>
        </table>


    </div>
    <div>

    </div>
</div>

<!-- 选择部门 -->
<div id="deptLayer" style="display: none;padding:10px;">
    <ul id="deptTree" class="ztree"></ul>
</div>
<script src="${request.contextPath}/statics/js/modules/inspection/updatetimereport.js?_${.now?long}"></script>
</body>

</html>

JS页面

var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "deptId",
            pIdKey: "parentId",
            rootPId: -1
        },
        key: {
            url: "nourl"
        }
    }
};
$(function () {
    vm.query();
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#time',
            trigger: 'click',
            type: 'datetime',
            range: true,
            done: function (value, date, endDate) {
                vm.q.time = value;
            }
        });

    });

});

function unique1(array) {
    var n = []; //一个新的临时数组
    //遍历当前数组
    for (var i = 0; i < array.length; i++) {
        //如果当前数组的第i已经保存进了临时数组，那么跳过，
        //否则把当前项push到临时数组里面
        if (n.indexOf(array[i]) == -1) n.push(array[i]);
    }
    return n;
}
var ztree;
var vm = new Vue({
    el: '#rrapp',
    data: {
        test: null,
        showList: true,
        q: {
            deptId: "",
            deptName: "",
            time: ""
        },
        reportList: [],
        sectionPositionName: "全部",
        uploadList: []
    },
    mounted: function () {
        this.getDept();

    },
    methods: {
        exportExcel: function () {
            window.location.href = baseURL + 'inspection/inspectionaudit/export?time=' + vm.q.time + "&deptId=" + vm.q.deptId;
        },
        query: function () {
            $.ajax({
                type: "POST",
                url: baseURL + 'inspection/inspectionplanupdatetime/updateTimeReport',
                data: vm.q,
                success: function (r) {
                    if (r.code === 0) {
                        $('#aduitTableTr').empty();
                        var forNum = -1;
                        for (var s = 0; s < r.list.length; s++) {
                            vm.reportList = r.list[s];
                            var html = "";
                            var planIds = [];
                            for (var i = 0; i < vm.reportList.length; i++) {
                                planIds.push(vm.reportList[i].planId);
                            }
                            planIds = unique1(planIds);
                            for (var i = 0; i < vm.reportList.length; i++) {
                                forNum = forNum + 1;
                                var item = vm.reportList[i];
                                for (var o in item) {
                                    if (item[o] == null) {
                                        item[o] = "";
                                    }
                                }
                                html = '<tr>                                                          ' +
                                    '	<td class="txt_center">' + item.deptName + '</td>            ' +
                                    '	<td class="txt_center">' + item.lineName + '</td>            ' +
                                    '	<td class="txt_center">' + item.region + '</td>              ' +
                                    '	<td class="txt_center">' + item.mileages + '</td>             ' +
                                    '	<td class="txt_center">' + item.beforeAndAfterUpdatePlanStartTime + '</td>            ' +
                                    '	<td class="txt_center">' + item.beforeAndAfterUpdatePlanFinishTime + '</td>            ' +
                                    '	<td class="txt_center">' + item.beforeAndAfterUpdateWorkStartTime + '</td>         ' +
                                    '	<td class="txt_center">' + item.beforeAndAfterUpdateWorkEndTime + '</td>       ' +
                                    '	<td class="txt_center">' + item.updateUserName + '</td>         ' +
                                    '	<td class="txt_center">' + item.updateTime + '</td>          ' +
                                    '	<td class="txt_center">' + item.updateMessage + '</td>      ' +
                                    '</tr>                                 ';
                                $('#aduitTableTr').append(html);
                            }

                        }
                        if (html) {
                        	//！！！合并语句，第一个0为开始行，第二个0为结束行，中括号内为要合并的列，以下标计算
                            vm.MergeCell('aduitTableTr', 0, 0, [0, 1, 2, 3]);
                        }
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        getDept: function () {
            //加载部门树
            $.get(baseURL + "sys/dept/select", function (r) {
                ztree = $.fn.zTree.init($("#deptTree"), setting, r.deptList);
                var node = ztree.getNodeByParam("deptId", vm.q.deptId);
                if (node != null)
                    vm.q.deptName = node.name;
            })
        },
        deptTree: function (event) {
            layer.open({
                type: 1,
                offset: '50px',
                skin: 'layui-layer-molv',
                title: "选择部门",
                area: ['300px', '450px'],
                shade: 0,
                shadeClose: false,
                content: jQuery("#deptLayer"),
                btn: ['确定', '取消'],
                btn1: function (index) {
                    var node = ztree.getSelectedNodes();
                    vm.q.deptId = node[0].deptId;
                    vm.q.deptName = node[0].name;

                    layer.close(index);
                }
            });
        },
        //动态合并的具体算法
        MergeCell: function (tableId, startRow, endRow, colArr) {
            var tb = document.getElementById(tableId);

            //当检查第0列时检查所有行
            if (endRow == 0) {
                endRow = tb.rows.length - 1;
            }

            for (var j = 0; j < colArr.length; j++) {
                var col = colArr[j];
                if (col >= tb.rows[0].cells.length) {
                    return;
                }
                startRow = 0;
                for (var i = startRow; i < endRow; i++) {
                    //程序是自左向右合并
                    if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
                        //如果相同则删除下一行的第0列单元格
                        tb.rows[i + 1].cells[col].style.display = 'none';
                        //更新rowSpan属性
                        tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
                        //当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
                        if (i == endRow - 1 && startRow != endRow) {
                            //this.MergeCell(tableId, startRow, endRow, col + 1);
                        }
                    } else {
                        //起始行，终止行不变，检查下一列
                        //this.MergeCell(tableId, startRow, i, col + 1);
                        //增加起始行
                        startRow = i + 1;
                    }
                }
            }


        }


    }
});
m0_37833227
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
jxls动态合并单元格
weixin_33948416的博客
04-28 4630
2019独角兽企业重金招聘Python工程师标准>>> ...
JS合并相同单元格
轻风细雨_林木木
09-01 730
参考：https://blog.csdn.net/Jioho_chen/article/details/84593753。
el-table动态合并单元格
weixin_37252943的博客
11-10 1838
el-table动态合并单元格
使用EasyExcel 根据单元格数值动态合并单元格
weixin_44625361的博客
06-27 7442
使用EasyExcel 根据单元格数值动态合并单元格开发中遇到一个需求，需要根据Excel表格中单元格的值，进行列合并的操作。
el-table 动态表格 + 动态合并多列单元格方法
⭐
05-25 2710
el-table 动态表格 + 动态合并多列单元格方法
js合并内容相同的单元格
qianhe_he的专栏
03-12 6097
function MergeDateCells(tab) {  //从第二行开始，排除标题行  var startRow = 1;  //循环记录表格中td的内容,用来判断td中的value是否发生了改变  var tdTempV = "";  //如果td的值相同,那么变量加1, 否则将临时变量加入集合中  var rowCount = 1;  //得到相同内容的行数的集合www.
JS实现动态修改table及合并单元格的方法示例
10-20
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
动态合并单元格
01-08
用JS动态合并单元格算法，利用一个结果集List来生成，数据过多会加重客户断负担 --%> ${status.index>=tempEnd}"> <c:set var="rowspanCount" value="0"></c:set>清楚历史数据 --%> ${list}" varStatus="status2...
Javascript合并表格中具有相同内容单元格示例
10-27
表格相同内容单元格的合并在以前也有过类似的教程，本文为大家讲解的是使用Javascript合并，具体示例及效果图如下，感兴趣的朋友可以参考下
jquery datatable 单元格合并
04-26
通过Datatables的`drawCallback`或`initComplete`事件，在表格渲染完成后合并单元格。遍历预处理得到的合并信息，使用DOM操作修改表格结构。 ```javascript $('#example').DataTable({ // ...其他配置... ...
js动态合并单元格
weixin_45411740的博客
07-16 1812
前几天做网页的时候涉及到动态合并单元格的问题，经过一番努力终于是做好了，所以现在把代 码贴出来。 首先说一下我们要实现的效果原图是这样的 然后我们要实现的效果是这样的 而且呢表格的生成是发送ajax请求后后端传过来的数据通过for循环动态生成的，下面贴代 html代码如下 <thead> <tr> <th>站点</th> <th>车道</th> <th>时间&l...
js实现表格动态合并
weixin_52776724的博客
03-09 1759
【代码】js实现表格动态合并。
JS 合并表格
qq_41834408的博客
12-12 1633
【代码】JS 合并表格。
table根据相同内容动态合并单元格
最新发布
cyx924的博客
09-08 1365
4、最开始的时候在网上找了很多种方法，都涉及到用var tb= document.getElementId('tb)来获取table数据，但是尝试了多种方法都无法获得tb.rows的数据，因此放弃用获取ID的方式。本篇中记录的方式是亲测有用的。
el-table动态合并单元格 动态新增和动态删除
linwenbo1的博客
11-03 1538
el-table 动态合并单元格 动态新增和删除
table 表格中动态合并单元格
jieyigeweixiao的博客
09-02 983
function hide(v) {//参数：输入要隐藏的列数，要查第几列，我的是第一列和第二列，所以上面是hide(0)和hide(1) tr = $("#sample_1 tr").length;// 获取当前表格中行数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格，需要存储两个参数， * 1，开始合并的单元格的第一行的行数， * 2.要合并的单元格的个数 **/ //判断 若只有一行数据，就是表头，则不做调整 if (tr &gt
前端-antd 动态合并单元格
一如既往的准备文章
03-29 477
背景：前端涉及具有相同数据源且相邻行，进行 行合并的需求时，需要动态合并单元格。中对列进行渲染，调用。
js 自定义表格的合并单元格、插入行列、删除行列
我见青山多妩媚,料青山见我应如是
09-09 2861
js 自定义表格的合并单元格、插入行列、删除行列
element ui中动态合并单元格_element ui单元格的动态合并
06-11
在 Element UI 中，可以通过使用 `span-method` 属性来实现动态合并单元格。 具体步骤如下： 1. 在表格的 `columns` 属性中，为需要合并单元格的列添加 `span-method` 属性，该属性的值为一个函数，用于判断单元格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值