【easyui】 datagrid动态改变某一行的颜色

最新推荐文章于 2023-05-05 08:41:21 发布

小魏的马仔

最新推荐文章于 2023-05-05 08:41:21 发布

阅读量1.7w

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： datagrid easyui 行背景色

本文链接：https://blog.youkuaiyun.com/xuexiiphone/article/details/53174699

js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用EasyUI框架中的数据表格组件(dataGrid)来实现特定样式的显示效果，特别是通过代码示例展示了如何根据数据字段改变行背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

$(function () {
            dataGridAccept = $('#dataGridAccept').datagrid({
                fit: true,
                fitColumns: false,
                border: false,
                pagination: false,
                idField: 'id',
                striped: true,
                remoteSort: false,
                pageSize: 20,
                pageList: [5, 10, 20, 80, 100],
                sortOrder: 'asc',
                singleSelect: true,
                checkOnSelect: true,
                selectOnCheck: true,
                nowrap: true,
                showPageList: false,
                enableRowContextMenu: false,
                url: "${pageContext.request.contextPath}/match.do",
                columns: [[{
                    field: 'id',
                    title: '抛出ID',
                    width: 100,
                    align: 'center',
                    sortable: false,
                    hidden: true
                }, {
                    field : 'del',
                    title : '是否终止',
                    width : 100,
                    align:'center',
                    sortable : false,
                    hidden:false
                }]],
                toolbar: '#toolbar',
                onLoadSuccess: function () {
                    $(this).datagrid('tooltip');
                    $(this).datagrid('clearSelections');
                },
                rowStyler: function (index, row) {
                    if(row.del=='1'){
                        return 'background-color:red;';
                    }

                },
                onClickRow: function (index, row) {
                }
            });
        });

关键代码：

rowStyler: function (index, row) {
                    if(row.del=='1'){
                        return 'background-color:red;';
                    }

                }

这里就可以了~