查询layui表格数据,如果和原数据不一样就赋色
时间: 2024-04-11 08:33:49 浏览: 22
要实现查询Layui表格数据,与原始数据进行比较并根据差异给单元格赋色,您可以使用Layui的`done`回调函数和`data`属性来实现。
首先,在表格的列定义中,为每个需要赋色的列添加一个自定义类名,例如:'color-column'。
```javascript
var table = layui.table;
table.render({
// 表格配置项...
cols: [
[
{ field:'id', title:'ID' },
{ field:'name', title:'姓名', className: 'color-column' },
{ field:'age', title:'年龄' },
// 其他列...
]
],
// 数据接口...
});
```
接下来,在表格加载完成后的`done`回调函数中,比较每个单元格的数据与原始数据的差异,并根据差异给单元格赋色。
```javascript
table.reload('tableId', {
// 重载配置项...
done: function(res, curr, count) {
var tableData = res.data; // 获取表格数据
var originalData = []; // 原始数据
// 获取原始数据,例如从接口或其他地方获取
// 假设原始数据为 originalData
$('.color-column').each(function(index) {
var value = $(this).text();
if (value !== originalData[index].name) {
$(this).css('color', 'red');
} else {
$(this).css('color', 'green');
}
});
}
});
```
上述代码中,`tableId`是您表格的唯一ID。在`done`回调函数中,通过`res.data`获取表格数据,假设原始数据为`originalData`。然后,通过遍历带有自定义类名的单元格,比较单元格的数据与原始数据的差异,并根据差异给单元格赋色。
请根据您的实际需求修改条件和样式设置。希望能对您有所帮助!如有任何问题,请随时提问。