Bootstrap表格插件Bootstrap Table配置教程

bootstrap table clickToSelect、ignoreClickToSelectOn、singleSelect、checkboxHeader详细说明

bootstrap table单选多选等选择行相关设置

clickToSelect点击行选中

通常配合字段列的checkbox属性使用,完整代码如下

var columns = [{ 
            checkbox:true  //1,设置该列为复选框选择列************** itxst.com *****************
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
     }];

//需要显示的数据
var data = [{
            Id: 1,
            ProductName: '香蕉',
            StockNum: '100'
        }, {
            Id: 2,
            ProductName: '苹果',
            StockNum: '200'
     }];
//bootstrap table初始化
 $('#table').bootstrapTable({
      clickToSelect:true, //2,设置点击选中当前行************** itxst.com *****************
       columns: columns,
       data: data
  });

在线试一试

ignoreClickToSelectOn忽略点击选中行的元素

设置clickToSelect为true后用户点击当前行的任何一个元素都会选中该行,但是通常这行会有其他的操作按钮,如果删除、查看详情、审核按钮,点击这类按钮不应该选中该行,而是响应其他的事件。

//bootstrap table初始化数据
$('#table').bootstrapTable({
     clickToSelect:true,
    ignoreClickToSelectOn: ignoreClickToSelectOn, //对a和button标签忽略clickToSelect事件
      columns: columns,
      data: data
   });
//对a和button标签忽略clickToSelect事件     
 function ignoreClickToSelectOn(e) {
  return ['A', 'BUTTON'].indexOf(e.tagName) > -1;
}

在线试一试

singleSelect设置单选

var columns = [
        {
            field: 'Id',
            title: '编号',
            checkbox:true  //1,设置选择列
        }, 
        {
            field: 'ProductName',
            title: '产品名称'
        }, 
        {
            field: 'StockNum',
            title: 'Item 库存'
        }
  ];
        
 $('#table').bootstrapTable({
      clickToSelect:true,//2,设置点击选中当前行
      singleSelect:true,//3,设置单选
      columns: columns,
      data: data
  });

在线试一试

checkboxHeader设置表格头部全选反选

singleSelect为true时该属性无效,checkboxHeader设置为false不出现全选复选框。

maintainSelected点击下一页时保持选中状态

设置maintainSelected为true可以保持选中状态,用户点击下一页再返回时还可以保持选中状态,非常有用的功能。不管是客户端分页还是服务器端分页都支持该属性。

multipleSelectRow多选设置

设置multipleSelectRow为true字面意思就可以理解到是多选相关设置,按ctrl+click可以多选多个行, shift+click可以选中一个范围内的行,可理解成和windows的文件夹选中文件的快捷键是一样的

文章目录
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式