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操作表格多出一个内容行,这个功能我都做 ...
随机推荐
- Appscan的安装破解以及使用
本文简单介绍Appscan的安装和使用. 一.下载安装 可自行百度下载相关安装包(因较高版本的破解资料比较难找,建议下载9.0版本). 双击.exe安装文件进行安装,在弹出的安装指引中各选项默认安装即 ...
- Linux网络通信(TCP套接字编写,多进程多线程版本)
预备知识 源IP地址和目的IP地址 IP地址在上一篇博客中也介绍过,它是用来标识网络中不同主机的地址.两台主机进行通信时,发送方需要知道自己往哪一台主机发送,这就需要知道接受方主机的的IP地址,也就是 ...
- Stream流使用
Stream流的使用 转换为流的操作 map转换为stream流 Map map = new HashMap(); Set<Map.Entry<String,Integer>> ...
- 第2-3-4章 上传附件的接口开发-文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录 5.3 接口开发-上传附件 5.3.1 接口文档 5.3.2 代码实现 5.3.3 接口测试 5.3 接口开发-上传附件 第2-1-2章 传统方式安装FastDFS-附FastDFS常用命令 第 ...
- 5、有一行电文,译码规律为: a ——> z b——> y c ——> x. 即把第一个字母变成第26个字母, 第i个字母变成第(26-i+1)个字母, 非字母字符不变
/* 有一行电文,译码规律为: a --> z b--> y c --> x. 即把第一个字母变成第26个字母, 第i个字母变成第(26-i+1)个字母, 非字母字符不变 */ #i ...
- Kubernetes安装GitLab
个人名片: 对人间的热爱与歌颂,可抵岁月冗长 Github:念舒_C.ying CSDN主页️:念舒_C.ying 个人博客 :念舒_C.ying Kubernetes安装GitLab Step 1 ...
- 学习ASP.NET Core Blazor编程系列十——路由(下)
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- gcc和g++,c和cpp
gcc对.c文件当成c处理,把.cpp文件当成c++处理 g++对.c和.cpp都当成c++处理 小心会遇到错误
- <十>关于菱形继承
代码1 #include <iostream> using namespace std; class A{ public: A(int _a):ma(_a){ cout<<&q ...
- 【每日一题】【链表.next.next判空条件】141. 环形链表/NC4 判断链表中是否有环-211120/220123
给你一个链表的头节点 head ,判断链表中是否有环. 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环. 为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链 ...