bootstrap-table复选框默认选中。（从数据库获取到对应的状态进行判断是否为选中状态）

最新推荐文章于 2025-05-29 11:56:13 发布

云非云额

最新推荐文章于 2025-05-29 11:56:13 发布

阅读量9k

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap-table（表格控件）文章标签：表格选中复选框默认选中

本文链接：https://blog.youkuaiyun.com/duan199404/article/details/74942919

bootstrap-table（表格控件）专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何根据后台返回的数据设置Bootstrap-table中复选框的默认选中状态。通过判断每个条目的'state'字段，确定复选框是否被选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
url:'../data/kehulist.json',
uniqueId: "id",
striped:true,
// pagination:true,
clickToSelect:true,
height:340,
columns: [{
field : 'state',
checkbox:true,
formatter : stateFormatter
},{
field: 'id',
title: '组织编码',
sortable: true,
},{
field: 'name',
title: '组织名称',
sortable: true,
}],
});

//对应的函数进行判断；
function stateFormatter(value, row, index) {
if (row.state == true)
return {
disabled : false,//设置是否可用
checked : true//设置选中
};
return value;

}

模拟后台对应的数据；

[
{
"id": "1",
"name": "金蝶软件（中国）有限公司",
"state": false, //是否选中
"tel":"18536552258"
},
{
"id": "2",
"name": "金蝶软件（中国）有限公司",
"state": true,
"tel":"18536552258"
},
{
"id": "3",
"name": "金蝶软件（中国）有限公司",
"state": false,
"tel":"18536552258"
}
]