照例，附上地址：
$("#tableId").bootstrapTable({
url: "data1.json",
pagination: true,
search: true,
columns: [
{
field: "id",
title: "Item ID",
},
{
field: "name",
title: "Item Name",
},
{
field: "price",
title: "Item Price",
},
{
title: "操作",
align: "center",
width: 90,
formatter: function (value, row, index) {
var actions = []
actions.push(
'<a href="###" οnclick="delTable(\'' + index + "', '" + row.id + '\')">删除</a>",
'<a href="###" οnclick="edit(\'' + row.id + '\')">编辑</a>",
'<a href="###" οnclick="detail(\'' + encodeURI(JSON.stringify(row)) + '\')">详情</a>",
`<a href="###" οnclick="detail('${encodeURI(JSON.stringify(item))}')">获取行</a>`
)
return actions.join("")
},
},
],
})
function delTable(index, id) {
var row = $("#tableId").bootstrapTable('getData')[index];
$('#tableId').bootstrapTable('remove',{field: "name", values: [row.name]});
}
function edit(id) {
// ...
}
function detail(row) {
let currentRow = JSON.parse(decodeURI(row))
// ...
}
配置
var defaults = {
id: "tableId",
type: 0, // 0 代表bootstrapTable 1代表bootstrapTreeTable
method: 'post',
height: undefined,
sidePagination: "server",
sortName: undefined,
sortOrder: "asc",
pagination: true,
paginationLoop: false,
pageSize: 10,
pageNumber: 1,
pageList: [10, 25, 50],
toolbar: "toolbar",
loadingFontSize: 13,
striped: false,
escape: false,
firstLoad: true,
showFooter: false,
search: false,
showSearch: true,
showPageGo: false,
showRefresh: true,
showColumns: true,
showToggle: true,
showExport: false,
showPrint: false,
exportDataType: 'all',
exportTypes: ['csv', 'txt', 'doc', 'excel'],
clickToSelect: false,
singleSelect: false,
mobileResponsive: true,
maintainSelected: false,
rememberSelected: false,
fixedColumns: false,
fixedNumber: 0,
fixedRightNumber: 0,
queryParams: $.table.queryParams,
rowStyle: undefined
};
var options = $.extend(defaults, {});
$('#' + options.id).bootstrapTable({
id: options.id,
url: options.url, // 请求后台的URL（*）
contentType: "application/x-www-form-urlencoded", // 编码类型
method: options.method, // 请求方式（*）
cache: false, // 是否使用缓存
height: options.height, // 表格的高度
striped: options.striped, // 是否显示行间隔色
sortable: true, // 是否启用排序
sortStable: true, // 设置为 true 将获得稳定的排序
sortName: options.sortName, // 排序列名称
sortOrder: options.sortOrder, // 排序方式 asc 或者 desc
pagination: options.pagination, // 是否显示分页（*）
paginationLoop: options.paginationLoop, // 是否启用分页条无限循环的功能
pageNumber: 1, // 初始化加载第一页，默认第一页
pageSize: options.pageSize, // 每页的记录行数（*）
pageList: options.pageList, // 可供选择的每页的行数（*）
firstLoad: options.firstLoad, // 是否首次请求加载数据，对于数据较大可以配置false
escape: options.escape, // 转义HTML字符串
showFooter: options.showFooter, // 是否显示表尾
iconSize: 'outline', // 图标大小：undefined默认的按钮尺寸 xs超小按钮sm小按钮lg大按钮
toolbar: '#' + options.toolbar, // 指定工作栏
loadingFontSize: options.loadingFontSize, // 自定义加载文本的字体大小
sidePagination: options.sidePagination, // server启用服务端分页client客户端分页
search: options.search, // 是否显示搜索框功能
searchText: options.searchText, // 搜索框初始显示的内容，默认为空
showSearch: options.showSearch, // 是否显示检索信息
showPageGo: options.showPageGo, // 是否显示跳转页
showRefresh: options.showRefresh, // 是否显示刷新按钮
showColumns: options.showColumns, // 是否显示隐藏某列下拉框
showToggle: options.showToggle, // 是否显示详细视图和列表视图的切换按钮
showExport: options.showExport, // 是否支持导出文件
showPrint: options.showPrint, // 是否支持打印页面
showHeader: options.showHeader, // 是否显示表头
showFullscreen: options.showFullscreen, // 是否显示全屏按钮
uniqueId: options.uniqueId, // 唯一的标识符
clickToSelect: options.clickToSelect, // 是否启用点击选中行
singleSelect: options.singleSelect, // 是否单选checkbox
mobileResponsive: options.mobileResponsive, // 是否支持移动端适配
cardView: options.cardView, // 是否启用显示卡片视图
detailView: options.detailView, // 是否启用显示细节视图
onCheck: options.onCheck, // 当选择此行时触发
onUncheck: options.onUncheck, // 当取消此行时触发
onCheckAll: options.onCheckAll, // 当全选行时触发
onUncheckAll: options.onUncheckAll, // 当取消全选行时触发
onClickRow: options.onClickRow, // 点击某行触发的事件
onDblClickRow: options.onDblClickRow, // 双击某行触发的事件
onClickCell: options.onClickCell, // 单击某格触发的事件
onDblClickCell: options.onDblClickCell, // 双击某格触发的事件
onEditableSave: options.onEditableSave, // 行内编辑保存的事件
onExpandRow: options.onExpandRow, // 点击详细视图的事件
onPostBody: options.onPostBody, // 渲染完成后执行的事件
maintainSelected: options.maintainSelected, // 前端翻页时保留所选行
rememberSelected: options.rememberSelected, // 启用翻页记住前面的选择
fixedColumns: options.fixedColumns, // 是否启用冻结列（左侧）
fixedNumber: options.fixedNumber, // 列冻结的个数（左侧）
fixedRightNumber: options.fixedRightNumber, // 列冻结的个数（右侧）
onReorderRow: options.onReorderRow, // 当拖拽结束后处理函数
queryParams: options.queryParams, // 传递参数（*）
rowStyle: options.rowStyle, // 通过自定义函数设置行样式
footerStyle: options.footerStyle, // 通过自定义函数设置页脚样式
headerStyle: options.headerStyle, // 通过自定义函数设置标题样式
columns: options.columns, // 显示列信息（*）
data: options.data, // 被加载的数据
responseHandler: $.table.responseHandler, // 在加载服务器发送来的数据之前处理函数
onLoadSuccess: $.table.onLoadSuccess, // 当所有数据被加载时触发处理函数
exportOptions: options.exportOptions, // 前端导出忽略列索引
exportDataType: options.exportDataType, // 导出方式（默认all：导出所有数据；basic：导出当前页的数据；selected：导出选中的数据）
exportTypes: options.exportTypes, // 导出文件类型 （json、xml、png、csv、txt、sql、doc、excel、xlsx、powerpoint、pdf）
printPageBuilder: options.printPageBuilder, // 自定义打印页面模板
detailFormatter: options.detailFormatter, // 在行下面展示其他数据列表
});
查
// 获取整个表格数据
let tableData = $("#tableId").bootstrapTable('getData')
// 获取某一行数据，可以实时获取新增行的数据
var row = $("#tableId").bootstrapTable('getData')[index]; // index 为表格下标
增
let row = {id: 1, name: '张三'}
let count = $("#tableId").bootstrapTable('getData').length;
$("#tableId").bootstrapTable('insertRow', {
index: count + 1,
row: row
});
删
// index 为表格下标
var row = $("#tableId").bootstrapTable('getData')[index];
$('#tableId').bootstrapTable('remove',{field: "name", values: [row.name]});
改
$("#tableId").bootstrapTable("updateRow", {
index: 0,//更新行索引，0起始
replace: true,//合并or替换行数据，true替换，false合并，默认false
row:{ // 更新行数据
id:2,
name: '李四'
}
});
修改的话：还有一种思路就是先获取整个表格的数据，然后再重新更新整个表格
获取选择行
// rows 是个数组
let rows = $("#tableId").bootstrapTable('getSelections')
刷新表格
- 刷新远程数据（调用接口）
$("#tableId").bootstrapTable('refresh', {
silent: true,
url: url, // 请求地址
pageNumber: pageNumber, // 页码
pageSize: pageSize // 每页的数量
});
- 刷新本地数据
-
原数据
$(function() { var data = [ { "id": 1, "name": "Item 1", }, { "id": 2, "name": "Item 2", } // ... 更多数据项 ]; $('#tableId').bootstrapTable({ data: data }); }); -
更新本地数据
var newData = [ { "id": 3, "name": "Item 3", }, { "id": 4, "name": "Item 4", } // ... 更多数据项 ]; $('#tableId').bootstrapTable('load', newData);
-
获取配置信息
var params = $("#tableId").bootstrapTable('getOptions');
刷新options配置
$("#tableId").bootstrapTable('refreshOptions', options);
显示表格指定列
// column 列字段
$("#tableId").bootstrapTable('showColumn', column);
// 示例
$("#tableId").bootstrapTable('showColumn', 'name');
隐藏表格指定列
// column 列字段
$("#tableId").bootstrapTable('hideColumn', column);
// 示例
$("#tableId").bootstrapTable('hideColumn', 'name');
显示所有表格列
$("#tableId").bootstrapTable('showAllColumns');
隐藏所有表格列
$("#tableId").bootstrapTable('hideAllColumns');
销毁表格
$("#tableId").bootstrapTable('destroy');
如有不足，望大家多多指点！ 谢谢！
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
