Ext4 viewConfig getRowClass 背景颜色修改

最新推荐文章于 2022-12-26 18:32:19 发布
最新推荐文章于 2022-12-26 18:32:19 发布 · 1.1k 阅读 · 0

本文探讨了如何利用CSS的.my_row_red.x-grid-cell类样式和JavaScript的getRowClass方法来实现网格面板中行背景颜色的动态变化，具体展示了在不同状态下的样式应用。

css

 .my_row_red .x-grid-cell {    //一定要加后面-cell class名称，否则无效

background-color: red;

}

 

js

new Ext.grid.panel({

     ...

     viewConfig : {

forceFit : true,

getRowClass : function(record, rowIndex, rowParams, store) {

if (record.data.status> 0) {

return 'my_row_red';   //返回的class name

}

}

}

})

EXTJS单元格变色、行变色
11-05
EXTJS实现单元格变色、行变色（文字、背景）
Ext表格的viewConfig
flare
06-01 1892
viewConfig: { forceFit:true }, 这个功能强制让表格在固定的宽度（用表格的width，如果为null就用表格父容器的宽度）里中调整各列到合适的宽度。 这样的设置之后，cm的width属性将会失效。表格视图区域的宽度是固定的，不会出现横向的滚动条。 ...
extjs grid 整行变颜色_ExtJs4学习（十）Grid单元格换色和行换色的方法
weixin_39608118的博客
12-22 478
Grid单元格换色{text:'类别',dataIndex:'type',align:'center',renderer:function(value,metaData){console.log(metaData);if(value==0){metaData.css='x-grid-record-gray';return "注销系统";}else if(value==1){metaData.css...
EXTJS4.2 控件之Grid getRowClass 添加行背景色
05-12 651
css 样式： /*交流管理系统 开始*/ tr.x-grid-record-blue .x-grid-td { background: #87CEFF; }/*grid 行颜色*/ tr.x-grid-record-green .x-grid-td { background: #00ff90 }/*grid 行颜色*/ /*交流管理系统 结束*/ js：代码一...
Ext 改变行颜色
loadhai的专栏
11-09 1814
Java代码   Ext.ux.GridView=Ext.extend(       Ext.grid.GridView,       {           getRowClass:function(record,index)           {               //todo:缺少为每种类型配置一种颜色表示               if(record.get
extjs4中加载时，隐藏grid内的数据,getRowClass实现
xx1231的专栏
11-14 4839
在grid绑定store数据时，有些数据是我们不想显示到前台让用户看到的；这时怎么处理；有人可能说既然不让用户看到；就不应该在查询时加载，但是用户的需求可能是有些变态；我就遇到了；非的用两个grid显示同一个store的数据，但是都不显示完全的，值显示一部分；在第三个grid内显示所有数据；用store的过滤无法实现； 实现方式是，在定义每一个grid时，这样写 Ext.create('Ext
Ext4使用总结（十一） Grid的单元格的背景色和字体的处理
大脑与思维的专栏
12-19 1068
1    修改表格的单元的背景色        1.1 在html文件中，增加单元格的样式定义 1.2 Grid的单元格定义中增加renderer函数，使用样式 2 不同颜色显示单元格中的字
extjs4 row Class
zhengyuechuan的专栏
09-16 744
viewConfig: { forceFit: true, getRowClass: function(record, index) { var refunded = record.get('refunded'); if ('退款申请中' == refunded) { return 'c
普通表格：Ext.grid.GridPanel
程序员的天堂
05-24 285
表格相关组件总图：    1、Ext.grid.GridPanel     主要配置项：          store：表格的数据集          columns：表格列模式的配置数组，可自动创建ColumnModel列模式          autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0          stripeRows：表格是否隔行换色，...
vue+element-ui的table表格通过子表数据，进行展示/隐藏左侧展开箭头
Zheng_xinle的博客
12-26 1371
el-table设置子表没有数据时候隐藏左侧展开按钮。
el-table样式总结—持续更新
weixin_43258184的博客
03-24 2234
1.el-table标签的header-cell-style给指定的表头添加样式 :header-cell-style="getRowClass" getRowClass ({ row, column, rowIndex, columnIndex }) { if ((rowIndex === 0 && columnIndex === 0) || (rowIndex === 1 && (columnIndex
Ext Grid实现高亮显示特定行
魏书斌的博客
05-21 2746
定义一个css:.highlight-special-row {    background: #DFE8F6 !important;    border:1px dotted #a3bae9;}重写GridView的getRowClass方法grid.getView().getRowClass = function(r, rowIndex, rp, ds) {    if (rowIndex =
Extjs3 给表格的行和列设置颜色
知识搜集
11-01 3230
给表格的行设置颜色的代码示例: viewConfig : { forceFit : true, enableRowBody : true, getRowClass : function(record, r
element ui设置头部第一行的背景颜色
Feast_aw的博客
06-22 1万+
html部分 <el-table :data="tableData" border style="width: 100%" :header-cell-style="getRowClass"> 方法 //设置表格第一行的颜色 getRowClass({ row, column, rowIndex, columnIndex }) { if (rowIndex == 0) { r...
vue中使用elementui的表格展开的属性 type=“expand” 没有数据的不显示展开按钮，有数据才会显示
热门推荐
Null_Bugs的博客
07-21 1万+
&lt;el-table        :default-expand-all="true"        :row-class-name="getRowClass"&gt; &lt;/el-table&gt;   getRowClass:function(row,rowIndex){         if(row.row.childMessageTypeUserRnVos.len...
开源组件系列（2）：关系型数据导入（Sqoop与Canal）
晓阳的数据小站
02-19 2616
（一）概述 关系型数据库是我们程序员日常开发中最常用的工具，通过Mysql、Oracle等软件，将我们要处理的数据存储在关系型数据库中。为了能够在Hadoop上分析这些关系型数据库，我们需要通一些设定好的框架，将关系型数据库中的【结构化】数据存储到HDFS上，以便采用MapReduce和Spark做进一步的运算处理。为了便于后续数据可视化工作，我们将数据计算出来后，通常会再倒回到关系型数据...
Object中getClass()方法详解
evilcry2012的专栏
04-16 920
Object中getClass()方法详解 博客分类：  java基础知识     Java代码   Obejct类有一个getClass()方法：       返回此 Object 的运行时类。       返回的 Class 对象是由所表示类的 static synchronized 方法锁定的对象。      public clas
el-table ---row-class-name ----cell-class-name
weixin_41652466的博客
06-05 5066
row-class-name&lt;el-table stripe v-if="!isHidden" :data="rankDta" height="22.2rem" width="100%" :row-class-name="getRowClass" v-loading="loading" element-loading-text="拼命加载中&q
修改选中行默认背景颜色
最新发布
07-15
要修改表格或列表中选中行的默认背景色，可以通过多种方式实现，具体取决于使用的前端框架（如 ExtJS、Element UI、Ant Design 等）。以下是一些常见框架的具体方法和 CSS 样式调整示例。 ### ExtJS 6 中修改表格选中行的背景色 在 ExtJS 6 中，如果希望针对某个特定表格修改选中行的背景色，而不是全局更改所有表格的样式，可以通过自定义 `rowStyle` 和鼠标事件来实现。例如： ```javascript Ext.create('Ext.grid.Panel', { // ...其他配置 selModel: { selType: 'checkboxmodel', mode: "MULTI", checkOnly: true }, viewConfig: { getRowClass: function(record, rowIndex, rowParams, store) { return 'custom-row-style'; // 自定义 CSS 类名 } } }); ``` 然后，在 CSS 文件中定义 `.custom-row-style` 类以覆盖默认的选中样式： ```css .custom-row-style .x-grid-row-selected { background-color: #fff !important; /* 设置为白色或其他颜色 */ } ``` 此外，为了处理鼠标悬停时的颜色变化，可以添加如下 CSS： ```css .x-grid-row-over .x-grid-cell { background-color: #f0f0f0 !important; } ``` ### Element UI 中修改表格选中行的背景色 在 Element UI 中，可以通过 CSS 覆盖 `.el-table__row.current-row` 的样式来修改选中行的背景色。例如： ```css .el-table__row.current-row > td { background-color: #ffffff !important; /* 设置为白色或其他颜色 */ } ``` 同时，如果你希望取消鼠标悬停时的高亮效果，可以添加以下 CSS： ```css .el-table__row:hover > td { background-color: transparent !important; } ``` ### Ant Design 中修改表格选中行的背景色 对于 Ant Design 的 `Table` 组件，可以通过设置 `rowClassName` 属性来自定义选中行的类名，并通过 CSS 修改其背景色。例如： ```jsx <Table rowClassName={() => 'custom-ant-table-row'} /> ``` 然后在 CSS 文件中定义该类： ```css .custom-ant-table-row.ant-table-row-selected > td { background-color: #ffffff !important; /* 设置为白色或其他颜色 */ } ``` 同样地，如果需要去除鼠标悬停时的背景色，可以使用以下 CSS： ```css .ant-table-tbody > tr:hover > td { background-color: transparent !important; } ``` ### 使用 JavaScript 动态清除选中行的背景色 如果你希望在点击表格外部区域时清除选中行的背景色，可以通过监听点击事件并操作 DOM 来实现。例如： ```javascript document.addEventListener('click', function(event) { if (!event.target.closest('#myTable')) { var selectedRows = document.querySelectorAll('#myTable .el-table-tr.current-row'); selectedRows.forEach(function(row) { row.className = 'normal hy-table-tr'; // 恢复默认类名 }); } }); ``` 以上方法可以帮助你在不同框架中灵活地修改表格选中行的默认背景色[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值