合并单元格

JS代码部分

   var trueHeight = document.documentElement.clientHeight-document.body.offsetHeight;var templateTableParams = {classes: "table table-bordered table-hover",url: "${ctx}/purchasePlan/infoList.z",method: 'post',contentType: "application/x-www-form-urlencoded",dataType: "json",cache: false,     //是否使用缓存，默认为truestriped: true,    //是否显示行间隔色singleSelect: true,   //单选clickToSelect: true,  //是否启用点击选中行showFooter:true,//合计height:trueHeight,queryParams:function () {var params = {djh: $("#djh").val(),jhlb: $("#jhlb").val(),lxdh:$("#lxdh").val(),orderNo:$("#orderNo").val(),itemCode: $("#itemCode").val(),itemName: $("#itemName").val(),startDate:$('#startDate').val(),endDate:$('#endDate').val()};return params;},columns: [{checkbox: true},{title: '序号',halign:"center", align:'center',formatter: function (value, row, index) {return index + 1;}, width:'50px',footerFormatter: function (value) {return '合计';}},{field: 'djh', title: '单据号',halign:"center", width:'80px'},{field: 'jhlb', title: '计划类别', align:'center',halign:"center", width:'80px'},{field: 'lrrname', title: '采购员',align:'center', halign:"center", width:'80px'},{field: 'rq', title: '计划日期', halign:"center", formatter :'paramsMatter', width:'140px'},{field: 'cgbm', title: '采购部门', halign:"center", width:'100px'},{field: 'jhyc', title: '计划月次', halign:"center", width:'70px'},{field: 'lxdh', title: '路线单号', halign:"center", formatter :'paramsMatter', width:'100px'},{field: 'gyfl', title: '物资类别', halign:"center", width:'100px'},{field: 'itemCode', title: '物资编码', halign:"center",formatter :'paramsMatter', width:'150px',sortable:true},{field: 'itemName', title: '物资名称', halign:"center", formatter :'paramsMatter', width:'100px',sortable:true},{field: 'cz', title: '物资属性', halign:"center", formatter :'paramsMatter', width:'100px'},{field: 'xqsl', title: '生产需求数量',halign:"center",align:'right',footerFormatter: function (value) {var count = 0;for (var i in value) { count += value[i].xqsl; }return count.toFixed(2); }, width:'100px'},{field: 'jhsl', title: '生产计划数量',halign:"center",align:'right',footerFormatter: function (value) {var count = 0; for (var i in value) { count += value[i].jhsl; }return count.toFixed(2);}, width:'100px'},{field: 'cgsl', title: '采购计划数量',halign:"center",align:'right',footerFormatter: function (value) {var count = 0; for (var i in value) { count += value[i].cgsl; }return count.toFixed(2); }, width:'100px'},{field: 'kcsl', title: '计划时库存', halign:"center",align:'right',footerFormatter: function (value) {var count = 0; for (var i in value) { count += value[i].kcsl; }return count.toFixed(2); }, width:'85px'},{field: 'cgjg', title: '采购结果', halign:"center", width:'70px'},{field: 'bz', title: '备注', halign:"center", formatter :'paramsMatter', width:'100px'},{field: 'orderNo', title: '销售合同编号', halign:"center", formatter :'paramsMatter', width:'100px'}],cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),trimOnSearch: true,onlyInfoPagination:false,//显示总记录数  必须打开pagination=truepagination: false,      //显示分页pageNumber: 1,             //初始化加载第一页，默认第一页pageSize:10,               //每页记录数pageList:[5,10,20],     //可供选择的每页的行数idField: 'id',uniqueId: 'id',smartDisplay:false,onPostBody:function (data) {//data： table的所有数据   job_user：所要合并的列   1：colspan为1    $('#puBmxqjh_table')    表格对象mergeCells(data,"djh",1,$('#puBmxqjh_table'));
}};//合并单元格mergeCells = function(data, fieldName, colspan, target) {var sort = Array();//记录每次需要合并的行数var num = 1;for (var i = 0; i < data.length - 1; i++) {for ( var prop in data[i]) {if (prop == fieldName) {//是否是需要合并的fieldif (data[i][prop] == data[i + 1][prop]) {//如果合并字段的值相等，与下一行合并num++;if (i == data.length - 2) {sort.push(num);}} else {//不需要与下一行合并sort.push(num);num = 1;}break;}}}var index = 0;for (var j = 0; j < sort.length; j++) {var count = sort[j];//需要合并的行数$(target).bootstrapTable('mergeCells', {index : index,field : fieldName,colspan : colspan,rowspan : count});index += count;//下次需要合并的index的值}};$('#puBmxqjh_table').bootstrapTable(templateTableParams);

页面效果展示

bootstrap table合并单元格相关推荐

bootstrap table合并单元格mergeCell
//对应第一个合并的单元格 mergeCells = function(data, fieldName, colspan, target) { var sort = Array(); ...
vue中用table_Vue中table合并单元格用法
地名结果人名性别 {{item.name}} 已完成未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son]. ...
Bootstrap mergeCells合并单元格（多列）
/** 合并单元格 @param target 目标表格对象 @param data 原始数据(在服务端完成排序) @param fieldName 合并参照的属性名称 @param fieldLis ...
Table合并单元格，表格居中，内容居中显示
例如:新建一张四行四列的表格,第一行的四列合并,第二.三.四行的第一列合并在一起居中显示 <%@ page language="java" contentType=" ...
element plus的table合并单元格
element的table合并单元格就element+中的el-table中的span-method方法的使用和遇到的一些问题如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个 ...
js实现 table合并单元格
** table合并单元格 function uniteTdCells(tableId){var table = document.getElementById(tableId);for (let i ...
vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
table合并单元格_制作课程表3——合并单元格
由于浏览器兼容问题,. 以及很少被使用, 所以我们将课程表依然使用tr.td元素,结合样式实现出前面案例中效果原来代码: 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课 ...
table合并单元格宽度自适应
table中合并单元格导致的css样式不同处理方式: 1.每行都拆成一个table. 2.多设置几个单元格的宽度(自适应失效.第一列都设置宽度也有可能失效).
table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格或者测试 vue 文件 <template><div><el-table:data="tableData&qu ...

bootstrap table合并单元格

合并单元格

bootstrap table合并单元格相关推荐

最新文章

热门文章