前言

BootStrap table组件是前端开发中常用的一种表格组件，它的格式介绍网上有非常多的，这里主要介绍它的一个事件onClickRow，及对应函数涉及的相关参数，感觉网上没有特别适合初学者完整详细的说明，根据自己的学习，清楚地说明一下，给大家作为参考，也给自己留一份笔记吧

---

一、一段应用代码，BootStrap Table的应用

下面展示一些 内联代码片。

$('#tbl_student').bootstrapTable({ columns: [ {checkbox:true}, {field:'department',title:'学院',align:'center',valign:'middle',width:'160'}, {field:'major',title:'专业',align:'center',valign:'middle',width:'120'}, {field:'className',title:'班级',align:'center',valign:'middle',width:'100'}, {field:'sequence',title:'学号',align:'center',valign:'middle',width:'120'}, {field:'name',title:'姓名',align:'center',valign:'middle',width:'100'}, {field:'memo',title:'备注',align:'center',valign:'middle',width:'100'}, {field:'operate',title:'操作',align:'center',valign:'middle',width:'180',formatter: operateFormatter} ], queryParams: function (params) { params.className = '信息A1011';//查询条件 return params; }, classes:'table table-bordered table-striped table-condensed table-hover', method:'get',//bootstrap默认的内置请求方式 url:"/oneMS/resource/json/student/student.json",//要请求数据的文件路径 sortName:'sequence',//默认排序列 queryParamsType:'limit',//查询参数组织方式 sidePagination:'server',//指定服务器端分页 pagination:true,//是否分页，即分页按钮 pageSize:50,//单页记录数 pageList:[20,50,100],//分页步进值 paginationHAlign:'right',//分页条水平对齐 paginationVAlign:'bottom',//分页条垂直对齐 singleSelect:true,//只能选中一行 clickToSelect:true,//点击选中行 toolbar:'#tb_student',//自定义工具栏对齐方式 locale:'zh-CN',//支持中文 ***onClickRow:function (row,$element) {//点击表格行时执行 $(document).on('click',function(e){ switch (e.target.text){ case "查看": viewRow(row);break; case "修改": updateRow(row);break; case "删除": deleteRow(row);break; } }) }***, onLoadSuccess:function(data) {//加载成功时执行 }, onLoadError:function(status,res){//加载失败时执行 showMessage('数据加载失败，请重试'); } });

以上代码将产生以下表格

二、相关自定义函数

下面展示一些 内联代码片，对应上面代码所涉及到的自定义函数，operateFormatter函数，让最后一列显示三个按钮，后面三个是对应三个按钮不同的功能。包括查看，将弹出学生姓名，修改，将弹出模态框，并且模态框中显示学生姓名及院系，删除也是弹出学生姓名，项目尚未完成，处于调试阶段。

//自定义操作列 function operateFormatter(value, row, index) { var result = ""; var obj = JSON.stringify(row); result += "<a class='btn btn-sm btn-info' href='#'>查看</a>"; result += "<a class='btn btn-sm btn-warning' href='#'>修改</a>"; result += "<a class='btn btn-sm btn-danger' href='#'>删除</a>"; return result; } ; //查看 function viewRow(obj){ showMessage(obj.name); } //修改 function updateRow(obj){ $('#modal_student').modal('show'); $('#modalLabel_student').html('修改学生信息'); $('#txt_name').val(obj.name); $('#txt_department').val(obj.department); } //删除 function deleteRow(obj){ showMessage(obj.name); }

三.onClickRow事件

1.事件的触发

在BootStrap Table组件中某行进行单击时，将会触发此事件

2.格式

onClickRow:function (row,$element) {//点击表格行时执行 $(document).on(‘click’,function(e){ switch (e.target.text){ case “查看”: viewRow(row);break; case “修改”: updateRow(row);break; case “删除”: deleteRow(row);break; } }) } 通用格式： 事件名 : 函数名（参数）{函数体} 说明：事件触发后，将会执行冒号后的函数

3.参数

row: 点击行的数据，可以看做一个json对象，利用row.field（相应字段名）访问当前行的属性值或者 说字段值

$element: 一个jquery对象，单击事件对应的tr元素,即当前行

field:所点击的单元格对应的字段名，即当前列的field，强调，不是title 格式： onClickRow:function (row,$element,field){}