Filecoin extjs6.5 wxRuby Kotlin parsing memory vuejs2 uiview xsd arm js鼠标离开事件 sublime分屏快捷键 bentley软件介绍 matlab自然对数 python基础 python练习题 python中sort函数 python测试 python的open函数 java斐波那契数列 java获取当前年 java平台 java删除文件 java接口的实例 java异常 java文件读取 手机照片恢复免费软件 ad下载 滑动门代码 x64dbg 坐标标注插件 jq改变css样式 mp4剪切合并大师 透视网格工具怎么取消 office2010免费版 videoview 地图数据采集 混凝土配合比计算软件 spring拦截器 ae渲染设置
当前位置: 首页 > 学习教程  > 编程语言

表格单元格合并

2020/11/24 9:42:43 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

表格单元格合并 html <div class"cut_aside"><table class"table table-striped" id"testTable"></table></div>js function tableData1() {let list [{ name: 阿里巴巴, organization: 山水, num: 1, number: 21, su…

表格单元格合并

html

 <div class="cut_aside">
            <table class="table table-striped" id="testTable"></table>
 </div>

js

 function tableData1() {
        let list = [
            { 'name': '阿里巴巴', organization: '山水', num: '1', number: '21', sum: '22'},
            { 'name': '华为', organization: '山水', num: '2', number: '22', sum: '22'},
            { 'name': '阿里巴巴', organization: '天承', num: '3', number: '12', sum: '22'},
            { 'name': '阿里巴巴', organization: '山水1', num: '4', number: '13', sum: '22'},
            { 'name': '华为', organization: '山水1', num: '5', number: '11', sum: '22'},
            { 'name': '华为', organization: '山水2', num: '6', number: '14', sum: '22'},
            { 'name': '阿里巴巴', organization: '山水3', num: '7', number: '16', sum: '22'},
        ];
        /**
         * 排序操作开始
         */
        let dt = list;
        if(dt == ""){
          var tbl = document.getElementById('testTable');
        tbl.innerHTML ="暂无数据";
        }else{
        let sortColumn = ['name', 'sum']; //需要排序合并的列,排序顺序即数组字段先后顺序。
        /*
         *递归比较函数(用于比较多字段顺序)
         *参数:
         *	a、b 是list.sort()方法默认会传递进来的比较字段。
         *	c: 需要排序的字段,默认从第一个sortColumn元素开始进行排序
         *	i: 递归临界判断字段,默认为0
         */
        let compare = function (a, b, c = sortColumn[0], i = 0) {
            if (a[c] == b[c]){ //等于的话进行判断是否还有后续字段需要排序,没有则返回0;有则递归进行后续字段排序处理。
                if(i == (sortColumn.length-1)){//没有后续字段
                    i = 0;
                    return 0;
                }
                i+=1;
                return compare(a, b, sortColumn[i], i);//递归排序后续字段
            } else if (a[c] > b[c]) { //大于返回1
                return 1;
            } else { //小于返回-1
                return -1;
            }
        };
        dt.sort(compare); //对数据进行排序

        /**
         * 排序操作结束
         */

        /**
         * 合并操作开始
         */
        let mergeColumns = []; //存放合并行内容的数组
        for(let i=0; i<sortColumn.length; i++){
            mergeColumns.push({
                rspan:1, //合并的行数
                colStr:'', //合并行的内容
                colName:sortColumn[i] //行key
            });
        }

        /*
         * 列合并函数(递归实现,这里只处理了需要合并排序的列)
         * 参数:
         *	curItem: 当前条数据
         *	preItem:前一条数据
         *	curIndex: 用于定义当前执行到第几个合并字段
         */
        let dataMerge = function(curItem, preItem, curIndex = 0){
            if (curItem[mergeColumns[curIndex].colName] == preItem[mergeColumns[curIndex].colName]) {//值相同说明该字段这两行数据内容相同,可以合并,所以rspan加1
                mergeColumns[curIndex].colStr = '';
                mergeColumns[curIndex].rspan += 1;
                if(curIndex == (mergeColumns.length-1)){//做一个限制,否则会无线递归下去
                    return;
                }
                curIndex += 1;
                dataMerge(curItem, preItem, curIndex);//递归调用
            } else { //值不同,则需要进行列td输出。
                for(let j=curIndex; j<sortColumn.length; j++){//从curIndex进行内容处理,防止遗漏或过多处理
                    mergeColumns[j].colStr = ('<td  rowspan="' + mergeColumns[j].rspan + '">' + curItem[mergeColumns[j].colName] + '</td>');
                    mergeColumns[j].rspan = 1;
                }
                curIndex = 0;
            }
        }

        /*
         * 倒序循环,一次取当前条和下一条,进行比较,
         * 根据比较结果累加合并的行数或重置合并的行数,生成的标签依次往前累加
         * 为什么要倒叙处理呢?因为td的rowspan属性是在第一条编写的哦
         */
        let ht = ''; //输出的行内容(数据都是倒叙拼接)
        for (let i = dt.length - 1; i > 0; i--) {
            let curItem = dt[i], preItem = dt[i - 1]; //获取当前条和前一条
            dataMerge(curItem, preItem, 0);//合并数据
            ht = '<tr>' + mergeColumns[0].colStr + '<td>' + curItem.organization + '</td><td>' + curItem.num + '</td><td>' + curItem.number + '</td>' + mergeColumns[1].colStr + '</tr>' + ht;
        }

        let firstItem = dt[0];// 由于循环没有到第一条,所以必须单独补上第一条
        ht = '<tr><td name="col_1" rowspan="' + mergeColumns[0].rspan + '">' + firstItem.name + '</td><td>' + firstItem.organization + '</td>'
            + '<td>' + firstItem.num + '</td><td>' + firstItem.number + '</td><td name="col_2" rowspan="' + mergeColumns[1].rspan + '">' + firstItem.sum + '</td></tr>' + ht;

        //表头处理
        ht = '<thead><tr><th>体检单位</th><th>体检机构</th><th>导入次数(次)</th><th>导入成功数量(人)</th><th>导入成功数量总计(人)</th></tr></thead><tbody>' + ht + '</tbody>';

        var tbl = document.getElementById('testTable');
        tbl.innerHTML = ht;
}
        /**
         * 合并操作结束
         */
    }
    tableData1();

原文链接

表格合并与颜色处理


本文链接: http://www.dtmao.cc/news_show_400112.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?