layui table行列转置后如何固定表头行列,列如何根据条件高亮显示。
行目前是日期,如何增加一行为周期显示,并且周六和周末所在列高亮显示;
列如何增加一列性别,汇总列,汇总行;
<!-- 数据表格开始 -->
<table class="layui-table" id="test" lay-filter="test"></table>
<script>
layui.use('table', function() {
var form = layui.form;
var table = layui.table;
var $ = layui.jquery;
var tableFilter = layui.tableFilter;
// 渲染表格
function renderTable() {
$.ajax({
type: 'get',
url: 'data.json',
success: function(res) {
console.log(res)
// 原始的表格数据
let tableData = res.data;
// 所有日期
let tableDataDate = new Set();
// 所有姓名
let tableDataName = new Set();
for (let data of tableData) {
tableDataDate.add(data.datetime);
tableDataName.add(data.name);
}
// 处理过的表格数据
let newTableData = [];
let temp;
for (let name of tableDataName) {
temp = {
name: name,
shift:shift
};
for (let dt of tableDataDate) {
let tableDataItem = tableData.find(function(currentValue, index, arr) {
return currentValue['name'] == name && currentValue['datetime'] == dt;
});
if (tableDataItem) {
temp[dt] = tableDataItem['mark'];
// 存放对应的id
temp[dt + '_id'] = tableDataItem['id'];
} else {
temp[dt] = '';
temp[dt + '_id'] = '';
}
}
newTableData.push(temp);
}
console.log(newTableData)
let tableCols = [];
tableCols.push({
'field': 'name',
'title': '姓名',
'fixed':'left',
'align':'center'
});
for (let dtItem of tableDataDate) {
tableCols.push({
'field': dtItem,
'title': dtItem,
'align':'center',
'style':'cursor:pointer'
});
}
var tableIns = table.render({
elem: '#test',
data: newTableData,
loading: true,
height: 'full-60',
cellMinWidth: 8, //全局定义常规单元格的最小宽度,layui 2.2.1 新增
skin: '',
size: 'sm',
toolbar: '#toolbarDemo', //开启头部工具栏,并为其绑定左侧模板
defaultToolbar: ['filter', 'print'],
tatalRow : true,
title:'出勤表',
page: true, //开启分页
cols: [tableCols]
,limits: [50, 100, 150]
,limit: 50 //每页默认显示的数量
,done: function (res, curr, count) {
var that = this.elem.next();
res.data.forEach(function (item, index) {
//debugger;
var tr = that.find("[data-index=" + index + "]").children();
tr.each(function () {
var b = $(this).text();
if (b == 'a') {
$(this).text('病假');
$(this).css("background-color", "#ffb800");
$(this).css("color", "#fff");
}
})
})
//处理fixed后,行错位问题
$(".layui-table-main tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
});
});
$(".layui-table-header tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-header thead tr")[index]).height($(val).height());
});
});
}
});
}
});
}
renderTable();
})
后台数据:
{
"code": 0,
"msg": "",
"count": 18,
"data": [{
"id": "14",
"name": "彤彤",
"datetime": "2023-05-01",
''week'':"周一",
"mark": "1",
"sex":"1"
}, {
"id": "126",
"name": "悠悠",
"datetime": "2023-05-01",
''week'':"周一",
"mark": "1",
"sex":"1"
}, {
"id": "128",
"name": "JC",
"datetime": "2023-05-01",
''week'':"周一",
"mark": "1",
"sex":"2"
}, {
"id": "129",
"name": "彤彤",
"datetime": "2023-05-02",
''week'':"周二",
"mark": "1",
"sex":"1"
}, {
"id": "130",
"name": "悠悠",
"datetime": "2023-05-02",
''week'':"周二",
"mark": "1",
"sex":"1"
}, {
"id": "131",
"name": "JC",
"datetime": "2023-05-02",
''week'':"周二",
"mark": "1",
"sex":"2"
}, {
"id": "132",
"name": "彤彤",
"datetime": "2023-05-03",
''week'':"周三",
"mark": "1",
"sex":"1"
}, {
"id": "133",
"name": "悠悠",
"datetime": "2023-05-03",
''week'':"周三",
"mark": "1",
"sex":"1"
}, {
"id": "134",
"name": "JC",
"datetime": "2023-05-03",
''week'':"周三",
"mark": "1",
"sex":"2"
}, {
"id": "137",
"name": "彤彤",
"datetime": "2023-05-04",
''week'':"周四",
"mark": "1",
"sex":"1"
}, {
"id": "171",
"name": "悠悠",
"datetime": "2023-05-04",
''week'':"周四",
"mark": "1",
"sex":"1"
}, {
"id": "174",
"name": "JC",
"datetime": "2023-05-04",
''week'':"周四",
"mark": "1",
"sex":"2"
}, {
"id": "175",
"name": "彤彤",
"datetime": "2023-05-05",
''week'':"周五",
"mark": "1",
"sex":"1"
}, {
"id": "176",
"name": "悠悠",
"datetime": "2023-05-05",
''week'':"周五",
"mark": "1",
"sex":"1"
}, {
"id": "177",
"name": "JC",
"datetime": "2023-05-05",
''week'':"周五",
"mark": "1",
"sex":"2"
}, {
"id": "178",
"name": "彤彤",
"datetime": "2023-05-06",
''week'':"周六",
"mark": "1",
"sex":"1"
}, {
"id": "179",
"name": "悠悠",
"datetime": "2023-05-06",
''week'':"周六",
"mark": "1",
"sex":"1"
}, {
"id": "180",
"name": "JC",
"datetime": "2023-05-06",
''week'':"周六",
"mark": "1",
"sex":"2"
}]
}