BootStrap----table

已于 2023-03-22 11:01:01 修改
阅读量1.3k 收藏 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
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
bootstrap-table动态加载json数据并且支持分页
03-16
bootstrap-table动态加载json数据并且支持分页。摘要必须大于50个字节！
Bootstrap系列之表格（Tables）
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
Bootstrap Table数据表格的使用指南，作为一个Java程序员
m0_60388117的博客
03-22 398
其实关于Kafka，能问的问题实在是太多了，扒了几天，最终筛选出44问：基础篇17问、进阶篇15问、高级篇12问，个个直戳痛点，不知道如果你不着急看答案，又能答出几个呢？若是对Kafka的知识还回忆不起来，不妨先看我手绘的知识总结脑图（xmind不能上传，文章里用的是图片版）进行整体架构的梳理梳理了知识，刷完了面试，如若你还想进一步的深入学习解读kafka以及源码，那么接下来的这份《手写“kafka”》将会是个不错的选择。Kafka入门为什么选择KafkaKafka的安装、管理和配置。
bootstrap中table的使用
weixin_43487532的博客
07-24 3124
bootstrap、java实现数据表单展示
bootstraptable 手册_bootstrap table表格使用方法详解
weixin_42395740的博客
02-15 8064
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下1.进入页面，根据指定的URL加载数据(json格式)2.加载成功，根据$table.bootstrapTable({options})显示表格样式。感觉还是挺漂亮的哈，OK，下面贴代码解释功能。开始之前，当然要引用js啦html代码，一是指定table要使用的工具栏，而是写一个空的table新增修改删除js...
BootstrapTable简单的使用
FeiSir_PC的博客
03-24 4563
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 本篇文章介绍bootstrap-table的简单的使用（查询，新增，修改，删除），在看之前，需要有一点点bootstrap的基础知识，很多bootstrap的相关知识点就不介绍了，只讲bootstrap-table的相关内容。bootstrap-table 的使用非常简单，只需要像引用JQuery一样将js文件以
Bootstrap-table 使用总结
热门推荐
菜鸟逆袭之路
06-29 5万+
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动
算是最全面的bootstrap-table的介绍了吧
cykj202103的博客
07-10 4484
属性默认值描述heightundefined表格的高度classes表格的类名称buttons{}按钮,bootstraptable加载的按钮集,可自定义表头样式'''-'当数据为 undefined 时显示的字符localeundefined语言设置false是否开启虚拟滚动undefined虚拟滚动条项目高度sortabletrue是否启用排序sortClassundefined被排序的td标签的class名silentSorttrue。
bootstrap-table 指南
鲸落
08-24 1521
文章目录一、初始化二、使用请求后接口数据三、行操作1. 请求完接口，前端过滤删除的row2. 请求完接口，前端手动修改row四、总结1. 解决BUG: 开启sort后不显示箭头符号2. 监听每个cell点击事件3. 更新某cell数据4. 更新某行数据5. 自定义列样式6. 重新加载数据7. 显示或隐藏加载状态 为了有更好的代入感，所以先看截图 一、初始化 table.html <table id="table" data-mobile-responsive="false"> ta
【Bootstrap系列】详解Bootstrap-table
weixin_30606669的博客
09-10 3480
本篇文章将与大家分享bootstrap-table插件，借助于它实现基本的增删改查，导入导出，分页，父子表等。 至于其他技术，如冻结表头，列排列，行拖动，列拖动等，会在后续文章中与大家分享。 一 效果图 （一）页面初始化 下图是页面首次加载结束后的效果，主要完成以下功能： 1.日期部分，开始时间：当前月第一天对应的8位日期，结束时间：当前月最后一天对应的8位日期，时间格式为：yyy...
BootstrapTable (前后端分页，表格 ajax 返回数据回调处理) 配置参数全说明
禅与计算机程序设计艺术
12-29 1万+
【代码】BootstrapTable (前后端分页，表格 ajax 返回数据回调处理) 配置参数全说明。
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
bootstrap-table-master.rar
06-18
bootstrap框架是世界最好的前端框架之一，关于table格式数据操作需要的依赖Js文件以及其他需要的文件，下载此文件后可以直接将min文件引入到项目中进行使用。
bootstrap-table.min.js
09-13
columns的formatter方法中可使用this.options获取全局配置信息，主要用户分页序号的设置功能。
BOOTSTRAP-TABLE源码
01-05
BOOTSTRAP-TABLE源码，官方最新版本，喜欢的朋友可以去下载使用
bootstrap-table后端分页功能完整实例
10-15
主要介绍了bootstrap-table后端分页功能,结合完整实例形式分析了bootstrap-table后端请求、数据分页功能具体步骤与实现技巧,需要的朋友可以参考下
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 417
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 600
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 627
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
bootstrap-table-export
07-13
bootstrap-table-export是一个基于Bootstrap框架的表格插件，用于导出表格数据为不同格式的文件。 通过使用bootstrap-table-export插件，我们可以方便地将表格数据导出为Excel、CSV、JSON等格式的文件，以便于后续...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

冰冰-ying

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

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

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

打赏作者

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

抵扣说明：

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

余额充值