完整内容请查看官方文档。
onAll
所有的事件都会触发该事件，参数包括——name：事件名，args：事件的参数。
点击行事件：
onClickRow
当用户点击某一行的时候触发，参数包括——row：点击行的数据，$element：tr 元素，field：点击列的 field 名称。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
striped:true,
onClickRow:function(row, $element,field){
var i = $element.data('index');//可通过此参数获取当前行号
alert(i+"，"+row.age+"，"+field);
}
});
</script>
- 效果：
image.png
同时在文档中还提供了jquery的调用方法：
image.png
使用方法如下：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
striped:true
});
$('#table').on("click-row.bs.table",function(e, row, $element,field) {
var i = $element.data('index');//可通过此参数获取当前行
alert(i+"，"+row.age+"，"+field);
});
</script>
- 效果：
image.png
每一个事件都可以改写成这种绑定的方式，具体写法查阅官方文档。
onDblClickRow
当用户双击某一行的时候触发，使用方法同上。
点击列事件：
onClickCell
当用户单击某一列的时候触发，参数包括——field：点击列的 field 名称，value：点击列的 value 值，row：点击列的整行数据，$element：td 元素。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄'
}, {
field: 'id',
title: '证件号'
}],
striped:true,
onClickCell:function(field, value, row, $element){
alert(field +"，"+value+"，"+row.id);//value当前点击列所在行的内容，可以直接理解为单元格的内容，row为当前点击列所在行的所有数据
}
});
</script>
- 效果：
image.png
onDblClickCell
当用户双击某一列的时候触发，用法同上。
onSort
用户排序列时触发，参数包含——name：排序列字段名称，order：排序列顺序。
- 使用说明：需要在列参数中定义sortable:true
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄',
sortable:true
}, {
field: 'id',
title: '证件号'
}],
striped:true,
onSort:function(name, order){
if(order=="asc"){
order = "升序排列"
}else{
order = "降序排列"
}
alert(name+order);
}
});
</script>
- 效果：
image.png
选择事件触发的方法：
onCheck
当选中一行时触发的函数，参数——row：选中行的数据。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄',
sortable:true
}, {
field: 'id',
title: '证件号'
}],
striped:true,
onCheck:function(row){
alert("您选中的行的name为"+row.name+"，您选中的行的age为"+row.age+"，您选中的行的id为"+row.id);
}
});
</script>
- 效果：
image.png
onUncheck
取消选中一行时触发的函数。
onCheckAll
全选时触发的函数。
onUncheckAll
取消全选时触发的函数。
数据加载触发的函数
onLoadSuccess
表格数据加载成功时触发的函数。
onLoadError
表格数据加载失败时触发的函数
onColumnSwitch
当某一列隐藏/显示时触发，与showColumns:true一起使用。
- 代码示例：
<body>
<table id="table"></table>
</body>
<script>
$('#table').bootstrapTable({
url: 'data/data1.json',
columns: [{
field: 'statebox',
checkbox: true
},{
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年龄',
sortable:true
}, {
field: 'id',
title: '证件号'
}],
striped:true,
showColumns:true,
onColumnSwitch:function(field, checked){
alert(field);
}
});
</script>
- 效果：
image.png
将年龄列隐藏时弹出age：
image.png
网友评论