layui table 复杂表头设计及固定表头、单元格内容相同自动合并、合计去除小数点

最新推荐文章于 2024-07-25 10:24:34 发布
最新推荐文章于 2024-07-25 10:24:34 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： web 文章标签： layui 复杂表头 layui 单元格内容相同合并 合计去除小数点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24313643/article/details/110823065
版权

Layui 相关文件下载地址 ：https://www.layui.com/

就不写其他文字啦，直接上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        @media screen and (min-width: 1920px){
            .layui-container {
                width: 1920px;
            }
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <div id="table_shows">
            <table id="tongji_table" class="layui-table" lay-data="tongji_table">

            </table>
    </div>
</div>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script  type="text/javascript"  src="layui.js" charset="utf-8"></script>
<script  type="text/javascript" >
   layui.use(['table'], function () {
        var table=layui.table;
       table.render({
        elem:'#tongji_table',
        where : {
           //传值 startDate : startDate,
        },
        response:{statesName:'code',statusCode:0},
        //defaultToolbar: ['filter‘,‘print'] ,//这里在右边显示
        //toolbar: 'default',
        request:{pageName:'pageNumber',limitName:'pageSize'},
        height:650,totalRow:true,page:false,limit:100,limits:[100,120,150,200],
        url: 'demo.json', //数据接口
        id:'tongji_table',
        cols:[
                    [
                        {field:"name",colspan:"10",title:"xxxxx社区 ",align:"left"},
                        {field:"name",colspan:"10",title:"统计日期：2020年01月01日-2020年12月04日 ",templet: '#dateTimeTpl',align:"right"}
                    ],
                    [
                        {field:"institution",rowspan:"2",title:"站点",align:"center",totalRowText:'合计'},
                        {field:'doctor',rowspan:"2",title:"家庭医生团队",align:"center"},
                        {field:'hasCheck2',rowspan:"2",title:"体检总数",align:"center",totalRow: true},
                        {field:'hasCheck', rowspan:"2",title:"2020年签约履约数",align:"center",totalRow: true},
                        {colspan:"4",title:"老年人签约管理",align:"center"},
                        {colspan:"4",title:"高血压签约管理",align:"center"},
                        {colspan:"4",title:"糖尿病签约管理",align:"center"},
                        {colspan:"4",title:"其他人群签约管理",align:"center"},
                    ],
                    [
                        {field:'oldYearCheck',rowspan:"2",title:"健康年检数",align:"center",totalRow: true},
                        {field:'oldAssessment',rowspan:"2",title:"为签约居民进行健康评估（人）",align:"center",totalRow: true},
                        {field:'oldPlan',rowspan:"2",title:"根据评估结果制定针对性健康管理方案 （人）",align:"center",totalRow: true},
                        {field:'oldTrack',rowspan:"2",title:"根据方案实施健康管理并跟踪效果（人）",align:"center",totalRow: true},
                        {field:'diabetesYearCheck',rowspan:"2",title:"健康年检数",align:"center",totalRow: true},
                        {field:'diabetesAssessment',rowspan:"2",title:"为签约居民进行健康评估（人）",align:"center",totalRow: true},
                        {field:'diabetesPlan',rowspan:"2",title:"根据评估结果制定针对性健康管理方案（人）",align:"center",totalRow: true},
                        {field:'diabetesTrack',rowspan:"2",title:"根据方案实施健康管理并跟踪效果（人）",align:"center",totalRow: true},
                        {field:'hypertensionYearCheck',rowspan:"2",title:"健康年检数",align:"center",totalRow: true},
                        {field:'hypertensionAssessment',rowspan:"2",title:"为签约居民进行健康评估（人）",align:"center",totalRow: true},
                        {field:'hypertensionPlan',rowspan:"2",title:"根据评估结果制定针对性健康管理方案（人）",align:"center",totalRow: true},
                        {field:'hypertensionTrack',rowspan:"2",title:"根据方案实施健康管理并跟踪效果（人）",align:"center",totalRow: true},
                        {field:'otherCheck',rowspan:"2",title:"就诊体检检数",align:"center",totalRow: true},
                        {field:'otherAssessment',rowspan:"2",title:"为签约居民进行健康评估（人）",align:"center",totalRow: true},
                        {field:'otherPlan',rowspan:"2",title:"根据评估结果制定针对性健康管理方案（人）",align:"center",totalRow: true},
                        {field:'otherTrack',rowspan:"2",title:"根据方案实施健康管理并跟踪效果（人）",align:"center",totalRow: true},
                    ]]
           ,done: function (res) {
               merge(res);
               fnGetTotalDiv();
           }
    });
    });
    /**
     * @ 此方式适用于列的单元格合并
     */
    function merge(res) {
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['institution'];//需要合并的列名称['']
        var columsIndex = [0];//需要合并的列索引值
        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                if (data[i][columsName[k]] === data[i-1][columsName[k]] && (k === 0 || (k != 0 && data[i][columsName[k-1]] === data[i-1][columsName[k-1]]))) { //后一行的值与前一行的值做比较，相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                }else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }
            }
            mergeIndex = 0;
            mark = 1;
        }
    };

   /**
    * 删除合计行的小数点
    *
    */
   function fnGetTotalDiv() {
       var divArr = $(".layui-table-total div.layui-table-cell");
       $.each(divArr,function (index,item) {
           var _div = $(item);
           var content = _div.html();
           content = content.replace(".00","");
           _div.html(content);
       });
   };

</script>
<script type="text/html" id="dateTimeTpl">
    <span id="">统计日期：2020年01月01日-2020年12月04日</span>
</script>
</body>
</html>

json 文件
demo.json

{
"code": 0
,"msg": ""
,"data":[{
        "institution": "裕源卫生团队",
        "doctor": "李敏枝",
        "hasCheck": 230,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "fz服务站",
        "doctor": "陈xx",
        "hasCheck": 448,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "zyteam团队",
        "doctor": "zhang汉",
        "hasCheck": 420,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "zyteam团队",
        "doctor": "xpy",
        "hasCheck": 498,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "fu卫生团队",
        "doctor": "周ws",
        "hasCheck": 275,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "fuan卫生团队",
        "doctor": "ss游",
        "hasCheck": 0,
        "hasCheck2": 1,
        "oldYearCheck": 1,
        "oldAssessment": 1,
        "oldPlan": 1,
        "oldTrack": 1,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "da卫生团队",
        "doctor": "周xxx",
        "hasCheck": 296,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "da卫生团队",
        "doctor": "潘xx",
        "hasCheck": 513,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "guanddi卫生团队",
        "doctor": "区xxx",
        "hasCheck": 470,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "zhang社区卫生站",
        "doctor": "admin",
        "hasCheck": 0,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }, {
        "institution": "zhang社区卫生站",
        "doctor": "网络管理员",
        "hasCheck": 0,
        "hasCheck2": 0,
        "oldYearCheck": 0,
        "oldAssessment": 0,
        "oldPlan": 0,
        "oldTrack": 0,
        "diabetesYearCheck": 0,
        "diabetesAssessment": 0,
        "diabetesPlan": 0,
        "diabetesTrack": 0,
        "hypertensionYearCheck": 0,
        "hypertensionAssessment": 0,
        "hypertensionPlan": 0,
        "hypertensionTrack": 0,
        "otherCheck": 0,
        "otherAssessment": 0,
        "otherPlan": 0,
        "otherTrack": 0
    }]
}
曉儂
关注
专栏目录
layui table+复杂表头+合并单元格
dljm328963024的博客
06-21 3361
效果图： 问题：行hover效果感觉错乱 所以改为透明色 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>复杂表头+select下拉框默认值+单元格合...
layui数据表格-复杂的表头
weixin_57725431的博客
04-18 4785
知道layui数据表格的伙伴都知道，表头设计是非常的重要的，也影响着整个layui数据 表格的布局！但是表头也分等级，例如一级，二级， 等等，又更多的等级区分，也表明 更加的细致，详细的布局成分，也可以清晰的发现的具体的成分，一个表头有多个部分 组成的，例如： 地址： 省，市，区 ，等等。计算单位： 个，十，百，千，万 ......... 。 反正咱就是说，layui布局的表格也非常的重要对吧，让人更加的清晰的表明具体的成分。 话不多说，直接开始演示吧！ 1.这就是所...
Layui table 合并单元格
最新发布
MaskText的博客
07-25 617
合并单元格
Layui表格-复杂表头
weixin_44540670的博客
07-07 4450
很多人都不会复杂表头设置，复杂表头 这个功能非常实用，可以让用户更清楚地理解 表格里的数据信息； Layui表格复杂表头：常用的两极表头 和通常表格不一样的是加多两个属性： 联系人 员工信息 rowspan="2"这个属性代表的是联系人这个表头占用了两行表格， colspan="3"这个属性代表的是员工信息这是一个大表头，在员工信息 下面还有3个小表头； 加上这两个属性即可，下面是效果图： ...
Layui 数据表格复杂表头
夏已微凉、
09-09 4767
一、使用方式二、使用代码三、效果截图 一、使用方式 1、在表头参数 cols 里加上：colspan，rowspan，请参考文档 >>>cols - 表头参数一览表 2、cols 是个 二维数组，里面的每个 一维数组 相当于一个 <tr></tr> 二、使用代码 Demo在线调整 在线示例-Layui <script> layui.config({ version: '1629677917965' //为了更新 js 缓存，可忽略 }); .
LayUI Table复杂表头实现
看向远方
10-21 1752
LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考，而并未用到方法渲染的方式来做用例，这让部分不太熟悉layUI table的开发者会有些头疼，不知道如何在方法渲染中实现复杂表头，本文将对此做一个简单的介绍。 在方法渲染中，我们通过在配置clos时对需要使用复杂表头的列添加相应的配置项owspan,colspan。 配置代码如下： cols: [ ／...
vxe-table vue table 表格组件功能
01-21
•固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树...
关于layui中float类型的字段排序问题（补位0的处理方法）
u011705147的博客
09-17 1208
1 layui的排序 我的需求是按里程排序：里程为float类型 1.000 甲方为离火车站中心位1公里0米 如 2.200 则为离火车站中心位2公里的200米处 按这个字段排序时layui 1.000会默认为字符串，按此里程字段排序会混乱，是按 unicode字符串排序的 解决方案： 1 找到table.js 这是layui的表格js文件 我在里面找到 if(options.autoSort){ if(type === ‘asc’){ //升序 thisData = layui.sort(data
SpringBoot项目之excel表格导出，不合并单元格
qq_44814649的博客
05-13 466
SpringBoot之excel表格导出 忙里偷闲，最近一直在写excel表的导出，导的挺费劲的，一开始没有理解，慢慢的懂了点儿，整理出来，方便下次复用。能够提供给别人一个参考那就更好了 第一步：导入poi的jar包 <!--poi--> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artif
python excel 单元格换行_数据标准化 使用Python脚本处理excel单元格换行符
weixin_35488643的博客
02-19 3132
在下在做数据分析时，原始数据是excel格式的，导入hive表时将其转化为txt格式。excel文件转txt格式的步骤如下：1.打开另存为2.选择txt格式保存3.打开转成的txt将编码修改为UTF-8在往hive表中导入数据时常常以换行符‘\n’来分割条数据。然而有时因为数据格式不够标准，即excel单元格中存在着换行符情况。例子如下：在这个表格中，B3，B4单元格都存在这换行符。如果将其导入到...
xlsxwriter去掉网格线_python 中 xlsxwriter 模块的使用
weixin_33273250的博客
12-30 1328
1.xlsxwriter 优点1.1、功能比较强相对而言，这是除Excel自身之外功能最强的工具了。比如我就用到了它提供的：字体设置、前景色背景色、border设置、视图缩放(zoom)、单元格合并、autofilter、freeze panes、公式、data validation、单元格注释、行高和列宽设置等等。1.2、支持大文件写入如果数据量非常大，可以启用constant memory模式...
LayUiTable表单相同参数的单元格合并
10-26
LayUiTable表单相同参数的单元格合并，可以几个列一起合并，注释相应完善。LayUiTable表单相同参数的单元格合并
layui js 动态加载数据 复杂表头多表头实例.pdf
11-27
layui js 动态加载数据 复杂表头多表头实例
Layui复杂表格
weixin_44540251的博客
06-08 5831
开发工具与关键技术：MVC 作者：文泽钦 撰写时间：2019年5月3日星期一 常见的表格只有一行表头的，但我们今天做一个复杂表格，先看看单表头的效果，等一会写完复杂表格再看复杂的表格。 把控制器搭建好了就开始写页面的代码，这里要把layui表格用到的css、js插件拷贝到项目，然后显示所有里，然后引入进来。 <link href="~/Plugins/layui/css/layui.cs...
layui的复杂表头
weixin_44568752的博客
09-23 1481
table.render({ id: "rowId", elem: '#declaration-table', where: { projectName: $("input[name='projectName']").val() == "" ? null : $("input[name='projectName']").val(), govNam...
layui 复杂表头的数据表格
qq_42913167的博客
01-12 794
【代码】layui 复杂表头的数据表格。
layui Table复杂表头导出
技术分享博客
11-26 2408
网上找了一天都没找到合适的layui复杂表头的导出解决办法，试过Table2excel,然并卵。最后还是在layui论坛里发现的了大佬给出了解决办法。table加载方法展示。导出的excel效果。
layui方法渲染复杂表头，合并数据项的单元格
Moon Star
04-07 827
1. 数据类型 [ { amountList: [ {year: "2018", reportedAmount: "269.62", approvedAmount: "270.0"}, {year: "2019", reportedAmount: "255.16", approvedAmount: "256.0"}, {year: "2020", reportedAmount: "307.65", appro
layui 动态表格 合并单元格
zheyijieyou的博客
08-31 2135
效果图 代码放置位置 done : function(res, curr, count) { merge(res); } function merge(res) { var data = res.data; var mergeIndex = 0;//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数 var columsName
layui中table 固定表头
07-18
Layui是一款轻量级的前端UI框架，它的Table组件提供了一种方便的方式来创建表格，包括固定表头的功能。固定表头主要是为了让用户无论滚动页面到哪里，表头始终保留在可视范围内，便于查看。 在layui中设置固定表头，你可以这样做： ```html <table lay-filter="table" lay-component="table"> <thead> <tr> <!-- 指定列作为固定列 --> <th lay-unfixed></th> <!-- 非固定列 --> <th lay-fixed></th> <!-- 固定列 --> </tr> </thead> <tbody> <!-- 数据行 --> </tbody> </table> <script> // 初始化table，设置固定表头 layui.use('table', function(){ var table = layui.table; table.init('table', { // 表格ID fixedHeader: true, // 开启固定表头 // ...其他配置选项 }); }); </script> ``` 在这个例子中，`lay-fixed`属性用于标记固定的列，非固定列则不包含此属性。`lay-unfixed`也可以用于指定不固定的列。固定表头的启用通过`fixedHeader: true`配置项完成。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

曉儂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值