layui table行列转置后如何固定表头行列，列如何根据条件高亮显示
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"
}]
}
Layui中的table不支持行列转置，但我们可以通过jQuery或JavaScript实现表格的行列转置，然后配合Layui的表格组件使用。
在转置表格之后，可以通过设置Layui表格组件的固定列和滚动条等属性，以实现固定表头、列或固定多列的效果。具体可以参考Layui表格组件的使用文档。
要实现根据条件高亮显示一列的功能，可以使用Layui表格组件的render方法，该方法用于对表格中的数据进行处理，返回HTML字符串，然后在表格渲染时显示。在render方法中，我们可以对每一行数据进行判断，并返回带有高亮样式的HTML字符串，从而实现列的高亮功能。具体代码如下：
table.render({
elem: '#table',
data: data,
cols: cols,
done: function() {
// 在表格渲染完成后，对表格某一列的单元格进行高亮显示
var td = $("#table td[data-field='score']");
td.each(function() {
if ($(this).text() >= 80) {
$(this).addClass('high-score');
}
})
},
// 对score列进行处理
cols: [[
{field: 'name', title: '姓名', width: 100, fixed: 'left', sort: true},
{field: 'age', title: '年龄', width: 80, sort: true},
{field: 'gender', title: '性别', width: 80},
{field: 'score', title: '成绩', width: 100, sort: true, templet: function(d) {
// 如果成绩大于等于80分，返回带有高亮样式的HTML字符串
if (d.score >= 80) {
return '<div class="high-score">' + d.score + '</div>';
} else {
return '<div>' + d.score + '</div>';
}
}},
{field: 'city', title: '城市', width: 100}
// 更多列...
]]
});
在上述代码中，我们在表格渲染完成后，使用jQuery从表格中选出score列的单元格，并根据单元格的值进行判断，如果成绩大于等于80分，则为该单元格添加high-score样式，从而实现高亮显示。同时，在定义score列时，使用templet渲染方法对成绩进行处理，当成绩大于等于80分时，返回带有高亮样式的HTML字符串。
关于样式的设置，可以在样式表中定义相应的CSS样式：
.high-score {
background-color: #ffcccc;
font-weight: bold;
}
此处，我们定义了一个名为high-score的样式，它将背景色设为浅红色，加粗显示。在渲染表格时，我们将符合条件的单元格的class属性设置为high-score，从而实现显示效果。
这样，我们就可以通过Layui中的表格组件实现表格的列高亮的显示。
不知道你这个问题是否已经解决, 如果还没有解决的话:- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7493789
- 这篇博客也不错, 你可以看下layui后台页面table展示数据后，按条件搜索table数据
- 除此之外, 这篇博客: layui-table表格根据条件更换表格背景颜色，高亮显示中的 layui表格渲染后的回调 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
,done: function (res, curr, count) { // 表格渲染完成之后的回调 // $(".layui-table th").css("font-weight", "bold");// 设定表格标题字体加粗 LayUIDataTable.SetJqueryObj($); // 第一步：设置jQuery对象 var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) { }) LayUIDataTable.HideField('type'); // 隐藏列-单列模式 // 对相关数据进行判断处理--此处对type等于1,2的进行高亮显示 $.each(currentRowDataList, function (index, obj) { if (obj['type'] && obj['type'].value == '1') { obj['type'].row.css({"background-color": "#009966", 'color': '#99CCCC'}); } if (obj['type'] && obj['type'].value == '2') { obj['type'].row.css({"background-color": "#F7B940", 'color': '#CCFFFF'}); } }) } // end done - 您还可以看一下 孟光焱老师的Tableau从入门到大伽视频教程课程中的 奥迪销售架驶舱_右下角切换销量前三后三名小节, 巩固相关知识点
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^