Fastadmin表显示格式cellStyle

最新推荐文章于 2025-01-07 16:14:50 发布

原创最新推荐文章于 2025-01-07 16:14:50 发布 · 750 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#php #前端

fastadmin 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在FastAdmin中利用cellStyle属性自定义BootstrapTable的单元格样式，通过JavaScript根据单元格值设定不同颜色背景，实现动态样式应用。

在 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设置样式!