• $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootstrapTable('refreshOptions', { data: tabledata }); //刷新表格tabledata 为数据 $("#my_table").bootstra...

    调用 BootStrap Table 方法的语法:

    $('#table').bootstrapTable('method', parameter);

    例如:

    $('#my_table').bootstrapTable('refreshOptions', { data: tabledata });   //刷新表格  tabledata 为数据

    $("#my_table").bootstrapTable('removeAll');  //清空表格数据

     $('#my_table').bootstrapTable('destroy');           //销毁表格数据

    $("#my_table").bootstrapTable('refresh')    //刷新表格

    $("#my_table").bootstrapTable('getSelections'); //获取选中数据 

    调用BootStrap Table事件的方法:

    $('#table').bootstrapTable({onEventName: function (arg1, arg2, ...){  }  })

    $('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) { })

    例如:

    $('#table').on('click-row.bs.table', function (e, arg1, arg2, ...) { 

    })

    一、方  法

    方法名 参数 描述
    getOptions none 获取表格的参数
    getSelections none 获取当前被选中的行
    getAllSelections none 获取当前被选中的行数据,包含搜索和过滤前的
    showAllColumns none 展示所有列
    hideAllColumns none 隐藏所有列
    getData useCurrentPage 获取当前表格中加载的数据,参数useCurrentPage为true 将返回当前页内的数据
    getRowByUniqueId id 根据唯一ID获取行数据
    load data 将新数据加载到表格中
    append data 将新数据追加到表格末尾
    prepend data 将新数据插入到表格头部
    remove params 从表格中移除列名为指定值的数据,包含2个参数
    field: 列名
    values: 列名取值数组
    removeAll - 移除表格中的所有数据
    removeByUniqueId id 根据唯一ID移除行数据
    insertRow params 插入多个新行到指定位置,每一行包含以下参数
    index:要插入到行的索引
    row: 要插入的行数据
    updateRow params 更新指定的行,每一行包含以下参数
    index:要插入到行的索引
    row: 要插入的行数据
    updateByUniqueId params 根据唯一ID更新行数据每一行包含以下参数
    id: 唯一ID
    row: 新的行数据
    showRow params 显示指定行,至少需包含以下任意参数
    index:行索引uniqueId:行唯一ID
    hideRow params 隐藏指定行,至少需包含以下任意参数
    index:行索引
    getHiddenRows boolean 获取所有隐藏的行数据,当参数为 true 会将隐藏行进行显示
    mergeCells options 合并多个单元格,包含以下参数
    index: 行索引
    field: 列名称
    rowspan: 合并多少行
    colspan: 合并多少列
    updateCell params 更新一个单元格数据,包含以下参数
    index: 行索引
    field: 列名称
    value: 新列值
    禁止表格重新初始化需添加参数{reinit: false}
    refresh params 重新加载远程数据,可以设置 {silent: true}静默加载数据,同时设置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改变数据请求地址和分页参数,请求参数通过 {query: {foo: 'bar'}} 修改
    refreshOptions options 刷新表格的参数
    resetSearch text 设置搜索内容
    showLoading none 显示数据加载状态提示
    hideLoading none 隐藏数据加载状态提示
    checkAll none 选中当前页的所有行
    uncheckAll none 取消选中当前页的所有行
    checkInvert none 对当前页内行数据进行反选,会触发onCheckSome 和 onUncheckSome 事件
    check index 选中某一行,索引从0开始
    uncheck index 取消选中某一行,索引从0开始
    checkBy params 根据列名选则行数据
    field: 列名称
    values:列取值数组
    $("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
    uncheckBy params 根据列名取消选中行数据
    field: 列名称
    values:列取值数组
    $("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]})
    resetView params 重置表格视图
    resetWidth none 重新设置列头和列尾的宽度去适应当前列的宽度
    destroy none 销毁表格
    showColumn field 显示指定列
    hideColumn field 隐藏指定列
    getHiddenColumns - 获取隐藏的列
    getVisibleColumns - 获取可见的列
    scrollTo value 使滚动条滚动到指定位置,单位像素,'bottom' 滚动条滚动到底
    getScrollPosition none 获取当前滚动条的位置,单位像素
    filterBy params 在client模式下,对表格数据进行过滤,语法示例如下
    {age: 10, hairColor: ["blue", "red", "green"]}
    selectPage page 跳转到指定页
    prevPage none 上一页
    nextPage none 下一页
    togglePagination none 切换分页参数
    toggleView none 切换 card/table 视图
    expandRow index 当详细视图设置为True时,展开指定索引的行的详细视图
    collapseRow index 当详细视图设置为True时,收起指定索引的行的详细视图
    expandAllRows is subtable 当详细视图设置为True时,展开所有行的详细视图
    collapseAllRows is subtable 当详细视图设置为True时,收起所有行的详细视图
    updateCellById params 根据唯一ID更新指定单元格,包含以下参数
    id: 唯一ID
    field: 要更新的列的列名称
    value: 新值

    二、事    件

    事件名称 JQuery事件 参数

    描述

    onAll all.bs.table name, args 任何事件触发都会同时触发该事件, 包含2个参数
    name: 事件名称
    args: 事件参数
    onClickRow click-row.bs.table row, $element, field 当点击某一行时触发,包含3个参数 
    row: 点击行的数据
    $element: 对应的<tr>元素
    field:所点击的单元格对应的列名称
    onDblClickRow dbl-click-row.bs.table row, $element, field 当双击击某一行时触发,包含3个参数 
    row: 点击行的数据
    $element: 对应的<tr>元素
    field:所点击的单元格对应的列名称
    onClickCell click-cell.bs.table field, value, row, $element 当点击某一个单元格时触发,包含4个参数
    field: 所点击的单元格对应的列名称 
    value: 所点击的单元格对应列的值
    row:单元格所在行数据
    $element: 对应的<td>元素
    onDblClickCell dbl-click-cell.bs.table field, value, row, $element 当双击某一个单元格时触发,包含4个参数
    field: 所点击的单元格对应的列名称 
    value: 所点击的单元格对应列的值
    row:单元格所在行数据
    $element: 对应的<td>元素
    onSort sort.bs.table name, order 当用户点击列头对某一列进行排序时触发,包含2个参数
    name: 排序的列名称
    order: 排序方式
    onCheck check.bs.table row, $element 当用户选中一行时触发,包含2个参数
    row: 所选中行的行数据
    $element: 选中的<input>元素
    onUncheck uncheck.bs.table row, $element 当用户取消选中一行时触发,包含2个参数
    row: 所取消选中的行数据
    $element: 选中的<input>元素
    onCheckAll check-all.bs.table rows 当用户点击全选框时触发,包含1个参数 
    rows: 选中的行数据数组
    onUncheckAll uncheck-all.bs.table rows 当用户点击全选框取消选择时触发,包含1个参数 
    rows: 取消选中的行数据数组
    onCheckSome check-some.bs.table rows 当用户选中某些行时触发,包含1个参数 
    rows: 选中的行数据数组
    onUncheckSome uncheck-some.bs.table rows 当用户取消选中某些行时触发,包含1个参数 
    rows: 取消选中的行数据数组
    onLoadSuccess load-success.bs.table data 当远程数据被加载完成后触发
    onLoadError load-error.bs.table status, res 当远程数据被加载出错后触发
    onColumnSwitch column-switch.bs.table field, checked 当切换列的显示状态(可见或不可见)时触发
    onColumnSearch column-search.bs.table field, text 对列内容进行搜索时触发
    onPageChange page-change.bs.table number, size 当切换每页条数时触发
    onSearch search.bs.table text 当对表格内容进行搜索时触发
    onToggle toggle.bs.table cardView 当切换表格的显示视图时触发
    onPreBody pre-body.bs.table data 在对表格体进行渲染前触发
    onPostBody post-body.bs.table data 在表格体渲染完成,并在 DOM 中可见后触发
    onPostHeader post-header.bs.table none 在表格列头渲染完成,并在 DOM 中可见后触发
    onExpandRow expand-row.bs.table index, row, $detail 当点击详情按钮展开详情视图时触发
    onCollapseRow collapse-row.bs.table index, row 当点击关闭详情按钮收起详情视图时触发
    onRefreshOptions refresh-options.bs.table options 当刷新表格选项时,在销毁当前表格并重新初始化新表格之前触发
    onResetView reset-view.bs.table   当重置表格视图时触发
    onRefresh refresh.bs.table params 当点击刷新按钮对表格进行刷新时触发
    onScrollBody scroll-body.bs.table   当对表格体进行滚动时触发

     三、配    

      前往: 基于bootstrap table配置的二次封装

     

    参考api:https://bootstrap-table.com/docs/api/table-options/#height

    转载于:https://www.cnblogs.com/-hao/p/10579576.html

    展开全文
  • bootstrap-table表格事件 2017-03-13 21:21:23
    使用bootstrap-table插件时,会用到表格的点击事件,事件如下: BootstrapTable.DEFAULTS = { classes: ‘table table-hover’, locale: undefined, height: undefined, undefinedText: ‘-‘, s
  • bootstrap table使用总结 2017-02-24 13:52:06
    使用bootstrap table可以很方便的开发后台表格,对数据进行异步更新,编辑。下面就来介绍一下bootstrap table的详细使用方法: 因为之前在官网也找了很久的教程,源码感觉隐藏的比较隐秘,其他扩展功能也很难找到,...
  • *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能多资料翻译,如果发现译的内容比英文多,是添加了...
  • 表格参数: 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格。
  • 要做一个月考勤统计,致使表头及数据会根据搜索月份发生变化,网上找了很多办法 比如博主:阿布布_0410 或者博主:Answerlzd 还有很多复制粘贴的帖子均...2.调用bootstrap 3.没了… function getTableColumn() { ...
  • bootstrap Table API 中文版 2018-07-10 16:50:23
    原url:https://blog.csdn.net/s_clifftop/article/details/77937356?skintest=skin3-template-test“名称”可以写在$('#table').bootstrapTable({});的大括号中,可以定义一些想要的值,如...).bootstrapTable({ ...
  • 一、问题描述:bootstrap table中每行有一个input框,要对每个input进行检查数值是否在1~10之间(可保留小数点后一位)的数值,每次bind事件之前没有解绑事件,造成点击alert事件次数逐次递增,最后死循环 ...
  • 事件的调用方法: ...$('#table').bootstrapTable({ data: "", uniqueId: "id", locale: "zh-CN", columns: [], ....... }); 事件名称 JQuery事件 参数 描述 onAll all.bs.table ...
  • BootstrapTable中文文档 2019-07-18 17:42:07
    表格参数: 名称 标签 类型 默认 描述 - data-toggle String ‘table’ ... ‘table table-hover’ 表格的类名称。默认情况下,表格是有边框的,你可以添加 ‘table-no-b...
  • 目前在做一个项目要求列要可排序,可筛选,可编辑,并且支持显示和隐藏,排序、编辑、筛选都比较好做,唯一的一个显示和隐藏正常情况下我们只需加上 showColumns: true, //显示下拉框勾选要显示的列即可 ...
  • bootstrap -table单元格,删除,修改事件 ...$(selectors.table).bootstrapTable('destroy'); $(selectors.table).bootstrapTable({ data: data, striped: false, pagination: true, cac...
  • 使用bootstrap table可以很方便的开发后台表格,对数据进行异步更新,编辑。下面就来介绍一下bootstrap table的详细使用方法: 因为之前在官网也找了很久的教程,源码感觉隐藏的比较隐秘,其他扩展功能也很难找到...
  • 表格的参数定义在 jQuery.fn.bootstrapTable.defaults。 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格。 classes data-classes ...
  • *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能多资料翻译,如果发现译的内容比英文多,是添加了...
  • 一 背景 在工作中利用Bootstrap Table 做数据列表时...1)利用Bootstrap Table 提供的API监听选中与取消选中 定义全局数组接收选中的行信息 var select_rows = new Array(); // 选中行时触发 $('#certifica...
  • bootstrap-table.js里面列属性 formatter就是用来格式化单元格的,其默认值是undefined 类型是function,function(value, row, index), value:该cell本来的值,row:该行数据,index:该行序号(从0开始);table...
  • 直接在列表页面进行编辑,编辑完成批量保存 ...table id="exampleTable" data-mobile-responsive="true"></table> <button type="button" id="butSave" class="btn btn-primary col-sm-1 col-sm-o...
1 2 3 4 5 ... 20
收藏数 3,946
精华内容 1,578