Bootstrap Table使用整理（三）

Bootstrap Table使用整理（三）

相关阅读：

Bootstrap Table使用整理(一) //jb51.net/article/115789.htm

Bootstrap Table使用整理(二)  //jb51.net/article/115791.htm

Bootstrap Table使用整理（四）之工具栏 //jb51.net/article/115798.htm

Bootstrap Table使用整理(五)之分页组合查询 //jb51.net/article/115785.htm

一、单元格内容格式化

/*

* data-formatter 扩展处理单元格内容

*/

$('#table1').bootstrapTable({

columns: [

{

field: 'sno', title: '编号', formatter: function (value, row, index) {

//return index + 1;

return ''+(index+1)+'';

}

},

{

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")'

});

data-classes="table table-hover table-condensed">

二、列显示控制，CardView面板显示

/*

* data-show-columns 设置是否开启显示列,默认为false

* data-switchable 设置是否参与显示隐藏

* data-visible 设置默认是否显示

* data-height 设置table表格固定高度

* data-card-view 设置table 的显示方式是否是card view

*/

var $table= $('#table1').bootstrapTable({

columns: [

{ field: 'sno', title: '学生编号', switchable: false },

{ field: 'sname', title: '学生姓名' },

{ field: 'ssex', title: '性别' },

{ field: 'sbirthday', title: '生日' },

{ field: 'class', title: '课程编号', visible:false },

],

url:'@Url.Action("GetStudent","DataOne")'

});

data-classes="table table-hover"

data-show-columns="true"

data-height="300"

data-card-view="true">

三、单选处理 -radio

/*

* data-click-to-select 设置行点击是否选中

* data-select-item-name 设置选中项的值

* data-radio 设置列是否显示为radio单选框

* click-row.bs.table 绑定行点击事件

* getData 获取指定索引的行数据对象

*/

var $table= $('#table1').bootstrapTable({

columns: [

{ field: 'sno', title: '学生编号' ,radio:true},

{ field: 'sname', title: '学生姓名' },

{ field: 'ssex', title: '性别' },

{ field: 'sbirthday', title: '生日' },

{ field: 'class', title: '课程编号' },

],

url:'@Url.Action("GetStudent","DataOne")'

});

$table.on('click-row.bs.table', function (e, row, $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);

});

获取表格选中结果

data-classes="table table-hover"

data-show-columns="true"

data-click-to-select="true"

data-select-item-name="sno">

四、多选处理-checkbox

/*

* data-click-to-select 设置行点击是否选中

* data-checkbox 设置列为多选框，特别说明：设置为checkbox的列不能绑定字段，否则全为选中状态

* formatter 中返回对象的diabled属性控制是否禁用多选框，checked属性控制当前是否被选中

*/

var $table= $('#table1').bootstrapTable({

columns: [

{

fileid: 'state', checkbox: true, formatter: function (value, row, index) {

if (index === 2) {

return {

disabled: true,

checked:true

}

}

if (index === 0) {

return {

disabled: true,

checked: true

}

}

console.info(value);

return value;

}

},

{

field: 'sno', title: '学生编号'

},

{ field: 'sname', title: '学生姓名' },

{ field: 'ssex', title: '性别' },

{ field: 'sbirthday', title: '生日' },

{ field: 'class', title: '课程编号' },

],

url:'@Url.Action("GetStudent","DataOne")'

});

$table.on('click-row.bs.table', function (e, row, $element) {

$('.success').removeClass('success');

$($element).addClass('success');

});

$('#btn1').click(funcEHSUZtion () {

//获取选中结果行,返回数组

//返回结果中包括多选框字段 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);

});

获取表格选中结果

data-classes="table table-hover"

data-show-columns="true"

data-click-to-select="true"

>

五、多选框单选模式

获取表格选中结果

data-classes="table table-hover"

data-show-columns="true"

data-click-to-select="true"

data-single-select="true"

>

/** data-click-to-select 设置行点击是否选中

* data-checkbox 设置列为多选框

* data-formatter 中返回对象的diabled属性控制是否禁用多选框，checked属性控制当前是否被选中

* data-single-select 指定单选模式,即使使用多选框也是单选模式

*/

var $table= $('#table1').bootstrapTable({

url:'@Url.Action("GetStudent","DataOne")'

});

$table.on('click-row.bs.table', function (e, row, $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);

});

function checkHandle(value, row, index) {

if (index === 2) {

return {

disabled: true

};

}

if (index === 0) {

return {

disabled: true,

checked: true

}

}

return value;

}

以上所述是给大家介绍的Bootstrap Table使用整理（三），希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。