BootStrap----table

已于 2023-03-22 11:01:01 修改
阅读量1.5k 收藏 3
点赞数
文章标签： bootstrap 前端 html
于 2023-02-14 16:30:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingw1/article/details/128827266
版权

项目场景：

需要涉及到BootStrap----table表格的,因为最后也没有使用bootstrap，现在只是简单的整理一下搜集到的资料

问题描述

提示：对于参数信息的涉及和查阅

参考：(8条消息) bootstrapTable常用参数与方法_王小小小伟的博客-CSDN博客(8条消息) bootstrap-table 常用参数实例_Fantacy.的博客-CSDN博客
(8条消息) table.bootstrapTable() 之基本使用方法_请叫我郝先生的博客-CSDN博客

bootstrap table 方法 - itxst.com

function load() {
    var initColumns = [
        {
            checkbox: true
        },
        {
            field: 'number',
            title: '单据编号',
            align: 'center',
            width: 200,
        }
     ]
    if(corpType!=1){//平台端、服务端
        initColumns.push(
            {
                field: 'assetSourceName',
                title: '资产端',
                align: 'center',
                width: 220,
            }
        )
    }
    initColumns.push(
        {
            field: 'custName',
            title: '车主姓名',
            align: 'center',
            width: 100,
        },
        {
            field: 'mobile',
            title: '手机号',
            align: 'center',
            width: 100,
        },
    
        {
            field: 'compensatoryAmount',
            title: '代偿金额(元)',
            align: 'center',
            width: 100,
            footerFormatter: function (data) {
                var field = this.field;
                return data.map(function (row) {
                    if(checkNotNull(row[field])){
                        return +row[field];
                    }
                    return 0;
                }).reduce(function (sum, i) {
                    //return parseFloat(sum) + parseFloat(i);
                    return accAdd(sum, i);
                }, 0)
            },
            formatter: function (value, row, index) {
                return formatterAmount(value);
            },
        },
        {
            field: 'overdueAmount',
            title: '逾期金额(元)',
            align: 'center',
            width: 100,
            footerFormatter: function (data) {
                var field = this.field;
                return data.map(function (row) {
                    if(checkNotNull(row[field])){
                        return +row[field];
                    }
                    return 0;
                }).reduce(function (sum, i) {
                    //return parseFloat(sum) + parseFloat(i);
                    return accAdd(sum, i);
                }, 0)
            },
            formatter: function (value, row, index) {
                return formatterAmount(value);
            },
        },
 
        {
            field: 'assetLevel',
            title: '逾期级别',
            align: 'center',
            width: 100
        },
        {
            field: 'classifyDescribe',
            title: '分类来源',
            align: 'center',
            width: 100,
        },
        {
            field: 'updateTime',
            title: '更新时间',
            align: 'center',
            width: 150,
        }
     )
    if(corpType==-1){//平台端
        initColumns.push(
            {
                field: 'nodeServiceName',
                title: '服务机构',
                align: 'center',
                width: 100,
            }
        )
    }
    initColumns.push(
        {
            field: 'inStateName',
            title: '服务阶段',
            align: 'center',
            width: 100,
            formatter:function (value,row,index) {
                // return billCustStateFunc(value);
                return value;
            }
        },
        {
            field: 'isFullCompensation',
            title: '是否全额代偿',
            align: 'center',
            width: 100,
            formatter:function (value,row,index) {
                if(value == 0){
                    return '否';
                }else if(value == 1){
                    return '是';
                }
                return '-';
            }
        },
        {
            field: 'isImportCompensatoryDetail',
            title: '代偿明细导入',
            align: 'center',
            width: 100,
        },
        {
            title: '操作',
            field: 'id',
            align: 'center',
            width: '100px',
            width: 200,
            formatter: function (value, row, index) {
                var e = '';
                var f = '';
                var h ='';
                var g ='';
                if(row.inState == 'loanAssets'){
                    e = '<a class="btn btn-primary btn-sm '+s_edit_h+'" title="编辑" onclick="edit(\''
                        + row.id
                        + '\')">编辑</a> ';
                    f = '<a class="btn btn-success btn-sm '+s_edit_h+'" title="删除" onclick="remove(\''
                        + row.id
                        + '\')">删除</a> ';
                }else{
                    e = '<a class="btn btn-primary btn-sm '+s_view_h+'" title="查看" onclick="view(\''
                        + row.id + '\',\'' + (row.legalOrderId || '') + '\',\'' + row.custName
                        + '\')">查看</a> ';
                    f = '<a class="btn btn-success btn-sm '+s_follow_up+'" title="跟进" onclick="processChart(\''
                        + row.id
                        + '\')">跟踪</a> ';
                    // h = '<a class="btn btn-success btn-sm '+s_withdraw_h+'" title="撤回" onclick="withdraw(\''
                    //     + row.id
                    //     + '\')">撤回</a> ';
                }
                if(userId == 1){//单独给admin开口子补录
                    g = '<a class="btn btn-primary btn-sm" title="家访回款补录" onclick="visitPaySupply(\''
                        + row.id
                        + '\')">家访回款补录</a> ';
                }
                return e + f + h + g;
            }
        }
    );

    $('#exampleTable')
        .bootstrapTable(
            {
                method: 'get', // 服务器数据的请求方式 get or post
                url: prefix + "/listLike", // 模糊查询使用
                //	url : prefix + "/list", // 直接查询
                //	showRefresh : true,
                //	showToggle : true,
                //	showColumns : true,
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                dataType: "json", // 服务器返回的数据类型
                pagination: true, // 设置为true会在底部显示分页条
                // queryParamsType : "limit",
                // //设置为limit则会发送符合RESTFull格式的参数
                singleSelect: false, // 设置为true将禁止多选
                showFooter: true,
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize: 10, // 如果设置了分页，每页数据条数
                pageNumber: 1, // 如果设置了分布，首页页码
                //search : true, // 是否显示搜索框
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                // height : 650,
                // height : getTableHeight(),
                rightFixedColumns: true,
                rightFixedNumber: 1,
                queryParams: function (params) {
                    return {
                        //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        custName:$('#searchName').val(),
                        mobile: $('#searchPhone').val(),
                     
                        limit: params.limit,
                        offset: params.offset,
                    };
                },
             
            });
}

function reLoad() {
    $('#exampleTable').bootstrapTable('refresh');
}



表格的参数定义在 jQuery.fn.bootstrapTable.defaults

名称标签类型默认描述
-data-toggleString'table'不用写 JavaScript 直接启用表格。
classesdata-classesString'table table-hover'表格的类名称。默认情况下，表格是有边框的，你可以添加 'table-no-bordered' 来删除表格的边框样式。
sortClassdata-sort-classStringundefined被排序的td元素的类名。
heightdata-heightNumberundefined定义表格的高度。
undefinedTextdata-undefined-textString'-'当数据为 undefined 时显示的字符。
stripeddata-stripedBooleanfalse设置为 true 会有隔行变色效果。
sortNamedata-sort-nameStringundefined定义排序列，通过url方式获取数据填写字段名，否则填写下标。
sortOrderdata-sort-orderString'asc'定义排序方式，'asc' 或者 'desc'。
sortStabledata-sort-stableBooleanfalse设置为 true 将获得稳定的排序，我们会添加\_position属性到 row 数据中。
iconsPrefixdata-icons-prefixString'glyphicon'定义字体库 ('Glyphicon' or 'fa' for FontAwesome)，使用"fa"时需引用 FontAwesome，并且配合 icons 属性实现效果。
Glyphicon 集成于Bootstrap可免费使用，参考： GLYPHICONS - Visual language that everybody understands
FontAwesome 参考： http://fortawesome.github.io/
iconsdata-iconsObject{
  paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
  paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
  refresh: 'glyphicon-refresh icon-refresh'
  toggle: 'glyphicon-list-alt icon-list-alt'
  columns: 'glyphicon-th icon-th'
  detailOpen: 'glyphicon-plus icon-plus'
  detailClose: 'glyphicon-minus icon-minus'
}		自定义图标
columns-Array[]列配置项，详情请查看 列参数 表格.
data-Array[]加载json格式的数据。
ajaxdata-ajaxFunctionundefined自定义 AJAX 方法，须实现 jQuery AJAX API。
methoddata-methodString'get'服务器数据的请求方式 'get' 或 'post'。
urldata-urlStringundefined服务器数据的加载地址。
cachedata-cacheBooleantrue设置为 false 禁用 AJAX 数据缓存。
contentTypedata-content-typeString'application/json'发送到服务器的数据编码类型。
dataTypedata-data-typeString'json'服务器返回的数据类型。
ajaxOptionsdata-ajax-optionsObject{}提交ajax请求时的附加参数，可用参数列请查看jQuery.ajax() | jQuery API Documentation.
queryParamsdata-query-paramsFunctionfunction(params) {
return params;
}		请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含
limit, offset, search, sort, order 否则, 需要包含: 
pageSize, pageNumber, searchText, sortName, sortOrder. 
返回false将会终止请求。
queryParamsTypedata-query-params-typeString'limit'设置为 'limit' 则会发送符合 RESTFul 格式的参数。
responseHandlerdata-response-handlerFunctionfunction(res) {
return res;
}		加载服务器数据之前的处理程序，可以用来格式化数据。
参数：res为从服务器请求到的数据。
paginationdata-paginationBooleanfalse设置为 true 会在表格底部显示分页条。
paginationLoopdata-pagination-loopBooleantrue设置为 true 启用分页条无限循环的功能。
onlyInfoPaginationdata-only-info-paginationBooleanfalse设置为 true 只显示总数据数，而不显示分页按钮。需要设置 pagination='true'。
sidePaginationdata-side-paginationString'client'设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置服务器数据地址（url）或者重写ajax方法。
pageNumberdata-page-numberNumber1如果设置了分页，首页页码。
pageSizedata-page-sizeNumber10如果设置了分页，页面数据条数。
pageListdata-page-listArray[10, 25, 50, 100, All]如果设置了分页，设置可供选择的页面数据条数。设置为 All 或者 Unlimited，则显示所有记录。
selectItemNamedata-select-item-nameString'btSelectItem'radio 或者 checkbox 的字段 name 名。
smartDisplaydata-smart-displayBooleantrue设置为 true 是程序自动判断显示分页信息和 card 视图。
escapedata-escapeBooleanfalse转义HTML字符串，替换 &, <, >, ", \`, 和 ' 字符。
searchdata-searchBooleanfalse是否启用搜索框。
searchOnEnterKeydata-search-on-enter-keyBooleanfalse设置为 true时，按回车触发搜索方法，否则自动触发搜索方法。
strictSearchdata-strict-searchBooleanfalse设置为 true启用全匹配搜索，否则为模糊搜索。
searchTextdata-search-textString''初始化搜索文字。
searchTimeOutdata-search-time-outNumber500设置搜索超时时间。
trimOnSearchdata-trim-on-searchBooleantrue设置为 true 将自动去掉搜索字符的前后空格。
showHeaderdata-show-headerBooleantrue是否显示列头。
showFooterdata-show-footerBooleanfalse是否显示列脚。
showColumnsdata-show-columnsBooleanfalse是否显示内容列下拉框。
showRefreshdata-show-refreshBooleanfalse是否显示刷新按钮。
showToggledata-show-toggleBooleanfalse是否显示切换视图（table/card）按钮。
showPaginationSwitchdata-show-pagination-switchBooleanfalse是否显示切换分页按钮。
showFullscreendata-show-fullscreenBooleanfalse是否显示全屏按钮。
minimumCountColumnsdata-minimum-count-columnsNumber1最小隐藏列的数量。
idFielddata-id-fieldStringundefined指定主键列。
uniqueIddata-unique-idStringundefined对每一行指定唯一标识符。
cardViewdata-card-viewBooleanfalse设置为 true将显示card视图，适用于移动设备。否则为table试图，适用于pc端。
detailViewdata-detail-viewBooleanfalse设置为 true 可以显示详细页面模式。
detailFormatterdata-detail-formatterFunctionfunction(index, row) {
return '';
}		格式化详细页面模式的视图。
searchAligndata-search-alignString'right'指定 搜索框 水平方向的位置。'left' 或 'right'。
buttonsAligndata-buttons-alignString'right'指定 按钮栏 水平方向的位置。'left' 或 'right'。
toolbarAligndata-toolbar-alignString'left'指定 toolbar 水平方向的位置。'left' 或 'right'。
paginationVAligndata-pagination-v-alignString'bottom'指定 分页条 在垂直方向的位置。'top'，'bottom' 或 'both'。
paginationHAligndata-pagination-h-alignString'right'指定 分页条 在水平方向的位置。'left' 或 'right'。
paginationDetailHAligndata-pagination-detail-h-alignString'left'指定 分页详细信息 在水平方向的位置。'left' 或 'right'。
paginationPreTextdata-pagination-pre-textString'<'指定分页条中上一页按钮的图标或文字。
paginationNextTextdata-pagination-next-textString'>'指定分页条中下一页按钮的图标或文字。
clickToSelectdata-click-to-selectBooleanfalse设置 true 将在点击行时，自动选择 rediobox 和 checkbox。
ignoreClickToSelectOndata-ignore-click-to-select-onFunction{ return $.inArray(element.tagName, ['A', 'BUTTON']); }包含一个参数：
element: 点击的元素。
返回 true 是点击事件会被忽略，返回 false 将会自动选中。该选项只有在 clickToSelect 为 true 时才生效。
singleSelectdata-single-selectBooleanfalse设置 true 将禁止多选。
toolbardata-toolbarStringundefined一个jQuery 选择器，指明自定义的 toolbar。例如:
#toolbar, .toolbar.
buttonsToolbardata-buttons-toolbarString | Nodeundefined一个jQuery 选择器，指明自定义的 buttons toolbar。例如:
    #buttons-toolbar, .buttons-toolbar 或 DOM 节点。
checkboxHeaderdata-checkbox-headerBooleantrue设置 false 将在列头隐藏全选复选框。
maintainSelecteddata-maintain-selectedBooleanfalse设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项。
sortabledata-sortableBooleantrue设置为false 将禁止所有列的排序。
silentSortdata-silent-sortBooleantrue设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效。
rowStyledata-row-styleFunctionfunction(row,index) {
return class;
}		自定义行样式 参数为：
row: 行数据
index: 行下标
返回值可以为class或者css
rowAttributesdata-row-attributesFunctionfunction(row,index) {
return attributes;
}		自定义行属性 参数为：
row: 行数据
index: 行下标
返回值可以为class或者css 支持所有自定义属性
customSearchdata-custom-searchFunction$.noop自定义搜索方法来替代内置的搜索功能，它包含一个参数：
        text：搜索文字。
用法示例： 
        function customSearch(text) {
            //Search logic here.
            //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
        }
customSortdata-custom-sortFunction$.noop自定义排序方法来替代内置的搜索功能，它包含一个参数：
sortName: 排序名。
sortOrder: 排序顺序。
用法示例： 
        function customSort(sortName, sortOrder) {
            //Sort logic here.
            //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
        }

列参数

The column options is defined in jQuery.fn.bootstrapTable.columnDefaults.

NameAttributeTypeDefaultDescription
radiodata-radioBooleanfalseTrue to show a radio. The radio column has fixed width.
checkboxdata-checkboxBooleanfalseTrue to show a checkbox. The checkbox column has fixed width.
fielddata-fieldStringundefinedThe column field name.
titledata-titleStringundefinedThe column title text.
titleTooltipdata-title-tooltipStringundefinedThe column title tooltip text. This option also support the title HTML attribute
classclass / data-classStringundefinedThe column class name.
rowspanrowspan / data-rowspanNumberundefinedIndicate how many rows a cell should take up.
colspancolspan / data-colspanNumberundefinedIndicate how many columns a cell should take up.
aligndata-alignStringundefinedIndicate how to align the column data. 'left', 'right', 'center' can be used.
haligndata-halignStringundefinedIndicate how to align the table header. 'left', 'right', 'center' can be used.
faligndata-falignStringundefinedIndicate how to align the table footer. 'left', 'right', 'center' can be used.
valigndata-valignStringundefinedIndicate how to align the cell data. 'top', 'middle', 'bottom' can be used.
widthdata-widthNumber {Pixels or Percentage}undefinedThe width of column. If not defined, the width will auto expand to fit its contents. Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, you can add or no the 'px' to your number and then the bootstrapTable will use the pixels
sortabledata-sortableBooleanfalseTrue to allow the column can be sorted.
orderdata-orderString'asc'The default sort order, can only be 'asc' or 'desc'.
visibledata-visibleBooleantrueFalse to hide the columns item.
cardVisibledata-card-visibleBooleantrueFalse to hide the columns item in card view state.
switchabledata-switchableBooleantrueFalse to disable the switchable of columns item.
clickToSelectdata-click-to-selectBooleantrueTrue to select checkbox or radiobox when the column is clicked.
formatterdata-formatterFunctionundefinedThe context (this) is the column Object. 
The cell formatter function, take three parameters: 
value: the field value. 
row: the row record data.
index: the row index.
footerFormatterdata-footer-formatterFunctionundefinedThe context (this) is the column Object. 
The function, take one parameter: 
data: Array of all the data rows. 
the function should return a string with the text to show in the footer cell.
eventsdata-eventsObjectundefinedThe cell events listener when you use formatter function, take three parameters: 
event: the jQuery event. 
value: the field value. 
row: the row record data.
index: the row index.
sorterdata-sorterFunctionundefinedThe custom field sort function that used to do local sorting, take two parameters: 
a: the first field value.
b: the second field value.
rowA: the first row.
rowB: the second row.
sortNamedata-sort-nameStringundefinedProvide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of "html" such as "<b><span >abc</span></b>", but a fieldName to sort is "content" with the value of "abc".
cellStyledata-cell-styleFunctionundefinedThe cell style formatter function, take three parameters: 
value: the field value.
row: the row record data.
index: the row index.
field: the row field.
Support classes or css.
searchabledata-searchableBooleantrueTrue to search data for this column.
searchFormatterdata-search-formatterBooleantrueTrue to search use formated data.
escapedata-escapeBooleanfalseEscapes a string for insertion into HTML, replacing &, <, >, ", \`, and ' characters.
showSelectTitledata-show-select-titleBooleanfalseTrue to show the title of column with 'radio' or 'singleSelect' 'checkbox' option.

事件

Option 事件jQuery 事件参数描述
onAllall.bs.tablename, args所有的事件都会触发该事件，参数包括：
name：事件名，
args：事件的参数。
onClickRowclick-row.bs.tablerow, $element当用户点击某一行的时候触发，参数包括：
row：点击行的数据，
$element：tr 元素，
field：点击列的 field 名称。
onDblClickRowdbl-click-row.bs.tablerow, $element当用户双击某一行的时候触发，参数包括：
row：点击行的数据，
$element：tr 元素，
field：点击列的 field 名称。
onClickCellclick-cell.bs.tablefield, value, row, $element当用户点击某一列的时候触发，参数包括：
field：点击列的 field 名称，
value：点击列的 value 值，
row：点击列的整行数据，
$element：td 元素。
onDblClickCelldbl-click-cell.bs.tablefield, value, row, $element当用户双击某一列的时候触发，参数包括：
field：点击列的 field 名称，
value：点击列的 value 值，
row：点击列的整行数据，
$element：td 元素。
onSortsort.bs.tablename, order当用户对某列进行排序时触发，参数包括：
name：排序列的 filed 名称，
order：排序顺序。
onCheckcheck.bs.tablerow当用户选择某一行时触发，参数包含：
        row：与点击行对应的记录，
        $element：选择的DOM元素。
onUncheckuncheck.bs.tablerow当用户反选某一行时触发，参数包含：
row：与点击行对应的记录，
        $element：选择的DOM元素。
onCheckAllcheck-all.bs.tablerows当用户全选所有的行时触发，参数包含：
rows：最新选择的所有行的数组。
onUncheckAlluncheck-all.bs.tablerows当用户反选所有的行时触发，参数包含：
rows：最新选择的所有行的数组。
onCheckSomecheck-some.bs.tablerows当用户选择某些行时触发，参数包含：
rows：相对于之前选择的行的数组。
onUncheckSomeuncheck-some.bs.tablerows当用户反选某些行时触发，参数包含：
rows：相对于之前选择的行的数组。
onLoadSuccessload-success.bs.tabledata远程数据加载成功时触发成功。
onLoadErrorload-error.bs.tablestatus远程数据加载失败时触发成功。
onColumnSwitchcolumn-switch.bs.tablefield, checked当切换列的时候触发。
onColumnSearchcolumn-search.bs.tablefield, text当搜索列时触发。
onPageChangepage-change.bs.tablenumber, size当页面更改页码或页面大小时触发。
onSearchsearch.bs.tabletext当搜索表格时触发。
onToggletoggle.bs.tablecardView切换表格视图时触发。
onPreBodypre-body.bs.tabledata在表格 body 渲染之前触发。
onPostBodypost-body.bs.tablenone在表格 body 渲染完成后触发。
onPostHeaderpost-header.bs.tablenone在表格 header 渲染完成后触发。
onExpandRowexpand-row.bs.tableindex, row, $detail当点击详细图标展开详细页面的时候触发。
onCollapseRowcollapse-row.bs.tableindex, row当点击详细图片收起详细页面的时候触发。
onRefreshOptionsrefresh-options.bs.tableoptions刷新选项之后并在销毁和初始化表之前触发。
onRefreshrefresh.bs.tableparams点击刷新按钮后触发。
onScrollBodyscroll-body.bs.table表格 body 滚动时触发。

方法

使用方法的语法：$('#table').bootstrapTable('method', parameter);。

名称参数描述例子
getOptionsnone返回表格的 Options。getOptions
getSelectionsnone返回所选的行，当没有选择任何行的时候返回一个空数组。getSelections
getAllSelectionsnone返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。getAllSelections
getDatauseCurrentPage或者当前加载的数据。假如设置 useCurrentPage 为 true，则返回当前页的数据。getData
getRowByUniqueIdid根据 uniqueId 获取行数据。getRowByUniqueId
loaddata加载数据到表格中，旧数据会被替换。load
showAllColumnsnone显示所有列。showAllColumns
hideAllColumnsnone隐藏所有列。hidAllColumns
appenddata添加数据到表格在现有数据之后。append
prependdata插入数据到表格在现有数据之前。prepend
removeparams从表格中删除数据，包括两个参数： field: 需要删除的行的 field 名称，
values: 需要删除的行的值，类型为数组。		remove
removeAll-删除表格所有数据。removeAll
removeByUniqueIdid根据 uniqueId 删除指定的行。removeByUniqueId
insertRowparams插入新行，参数包括：
index: 要插入的行的 index，
row: 行的数据，Object 对象。		insertRow
updateRowparams更新指定的行，参数包括：
index: 要更新的行的 index，
row: 行的数据，Object 对象。		updateRow
showRowparams显示指定的行，参数包括：
index: 要更新的行的 index 或者 uniqueId，
isIdField: 指定 index 是否为 uniqueid。		showRow-hideRow
hideRowparams显示指定的行，参数包括：
index: 要更新的行的 index，
uniqueId: 或者要更新的行的 uniqueid。		showRow-hideRow
getHiddenRowsshow获取所有隐藏的行，如果show参数为true，行将再次显示，否则，只返回隐藏的行。
mergeCellsoptions将某些单元格合并到一个单元格，选项包含以下属性： 
index: 行索引，
field: 字段名称，
rowspan: 要合并的rowspan数量，
colspan: 要合并的colspan数量。
updateCellparams更新一个单元格，params包含以下属性：
index: 行索引。
field: 字段名称。
value: 新字段值。
refreshparams刷新远程服务器数据，可以设置{silent: true}以静默方式刷新数据，并设置{url: newUrl}更改URL。 要提供特定于此请求的查询参数，请设置{query: {foo: 'bar'}}。
refreshOptionsoptions刷新选项。
resetSearchtext设置搜索文本。
showLoadingnone显示加载状态。
hideLoadingnone隐藏加载状态。
checkAllnone选中当前页面所有行。
uncheckAllnone取消选中当前页面所有行。
checkindex选中某一行，行索引从0开始。
uncheckindex取消选中某一行，行索引从0开始。
checkByparams按值或数组选中某行，参数包含：
field: 用于查找记录的字段的名称，
values: 要检查的行的值数组。
例子: 
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
uncheckByparams按值数组取消选中某行，参数包含：
field: 用于查找记录的字段的名称，
values: 要检查的行的值数组。
例子: 
$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
resetViewparams重置引导表视图，例如重置表高度。
resetWidthnone调整页眉和页脚的大小以适合当前列宽度。
destroynone销毁表。
showColumnfield显示指定的列。
hideColumnfield隐藏指定的列。
getHiddenColumns-获取隐藏的列。
getVisibleColumns-获取可见列。
scrollTovalue滚动到指定位置，单位为 px，设置 'bottom' 表示跳到最后。
getScrollPositionnone获取当前滚动条的位置，单位为 px。
filterByparams（只能用于 client 端）过滤表格数据， 你可以通过过滤{age: 10}来显示 age 等于 10 的数据。
selectPagepage跳到指定的页。
prevPagenone跳到上一页。
nextPagenone跳到下一页。
togglePaginationnone切换分页选项。
toggleViewnone切换 card/table 视图
expandRowindex如果详细视图选项设置为True，可展开索引为 index 的行。
collapseRowindex如果详细视图选项设置为True，可收起索引为 index 的行。.
expandAllRowsnone如果详细视图选项设置为True，可展开所有行。
collapseAllRowsnone如果详细视图选项设置为True，可收起开所有行。

多语言

NameParameterDefault
formatLoadingMessage-'Loading, please wait…'
formatRecordsPerPagepageNumber'%s records per page'
formatShowingRowspageFrom, pageTo, totalRows'Showing %s to %s of %s rows'
formatDetailPaginationtotalRows'Showing %s rows'
formatSearch-'Search'
formatNoMatches-'No matching records found'
formatRefresh-'Refresh'
formatToggle-'Toggle'
formatColumns-'Columns'
formatAllRows-'All'
formatFullscreen-'Fullscreen'

2.自定义某行的样式

bootstrapTable设置行样式(背景颜色)_HOLD ON!的博客-CSDN博客_bootstrap表格背景颜色

3.如何自定义让表格的部分行的CheckBox禁用，部分行CheckBox可以使用

 原文链接：boostrapTable实现列表checkbox部分禁用部分可用_王威振的csdn的博客-CSDN博客

	{
	checkbox: true,
	formatter:function (value,row) {
        //如果已经操作禁止选择。具体可以根据业务
        if(row.applyStatus == '0'){
            //不进行禁用
            return { disabled : false}
        }else{
           //禁用
            return { disabled : true}
        }
}

冰冰-ying
关注
bootstrap-table
11-01
bootstrap-table 表格组件神器：bootstrap table详细使用指南
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
在本话题中，我们聚焦于Bootstrap Table的一个扩展功能——可编辑下拉框，这得益于`bootstrap-table-editable`插件的使用。这个插件允许用户在表格的单元格内直接进行编辑，包括选择下拉框中的值。 `bootstrap-...
bootstrap table
weixin_44738929的博客
11-20 6291
bootstrap table 简单使用 创建mvc项目 添加控制器创建页面 Good luck 原文链接 初始化表格 <table id="tb1"></table> @section Scripts{ <script src="~/Content/dist/bootstrap-table.js"></script> <link href="~/Content/dist/bootstrap-table.css" rel="stylesheet"
t特效与样式（三）——bootstrap.table的用法
最新发布
大梁来了的博客
08-17 1025
前端列表页面生成与开发
bootstraptable
weixin_45701008的博客
12-02 822
一开始打算用bootstrapble的，调通了。后来给了ued的图，bootstraptable实现不了那布局格式，需要自己根据数据动态画，就没用了这个了。 //按照这个顺序就行，否则会导致初始化访问两次 // $(’#inventoryMainTable’).bootstrapTable(‘refresh’); // inittable(); //表格数据查询 // function inittable(){ // $(’#inventoryMainTable’).bootstrapTable({
bootstrap-table-master.rar
06-18
你还可以通过JavaScript API来控制表格的行为，如调用$table.bootstrapTable('load', data)来动态加载数据。 这个压缩包中的"dist"目录包含了各种编译后的文件，适用于直接在生产环境中使用。"src"目录则包含了源...
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
bootstrap-table-fixed-columns-master.zip
05-13
"bootstrap-table-fixed-columns-master.zip"这个压缩包中包含的就是一个用于实现Bootstrap Table固定列效果的JavaScript插件。这个插件允许我们在表格左右两侧设置固定的列，使得关键信息始终显示在用户的视野内，...
bootstrap-table-fixed-columns.js
03-25
<script src="bootstrap-table-fixed-columns_1616673614/bootstrap-table-fixed-columns.js"> ``` 接下来，在表格元素上添加必要的数据属性来启用固定列功能。比如，你可以使用`data-fixed-columns`设置固定列的...
bootstrap-table.js
04-30
支持头部列合并，并且可动态添加头部列，可支持多行title的bootstrap-table插件。 在原来的bootstrap-table中进行了改进，并增加回调函数
bootstrap-table-demo ( bootstraptable )
02-05
工作需要用到bootstrap-table（bootstrap table）。 网上找了例子参差不齐，实在不堪入目。 我只要最简单的例子，网上没有所需要的，只我自已整理一份了。 该demo包含5个可以运行的最基本的例子。 希望能得到像我这样的菜鸟点赞。
bootstrap-table-zh-CN.js
08-27
bootstrap-table-zh-CN.js,有需要就下载吧
Bootstrap table
12-06
Bootstrap Table是基于Bootstrap的轻量级表格插件，只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能
BootstrapTable简单的使用
FeiSir_PC的博客
03-24 7292
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 本篇文章介绍bootstrap-table的简单的使用（查询，新增，修改，删除），在看之前，需要有一点点bootstrap的基础知识，很多bootstrap的相关知识点就不介绍了，只讲bootstrap-table的相关内容。bootstrap-table 的使用非常简单，只需要像引用JQuery一样将js文件以
Bootstrap-Table简单使用
weixin_54242419的博客
07-23 7075
Bootstrap-Table Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件，功能比较完备，能够实现数据异步获取，编辑，排序等一系列功能，最可贵的是，只需要一些简单的配置就可以实现一个功能完备的在线表格。 准备 不同于tabledit，Bootstrap-Table是提供异步获取数据功能的，这里的准备工作暂不用管前台页面结构。因为前台页面结构中的表格，只需要一句代码就解决了： 我们要关心的是，正确的引入Bootstrap Table的相关文件，功能越完备意
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
全局固定bootstrap-table表头的实现方法
资源摘要信息:"Bootstrap-table表头固定（全局）" Bootstrap-table是基于Bootstrap框架的表格插件，它为表格添加了一些额外的功能，如排序、过滤和分页等。表头固定是Bootstrap-table中的一个重要功能，它可以帮助...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰冰-ying

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值