Bootstrap Table 选中当前行 click-row.bs.table 和 onClickRow ,支持单选,多选
方案一:
自定义 一个 class 选择器
<style> .changeColor{ background-color: #31b0d5 !important; color: white; } </style>
//初始化空数组,用来存放checkbox对象。 var rel_Ids = []; $('#tabMain').on('click-row.bs.table', function (e, row, $element) { //判断是否已选中 if ($($element).hasClass("changeColor")) { //已选中则移除 当前行的class='changeColor' $($element).removeClass('changeColor'); } else { //未点击则,为当前行添加 class='changeColor' $($element).addClass('changeColor'); } if ($($element).hasClass("changeColor")) { //选中则将当前行的主键,添加到数组中 rel_Ids.push(row["REL_ID"]); } else { //未选中则移除 var index = rel_Ids.indexOf(row["REL_ID"]); rel_Ids.splice(index, 1) } alert(rel_Ids); });
效果:
方案二:
与方案一一样也要定义 一个 class 选择器
$("#tabMain").bootstrapTable({ pagination: true, singleSelect: false, search: false, sortable: true, sidePagination: "server", showToggle: true, silentSort: false, showRefresh: true, showExport: true, pageList: [10, 20, 50, 100], pageSize: 20, striped: true, cache: false, onClickRow: function (row, $element) { //判断是否已选中 if ($($element).hasClass("changeColor")) { //已选中则移除 当前行的class='changeColor' $($element).removeClass('changeColor'); } else { //未点击则,为当前行添加 class='changeColor' $($element).addClass('changeColor'); } }, queryParams: function (params) { var array = $("#formSearch").serializeArray(); var data = { pageSize: params.limit, beginRowIndex: params.offset + 1, sortField: params.sort, order: params.order, }; $(array).each(function () { if (data[this.name]) { if ($.isArray(data[this.name])) { data[this.name].push(this.value); } else { data[this.name] = [data[this.name], this.value]; } } else { data[this.name] = this.value; } }); return data; } });
参考1:https://blog.csdn.net/cauchy6317/article/details/82019367
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律