bootstrap-table 插件的使用

最新推荐文章于 2024-01-25 17:53:25 发布

原创最新推荐文章于 2024-01-25 17:53:25 发布 · 5.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #插件

js学习专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用 Bootstrap Table 插件实现表格的动态加载与配置。根据不同的条件选择合适的表头字段，并通过 AJAX 返回数据填充表格。适用于前端开发人员学习和参考。

在页面里引入 bootstrap-table.js 插件

$('#table').bootstrapTable('destroy'); //动态加载表格之前，先销毁表格

$('#table').bootstrapTable({//表格初始化
columns: tableColumns, //表头
data:data //通过ajax返回的数据

});

//根据条件动态选择表头

//table 会根据field字段，加载data里面的数据

tableColumns = [
{field: 'name', title: '名称', sortable: true},
{field: 'number', title: '编号', sortable: true},
{field: 'classes', title: '类型', sortable: true},
{field: 'standard', title: '规格', sortable: true},
{field: 'managestaff', title: '专管员', sortable: true},
{field: 'remark', title: '备注', sortable: true}
];
}else if(infoid == 3){
tableColumns = [
{field: 'name', title: '名称', sortable: true},
{field: 'contact', title: '联系方式', sortable: true},
{field: 'company', title: '公司', sortable: true},
{field: 'address', title: '地址', sortable: true},
{field: 'zipcode', title: '邮编', sortable: true},
{field: 'remark', title: '备注', sortable: true}
];
}else if(infoid == 4){
tableColumns = [
{field: 'name', title: '名称', sortable: true},
{field: 'contact', title: '联系方式', sortable: true},
{field: 'post', title: '岗位', sortable: true},
{field: 'education', title: '学历', sortable: true},
{field: 'brotherday', title: '出生日期', sortable: true},
{field: 'remark', title: '备注', sortable: true}
];
}else if(infoid == 7){
tableColumns = [
{field: 'base', title: '所在基地', sortable: true},
{field: 'classes', title: '温室', sortable: true},
{field: 'standard', title: '规格', sortable: true},
{field: 'managestaff', title: '专管员', sortable: true},
{field: 'remark', title: '备注', sortable: true}
];
}else {
tableColumns = [
{field: 'crop', title: '作物', sortable: true},
{field: 'origin', title: '来源', sortable: true},
{field: 'standard', title: '规格', sortable: true},
{field: 'managestaff', title: '专管员', sortable: true},
{field: 'remark', title: '备注', sortable: true}
];
}