Bootstrap 之 bootstrap-table常用配置、formatter传多个参数 / 行数据、增删改查操作

照例，附上地址：

• https://github.com/wenzhixin/bootstrap-table;
• bootstrap-table中文文档

$("#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(
                    '+ index + "', '" + row.id + '\')">删除",
                    '+ row.id + '\')">编辑",
                    '+ encodeURI(JSON.stringify(row)) + '\')">详情"
                )
                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 // 每页的数量
});

 
 

获取配置信息

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

 
 
 

如有不足，望大家多多指点！ 谢谢！