实现点击表格行变色

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表格,实现点击表格行变色,或者渲染变色的更多相关文章

  1. easyui的datagrid组件,如何设置点击某行不会高亮该行的方式

    easyui的datagrid组件,有些时候我们点击某行不想高亮显示,如何设置点击某行不会高亮该行的方式,有好几种方法可以实现,我举几个,可以根据你具体需求灵活应用: 1.修改easyui的css将高 ...

  2. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  3. table表格实现点击修改 PHP同步数据库 排序

    最近几天在做一个网站,牵扯到一个导航管理的功能!领导说不用作,可是由于自己自作主张,搞了1天的功能.领导说这个导航管理就是不用做!容易牵扯出好多问题来!估摸是客户小的原因! 没办法就把我1天的劳动荒废 ...

  4. 点击表格的单元格时实现变颜色,通过for循环为每个单元格添加一个onclick事件

    <title>无标题文档</title> <script type="text/javascript" language="javascri ...

  5. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  6. elementUI表格行的点击事件,点击表格,拿到当前行的数据

    1.绑定事件 2.定义事件 3.点击表格某行的时候,拿到数据]

  7. 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接

    查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...

  8. 如何将WORD表格转换成EXCEL表格

    WORD和EXCEL都可以制作表格,但WORD表格与EXCEL表格之间有着很明显的差距,所以在办公中经常会需要将WORD转换成EXCEL,今天小编就教大家一招将WORD表格转换成EXCEL表格. 操作 ...

  9. 【JAVA】JSP+layui框架 静态表格转化成数据表格

    <table lay-filter="demo" class="layui-table" id="excTable"> < ...

  10. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

随机推荐

  1. CVE-2021-44832 log4j_2.17.0 RCE复现与吐槽

    先说一句,这傻x洞能给cve就离谱,大半夜给人喊起来浪费时间看了一个小时. 先说利用条件: 需要加载"特定"的配置文件信息,或者说实际利用中需要能够修改配置文件(你都能替换配置文件 ...

  2. jQuery+bootstrap实现有省略号的数据分页

    1.前言 在前端通过ajax请求数据后,可以通过bootstrap实现分页.由于bootstrap只提供分页的按钮的样式.数据分页我们需要实现页码跳转,上一页下一页,数据过多显示省略号,点击省略号能快 ...

  3. 表驱动法在STM32中的应用

    1.概念 所谓表驱动法(Table-Driven Approach)简而言之就是用查表的方法获取数据.此处的"表"通常为数组,但可视为数据库的一种体现.根据字典中的部首检字表查找读 ...

  4. Python 包(package)

    在比较大型的项目中常常需要编写.用到大量的模块,此时我们可以使用包(Package)来管理这些模块. (一)什么是包? Python包,就是里面装了一个__init__.py文件的文件夹. __ini ...

  5. C#设置picturebox滚动条来实现查看大图片

    要给PictureBox添加滚动条需要以下步骤:    (1)将picturebox放在panel上:   ( 2)将panel的AutoScroll设置为ture:    (3)将picturebo ...

  6. 【深入浅出 Yarn 架构与实现】3-3 Yarn Application Master 编写

    本篇文章继续介绍 Yarn Application 中 ApplicationMaster 部分的编写方法. 一.Application Master 编写方法 上一节讲了 Client 提交任务给 ...

  7. i春秋Upload

    打开是一句普普通通的话,先查看源码,发现提示,我们需要post我们从i春秋得到的东西 得到了什么呢?不知道,去看看cookie,没什么特别的地方,再去抓包试试 找到了我们需要post的东西,不过这东西 ...

  8. psutil.AccessDenied: psutil.AccessDenied

    解决办法 import psutil for proc in psutil.process_iter(): try: print(proc.name()) except (psutil.NoSuchP ...

  9. editorial 专栏

    社论 22.10.1 solution for pl_er 密码是我的名字的拼音 全小写无空格 社论 22.10.2 solution for Simu. 密码是联考密码 社论 22.10.4 sol ...

  10. Velero系列文章(四):使用Velero进行生产迁移实战

    概述 目的 通过 velero 工具, 实现以下整体目标: 特定 namespace 在B A两个集群间做迁移; 具体目标为: 在B A集群上创建 velero (包括 restic ) 备份 B集群 ...