Layui table排序后单元格颜色变了
时间: 2023-10-05 17:09:05 浏览: 190
layui的表格table选中数据后更改本行的颜色
4星 · 用户满意度95%
Layui table 的排序功能是通过改变表格的 DOM 结构来实现的,因此在排序后单元格的颜色可能会改变,这可能是因为样式类没有正确地被更新。你可以尝试在 layui 的表格渲染时,通过监听 `sort` 事件来重新渲染表格,例如:
```javascript
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 手动为这些单元格添加该样式类。具体实现方法如下:
```css
.sorted {
background-color: #f2f2f2;
}
```
```javascript
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` 样式类,你可以在样式文件中定义该样式类来更改单元格的颜色。
阅读全文