应用场景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.查看效果