在 FastAdmin 中,可以使用 cellStyle 属性来自定义表格单元格样式。
cellStyle 属性是一个函数,它会被每个单元格调用,可以根据单元格的值来返回不同的样式。下面是一个 cellStyle 属性的示例代码:
<table class="table table-striped" id="table">
<thead>
<tr>
<th>#</th>
<th>名称</th>
<th>数量</th>
</tr>
</thead>
<tbody>
{% for item in list %}
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.num }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(function () {
$('#table').bootstrapTable({
// 设置 cellStyle 属性,返回不同的样式
cellStyle: function (value, row, index, field) {
if (value > 100) {
// 如果数量大于 100,设置样式为红色背景
return { classes: 'bg-danger' };
} else if (value > 50) {
// 如果数量大于 50,设置样式为黄色背景
return { classes: 'bg-warning' };
} else {
// 否则不设置样式
return {};
}
}
});
});
</script>
在这个例子中,我们使用 bootstrapTable 插件将一个数据表格渲染为一个带有表格头和表格主体的 HTML 表格。在 cellStyle
属性中,我们定义了一个函数,它会被每个单元格调用。函数接受四个参数:
value
:单元格的值;row
:单元格所在行的数据对象;index
:单元格所在行的索引;field
:单元格所对应的数据字段。
在函数中,我们根据单元格的值来返回不同的样式对象。如果数量大于 100,我们返回 { classes: 'bg-danger' }
,表示将该单元格的背景色设置为红色。如果数量大于 50,我们返回 { classes: 'bg-warning' }
,表示将该单元格的背景色设置为黄色。否则,我们返回 {}
,表示不设置样式。
这样,当表格数据被加载到页面中时,就可以根据单元格的值动态设置单元格的样式。
{
field: 'name',
title: __('Name'),
operate: 'LIKE',
cellStyle : function(value, row, index, field) {
return {
css: {
"white-space": "normal !important", //换行
"text-overflow": "ellipsis",
"overflow": "hidden",
"color": "#3172a6",
"width":"200px"
}
};
}
},
可以辅助 !import设置样式!