Skip to end of metadata
Go to start of metadata

应用场景1

  • 列表中的一列，根据不同的值，该单元格显示不同的背景色和字体颜色

应用场景2

  • 根据列表中一列的值，该行整体显示不同的背景色和字体颜色

实现步骤

1.打开列表页面的UI设置找到Custom Header

2.加入JS代码实现根据列值控制列或行的样式

<script>
    $(document).ready(function () {
        var columnName='field4';//取值的列名

        $('td.column_'+columnName).each(function(){
            var text=$(this).text();
            if(text){
                if(text.trim()=='1'){//值为1时的列样式
                    $(this).css({
                        'color':'red',
                        'background-color':'greenyellow'
                    });
                }else if(text.trim()=='2'){//值为2时的列样式
                    $(this).css({
                        'color':'red',
                        'background-color':'yellow'
                    });
                }else if(text.trim()=='3'){//值为3时的行样式
                    $(this).parent().css({
                        'color':'red',
                        'background-color':'greenyellow'
                    });
                }else if(text.trim()=='4'){//值为4时的行样式
                    $(this).parent().css({
                        'color':'red',
                        'background-color':'yellow'
                    });
                }
            }
        });
    });
</script>

3.查看效果



Javascript Condition Formatter

如果只是对某一列的样式进行简单控制，使用javascript condition formatter也可以，步骤如下:

1.在列表编辑器设置该列的formatter,选择"javascript condition formatter"

2. Rule可以设置为{field4}==1,表示当值为1的时候，样式设置为"<div style='color:red;background-color:yellow;'>" + {field4} + "</div>"

3.查看效果





  • No labels