ruoyi鼠标单击一行选中数据

最近使用ruoyi框架的时候,在table中选中某行记录,可以用checkbox打对勾选中。

但是有需求想在鼠标单击某行的时候,某行颜色加深并被选中,所以进行了简单实现,

页面在引入必要的jQuery和ruoyi所需要的js之后,页面的数据展示会在table中进行展示:

<div>
	<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>

此刻如果想要在table中通过鼠标单击选中某行的话,关键的js代码如下:

//定义每行数据row
var replaceVideoRow = "";

//功能js,添加到script标签中即可
$(function() {
        //通过鼠标单击,加深某行颜色,并remove掉之前被选中行的颜色
        $("#bootstrap-table").on('click', 'tr', function() {
            $("#bootstrap-table").find("tbody").find("tr").each(function() {
                $(this).removeClass('color');
            });
            $(this).addClass('color');
        });

       //通过鼠标单击将row放到自定义replaceVideoRow,然后就可以通过replaceVideoRow获取对象相应属               
       //性的数据
        $('#bootstrap-table').on('click-row.bs.table', function(e, row, element) {
            replaceVideoRow = row;
        });
    })

对应的color如下,颜色背景根据需要可自行定义

<style>
	.color{
		background-color: ##31b000   !important;
		color: white;
	}
</style>

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值