layui table行列转置后如何固定表头行列，列如何根据条件高亮显示

Question

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"
    }]
}

Answer 1

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中的表格组件实现表格的列高亮的显示。