ng-alain组件st表格,实现点击表格行变色,或者渲染变色
实现点击表格行变色
html文件
<st #st [data]="data" (change)="changeClick($event)" [columns]="columns" [page]="page"
[widthMode]="STWidthMode" [scroll]="{ x: '350px', y: '400px' }">
</st>
ts文件函数
// 點擊表格行改變事件1
changeClick(e: STChange) {
if(this.lastItem){
this.lastItem['_rowClassName'] = '';
}
this.setSelectEdit(true);
// console.log(e)
e.click.item['_rowClassName'] = 'sign-tr';
this.lastItem = e.click.item;
}
// 點擊表格行改變事件2
less文件
::ng-deep{
.sign-tr{
background-color: #93cafe !important;
}
}
恕我直言,这玩意感觉有点慢
也很少有这种需求吧?????
渲染变色;
下面的内容参考来自:https://blog.csdn.net/sinat_41806435/article/details/101534744
html中,增加 rowClassName属性
<st #st [rowClassName]="rowClassName" [data]="url" [columns]="columns" [page]="page"></st>
根据某条件,返回类名
rowClassName(record: STData, index: number) {
if(record.leftDay < 0) {
return 'sign-tr';
}
}
css中
::ng-deep{
.sign-tr{
background-color: #fabeb9 !important;
}
}
ng-alain组件st表格,实现点击表格行变色,或者渲染变色的更多相关文章
- easyui的datagrid组件,如何设置点击某行不会高亮该行的方式
easyui的datagrid组件,有些时候我们点击某行不想高亮显示,如何设置点击某行不会高亮该行的方式,有好几种方法可以实现,我举几个,可以根据你具体需求灵活应用: 1.修改easyui的css将高 ...
- [转]jquery 点击表格变为input可以修改无刷新更新数据
原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...
- table表格实现点击修改 PHP同步数据库 排序
最近几天在做一个网站,牵扯到一个导航管理的功能!领导说不用作,可是由于自己自作主张,搞了1天的功能.领导说这个导航管理就是不用做!容易牵扯出好多问题来!估摸是客户小的原因! 没办法就把我1天的劳动荒废 ...
- 点击表格的单元格时实现变颜色,通过for循环为每个单元格添加一个onclick事件
<title>无标题文档</title> <script type="text/javascript" language="javascri ...
- element ui table(表格)点击一行展开
element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...
- elementUI表格行的点击事件,点击表格,拿到当前行的数据
1.绑定事件 2.定义事件 3.点击表格某行的时候,拿到数据]
- 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- 如何将WORD表格转换成EXCEL表格
WORD和EXCEL都可以制作表格,但WORD表格与EXCEL表格之间有着很明显的差距,所以在办公中经常会需要将WORD转换成EXCEL,今天小编就教大家一招将WORD表格转换成EXCEL表格. 操作 ...
- 【JAVA】JSP+layui框架 静态表格转化成数据表格
<table lay-filter="demo" class="layui-table" id="excTable"> < ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
随机推荐
- Git 02: git管理码云代码仓库 + IDEA集成使用git
Git项目搭建 创建工作目录与常用指令 工作目录(WorkSpace)一般就是你希望Git帮助你管理的文件夹,可以是你项目的目录,也可以是一个空目录,建议不要有中文. 日常使用只要记住下图6个命令: ...
- Codeforces Round #802 (Div. 2)C. Helping the Nature(差分)
题目链接 题目大意: 给你一个有n个元素的数组a,你可以通过一下三种操作使数组的每一个值都为0: 选择一个下标i,然后让a[1],a[2]....a[ i ] 都减一; 选择一个下标i,然后让a[i] ...
- promise 的串行执行
function pri (num) { return new Promise((resolve,reject) => { console.log('开始'+num) res ...
- Docker | 专栏文章整理🎉🎉
Docker Docker系列文章基本已经更新完毕,这是我从去年的学习笔记中整理出来的. 笔记稍微有点杂乱.随意,把它们整理成文章花费了不少力气.整理的过程也是我的一个再次学习的过程,同时也是为了方便 ...
- Kubernetes 1.25.4数据平面自带nginx负载均衡实现高可用
1.环境准备 要点: 1.使用一个FQDN统一作为API Server的接入点: 2.加入集群之前,每个节点都将该FQDN解析至第一个Master: 3.加入集群之后,每个Master节点将该FQDN ...
- Android网络请求(2)
Android网络请求(2) 在android网络开发中,除get请求外常见的还有post.put.delete这三种,接下来我们将详细讲解这三种请求及参数 GET请求 我们使用过get请求了,对于我 ...
- java:绘制图形
java绘图类:Graphics类 绘图是高级程序中必备的技术,在很多方面都能用到,如:绘制闪屏图片,背景图片和组件外观等. 1.Graphics类 Graphics类是所有图形上下文的抽象基类,Gr ...
- 如何发布一个 TypeScript 编写的 npm 包
前言 在这篇文章中,我们将使用TypeScript和Jest从头开始构建和发布一个NPM包. 我们将初始化一个项目,设置TypeScript,用Jest编写测试,并将其发布到NPM. 项目 我们的库称 ...
- 【每日一题】【栈和队列、双端队列】20. 有效的括号/NC52 有效括号序列-211127/220126
给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合.左括号必须以正确的顺序闭合. 来源:力扣(L ...
- 24V转5V,24V转3.3V稳压芯片的电路图,,PCB和BOM
1,PW6206与PW6513系列是一款高精度,40V高输入电压,低静态电流,低压降线性稳压器具有高纹波抑制.在VOUT=5V&VIN=7V时,负载电流高达300mA,(输入与输出电压的压差越 ...