相关阅读：
Bootstrap Table使用整理(一)
Bootstrap Table使用整理(二)
Bootstrap Table使用整理（四）之工具栏
Bootstrap Table使用整理(五)之分页组合查询
一、单元格内容格式化
rush:js;">
/*
* data-formatter 扩展处理单元格
内容
*/
$('#table1').bootstrapTable({
columns: [
{
field: 'sno',title: '编号',formatter: function (value,row,index) {
//return index + 1;
return '
';
}
},{
field: 'sno',title: '学生编号',formatter: function (value) {
return ''+ value + '';
}
},{ field: 'sname',title: '学生姓名' },{
field: 'ssex',title: '性别',formatter: function (value) {
return '' + value;
}
},{ field: 'sbirthday',title: '生日' },{ field: 'class',title: '课程编号' },],url:'@Url.Action("GetStudent","DataOne")'
});
二、列显示控制，CardView面板显示
rush:js;">
/*
* data-show-columns 设置是否开启
显示列,
默认为false
* data-switchable 设置是否参与
显示隐藏
* data-visible 设置
默认是否
显示
* data-height 设置table表格固定高度
* data-card-view 设置table 的
显示方式是否是card view
*/
var $table= $('#table1').bootstrapTable({
columns: [
{ field: 'sno',switchable: false },{ field: 'ssex',title: '性别' },title: '课程编号',visible:false },"DataOne")'
});
三、单选处理 -radio
rush:js;">
/*
* data-click-to-select 设置行点击是否选中
* data-select-item-name 设置选中项的值
* data-ra
dio 设置列是否
显示为ra
dio单选框
* click-row.bs.table 绑定行点击事件
* getData
获取指定索引的行数据对象
*/
var $table= $('#table1').bootstrapTable({
columns: [
{ field: 'sno',ra
dio:true},"DataOne")'
});
$table.on('click-row.bs.table',function (e,$element) {
$('.success').removeClass('success');
$($element).addClass('success');
});
$('#btn1').click(function () {
//
获取选中行索引
var index = $table.find('tr.success').data('index');
//
获取选中行数据对象
var result = $table.bootstrapTable('getData')[index];
console.info(result);
alert(result.sname);
});
四、多选处理-checkBox
rush:js;">
/*
* data-click-to-select 设置行点击是否选中
* data-check
Box 设置列为多选框，特别说明：设置为check
Box的列不能绑定字段，否则全为选中状态
* formatter 中返回对象的diabled
属性控制是否禁用多选框，checked
属性控制当前是否被选中
*/
var $table= $('#table1').bootstrapTable({
columns: [
{
fileid: 'state',check
Box: true,index) {
if (index === 2) {
return {
disabled: true,checked:true
}
}
if (index === 0) {
return {
disabled: true,checked: true
}
}
console.info(value);
return value;
}
},title: '学生编号'
},$element) {
$('.success').removeClass('success');
$($element).addClass('success');
});
$('#btn1').click(function () {
//
获取选中结果行,返回数组
//返回结果中
包括多选框字段 state=true
var result = $table.bootstrapTable('getSelections');
console.info(result);
var ids = [];
for (var i = 0; i < result.length; i++) {
var item = result[i];
ids.push(item.sno);
}
alert(ids);
});
五、多选框单选模式
rush:js;">
Box="true" data-formatter="checkHandle">选择框
| 编号 |
|
|
|
Box 设置列为多选框
* data-formatter 中返回对象的diabled属性控制是否禁用多选框，checked属性控制当前是否被选中
* data-single-select 指定单选模式,即使使用多选框也是单选模式
*/
var $table= $('#table1').bootstrapTable({
url:'@Url.Action("GetStudent",返回数组
//返回结果中包括多选框字段 state=true
var result = $table.bootstrapTable('getSelections');
console.info(result);
var ids = [];
for (var i = 0; i < result.length; i++) {
var item = result[i];
ids.push(item.sno);
}
alert(ids);
});
function checkHandle(value,index) {
if (index === 2) {
return {
disabled: true
};
}
if (index === 0) {
return {
disabled: true,checked: true
}
}
return value;
}
以上所述是小编给大家介绍的Bootstrap Table使用整理（三）。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
相关文章
Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...
是的，可以将status设置为布尔类型，这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...
起步导入：<linkrel="stylesheet"href="b...
|
