Cet article vous présentera comment bootstrapTable définit dynamiquement la couleur de la ligne (rowStyle) et la couleur de la colonne (cellule cellStyle). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
[Recommandations associées : "Tutoriel bootstrap"]
Comment modifier dynamiquement les couleurs des lignes
rowStyle: function(row, index) { // 参数说明: //row, 行,row.xxx,能获取某个字段的值 //index,索引,第几行 // 逻辑判断 // ..... return {css:{"background-color":'rgba(245,245,245,0.7)'}}; }
Méthode pour modifier dynamiquement la couleur d'une colonne (cellule)
cellStyle:function(value,row,index){ // 参数说明: // value ,当前单元格的值 // row,当前行的值 //index ,第几行 // 逻辑判断 // ..... return {css:{"background-color":"rgba(255,250,250,0.7)"}}; }
Explication :
Configuration des options en colonnes. La plus grande différence dans la position des deux
est la suivante :
function load() { $('#exampleTable').bootstrapTable({ url : "/config/list", queryParams : function(params) { return { limit: params.limit, offset: params.offset, } }, rowStyle: function(row, index) { // 动态修改行的颜色 var isDel = $.trim(row.isDel); if(isDel=="1"){ // 如果值是1,表示已删除,设置行的颜色 return {css:{"background-color":'rgba(245,245,245,0.7)'}}; } return ''; // 即使不改变颜色,也得返回 '' ,否则会报错。 }, columns : [ { checkbox : true, }, { field : 'platformName', title : '平台名称' , width : 140, }, { field : 'ydaaa', title : '移动的aaa' , width : 140, cellStyle : function(value,row,index){ // 修改列(单元格)的颜色 return {css:{"background-color":"rgba(255,250,250,0.7)"}}; } }, { field : 'ydbbb', title : '移动的bbb' , width : 140, formatter : function(value, row, index) { value=$.trim(value); if(value.length>25){ return value.substr(0,24)+"..."; } return value; }, }, { field : 'ltaaaa', title : '联通的aaaa' , width : 140, cellStyle:function(value,row,index){ // 修改列(单元格)的颜色 return {css:{"background-color":"rgba(248,248,255,0.7)"}}; } }, { field : 'ltbbbb', title : '联通的bbbb' , width : 140, formatter : function(value, row, index) { value=$.trim(value); if(value.length>25){ return value.substr(0,24)+"..."; } return value; } }, { field : 'dxaaaa' , title : '电信的aaaaa' , width : 140 , cellStyle:function(value,row,index){ // 修改列(单元格)的颜色 return {css:{"background-color":"rgba(240,255,240,0.7)"}}; } }, { field : 'dxbbbbb' , title : '电信的bbbbb' , width : 140 , }, { field : 'isDel', title : '是否删除' , width : 80, formatter : function(value, row, index) { value=$.trim(value); if(value=="0"){ return "正常"; }else if(value=="1"){ return "已删除"; } return ""; } }, { field : 'createTime', title : '创建日期' , width : 140, formatter : function(value, row, index) { value = $.trim(value) ; if(value.length >= 19){ return value.substr(0 , 19); } return value; } }, { title : '操作', field : 'id', align : 'center', width : 200, formatter : function(value, row, index) { return '' ; } } ] }); }
Instructions :
{css:{"background-color":"rgba(255,250,250,0.7)"}};
dans 0.7
fait référence à la transparence,
Lorsque deux couleurs (ligne et colonne) se croisent, deux couleurs peuvent être vues dans les cellules qui se croisent. Comme le montre l'image ci-dessous :
Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!