最近使用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>