Layui table排序后单元格样式丢失

在Layui的表格中，如果使用了表格排序功能，并且在排序后出现单元格样式丢失的情况，可能是因为排序后重新渲染了表格，导致之前设置的样式被覆盖。解决方法是在渲染表格时，给表格单元格设置一个固定的CSS类名，然后在CSS样式中通过该类名来设置单元格的样式。这样即使在表格排序后重新渲染，也不会影响之前设置的样式。

具体实现方法：

在Layui的表格渲染代码中，给每个单元格添加一个固定的CSS类名，例如“my-cell”：

table.render({
  elem: '#myTable',
  cols: [[
    {field: 'name', title: '姓名', sort: true, templet: '<div class="my-cell">{{d.name}}</div>'},
    {field: 'age', title: '年龄', sort: true, templet: '<div class="my-cell">{{d.age}}</div>'},
    // ...
  ]],
  // ...
});

然后在CSS样式中通过该类名来设置单元格的样式：

.my-cell {
  padding: 10px;
  color: #333;
  font-size: 14px;
  /* ... */
}

这样即可保证表格排序后单元格样式不会丢失。

相关问题

Layui table排序后单元格颜色变了

Layui table 的排序功能是通过改变表格的 DOM 结构来实现的，因此在排序后单元格的颜色可能会改变，这可能是因为样式类没有正确地被更新。你可以尝试在 layui 的表格渲染时，通过监听 `sort` 事件来重新渲染表格，例如：

table.render({
  elem: '#test',
  url: '/demo/table/user/',
  page: true,
  cols: [[ //表头
    {field: 'id', title: 'ID', width:80, sort: true},
    {field: 'username', title: '用户名', width:80},
    {field: 'email', title: '邮箱', width: 150},
    {field: 'sex', title: '性别', width:80, sort: true},
    {field: 'city', title: '城市', width:100},
    {field: 'sign', title: '签名', width: 200},
    {field: 'experience', title: '积分', width: 80, sort: true},
    {field: 'score', title: '评分', width: 80, sort: true},
    {field: 'classify', title: '职业', width: 100},
    {field: 'wealth', title: '财富', width: 135, sort: true},
  ]],
  done: function(res, curr, count){
    // 监听表格排序事件
    table.on('sort(test)', function(obj){
      // 重新渲染表格
      table.render();
    });
  }
});

如果以上方法不起作用，你可以尝试手动更新样式类来解决问题。例如，在样式文件中为被排序的单元格添加一个样式类，然后在排序后通过 JavaScript 手动为这些单元格添加该样式类。具体实现方法如下：

.sorted {
  background-color: #f2f2f2;
}

table.on('sort(test)', function(obj){
  // 获取排序列的索引值
  var index = obj.field;
  // 获取排序方式
  var sort = obj.type;
  // 获取表格行元素
  var trs = $('#test').next().find('tr');
  // 遍历表格行
  trs.each(function(){
    // 获取当前行单元格元素
    var tds = $(this).children('td');
    // 获取排序列的单元格
    var td = tds.eq(index);
    // 如果当前行是表头，则退出循环
    if (td.length === 0) {
      return false;
    }
    // 如果当前列被排序，则添加样式类
    if (td.attr('data-sort') === sort) {
      td.addClass('sorted');
    } else {
      td.removeClass('sorted');
    }
  });
});

以上代码将在排序后为被排序列添加 `sorted` 样式类，你可以在样式文件中定义该样式类来更改单元格的颜色。

layui table 合并单元格

layui table是一款基于layui框架的数据表格插件，可以实现表格分页、排序、过滤等功能，而且还支持合并单元格。

合并单元格主要是指在表格中合并相邻的单元格，将它们合并成一个单元格，从而可以显示更加复杂的数据。

在layui table中，合并单元格有两种方式实现：

第一种方式是通过设置colspan和rowspan属性来合并单元格。具体使用方法如下：

table.render({
elem: '#test',
cols: [[ //表头
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'sex', title: '性别', width: 80},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', width: 200},
{field: 'experience', title: '积分', width: 100},
{field: 'score', title: '评分', width: 100},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 100}
]],
data: [],
done: function(res, curr, count){
//合并单元格
var index = 0;
var data = res.data;
for(var i=0;i<data.length;i++){
layui.$('#test tr:eq('+index+') td:eq(0)').attr('rowspan', 2);
layui.$('#test tr:eq('+index+') td:eq(1)').attr('rowspan', 2);
layui.$('#test tr:eq('+index+') td:eq(2)').attr('rowspan', 2);
index += 2;
}
}
});

第二种方式是通过设置lay-id属性来合并单元格。具体使用方法如下：

table.render({
elem: '#test',
url: '/demo/table/user/',
method: 'get',
cols: [[
{field:'id', title:'ID', width:80, sort:true, fixed: 'left'}
,{field:'username', title:'用户名', width:120}
,{field:'sex', title:'性别', width:80, sort:true}
,{field:'city', title:'城市', width:100}
,{field:'sign', title:'签名', width:200}
,{field:'experience', title:'积分', width:100, sort:true}
,{field:'score', title:'评分', width:100, sort:true}
,{field:'classify', title:'职业', width:100}
,{field:'wealth', title:'财富', width:135, sort:true, fixed: 'right'}
]],
id: 'test',
page: true,
limit: 10,
height: 'full-200',
done:function(res, curr, count){
//合并单元格
var data = res.data;
var mergeList = ['username','city','classify'];
for(var i=0;i<mergeList.length;i++){
var mergeArray = [];
var mergeCount = 1;
for(var j=0;j<data.length;j++){
if(j==data.length-1){
mergeArray.push(mergeCount);
}else{
if(data[j][mergeList[i]]==data[j+1][mergeList[i]]){
mergeCount++;
}else{
mergeArray.push(mergeCount);
mergeCount = 1;
}
}
}
var id = '#' + layui.table.config.id;
layui.$(id + ' tbody tr').each(function(rowIndex){
var td = layui.$(this).find('td[data-field='+mergeList[i]+']');
for(var k = 0;k<td.length;k++){
if(mergeArray[rowIndex] && mergeArray[rowIndex]>1){
layui.$(td[k]).attr('rowspan', mergeArray[rowIndex]);
mergeArray[rowIndex]--;
}
}
})
}
}
});

以上是两种实现layui table合并单元格的方法，具体根据实际需求而定。