bootstrap-table 指南

bootstrap-table官方教程
为了有更好的代入感，所以先看截图

一、初始化

table.html

<table id="table" data-mobile-responsive="false">

table.js

(function() {
  init(); /// 初始化数据
  $('#table').bootstrapTable({
    search: true, /// 搜索
    cache:false, /// 是否缓存
    clickToSelect:true, /// 可点击
    pageSize: 15, /// 每页数量
    pageNumber: 1, /// 初始页
    pagination: true, /// 分页
    showToggle: true, /// 是否显示详细视图和列表视图的切换按钮
    showColumns: true, /// 是否显示所有列
    iconSize: 'outline', /// 自适应图标大小
    toolbar: '#sliderToolbar', /// 绑定自定义bar
    icons: {
      refresh: 'glyphicon-repeat', /// 刷新按钮
      toggle: 'glyphicon-list-alt', /// 切换视图按钮
      columns: 'glyphicon-list' /// 选择列按钮
    },
    columns: [{ /// 所有列
        field: 'id', /// 根据数据对应的字段
        title: '编号', /// 显示的名称
        align: 'center', /// 居中
        sortable: true, /// 展示排序
      }, {
        field: 'name',
        title: '名称',
        align: 'center'
      }, {
        field: 'cover',
        title: '图片',
        align: 'center',
        formatter:function(value,row,index){
          /// 首先判断是否含有http，如果含有，则相应的渲染成图片
          if(value.indexOf("http") != -1){
            return '<img src="' + value + '" height="100px" width="100px"/>';
          } else {
            return '<span>' + value + '</span>';
          }
        }
      }, {
        field: 'price',
        title: '价格',
        align: 'center',
        sortable: true,
      }, {
        field: 'is_rec',
        title: '推荐',
        align: 'center',
        sortable: true,
        formatter:function(value,row,index){
          if(value == 1){
            return '<a class="btn" style="color: green">是</a>';
          }
          if(value == 2){
            return '<a class="btn" style="color: red">否</a>';
          }
        }
      }, {
        field: 'is_new',
        title: '新品',
        align: 'center',
        sortable: true,
        formatter:function(value,row,index){
          if(value == 1){
            return '<a class="btn" style="color: green">是</a>';
          }
          if(value == 2){
            return '<a class="btn" style="color: red">否</a>';
          }
        }
      }, {
        field: 'is_post',
        title: '包邮',
        align: 'center',
        sortable: true,
        formatter:function(value,row,index){
          if(value == 1){
            return '<a class="btn" style="color: green">是</a>';
          }
          if(value == 2){
            return '<a class="btn" style="color: red">否</a>';
          }
        }
      }, {
        field: 'sort',
        title: '权重',
        align: 'center',
        sortable: true,
      }, {
        field: 'sales',
        title: '销量',
        align: 'center',
        sortable: true,
      }, {
        field: 'status',
        title: '状态',
        align: 'center',
        sortable: true,
        formatter:function(value,row,index){
          if(value == 1){
            return '<a class="btn" style="color: green">在售</a>';
          }
          if(value == 2){
            return '<a class="btn" style="color: red">下架</a>';
          }
        }
      }, {
        field: 'operate',
        title: '操作',
        align: 'center',
        formatter:function(value,row,index){
          return '\
          <a href="check_good.html" class="btn btn-xs btn-primary J_menuItem"><i class="fa fa-delete"></i>修改图片</a>\
          <a id="deleteRow" class="btn btn-xs btn-danger"><i class="fa fa-delete"></i> 删除</a>\
          ';
        },
        /// cell内监听事件
        events: {
          'click #deleteRow': function (e, value, row, index) {
            deleteRow(row.id)
          },
      }
    }],
    /// 点击每个cell的响应事件,这里只处理field为name、price、sort的列
    /// field：列名，如id
    /// value：cell值
    /// row：当前行
    /// $element：cell的dom结点
    onClickCell: function(field, value, row, $element) {
      if (field == "name" || field == "price" || field == "sort") {
        $element.attr('contenteditable', true); /// 使其可编辑
        $element.blur(function() {
          let index = $element.parent().data('index'); /// 获取row下标
          let tdValue = $element.html(); /// 获取cell内显示值
          saveData(index, field, tdValue, row); /// 调用方法来更新表格
        })
      }
    }
  });
})();

二、使用请求后接口数据

全局变量

var goodList;

init()

function init(){
  "use strict";
  $('#table').bootstrapTable("showLoading"); /// 显示正在加载
  var datas = JSON.stringify({"cur_page" : 1, "page_size" : page_size}); /// 请求参数
  $.ajax({
    url: baseUrl+"/admin/shop/list",
    method: "post",
    data: datas,
    success: function(rs){
      goodList = rs.data.datas
      $('#table').bootstrapTable('load', goodList); /// 将获取到的数据加载到table
      $('#table').bootstrapTable('refresh'); /// 刷新table
      $('#table').bootstrapTable("hideLoading"); /// 隐藏加载状态
    },
    error:function(d){
      console.log(d)
    }
  })
};

三、行操作

1. 请求完接口，前端过滤删除的row

deleteRow()

function deleteGood(id){
  var datas = JSON.stringify({"id" : id});
  $.ajax({
    url: baseUrl+"/admin/shop/del",
    method: "post",
    data: datas,
    success: function(rs){
      if(rs.code == 0){
        /// 前端过滤删除的row，避免再次请求接口
        var newGoodList = goodList.filter((item, i) => item['id'] != id)
        $('#table').bootstrapTable('load', newGoodList);
        $('#table').bootstrapTable('refresh');
        $('#table').bootstrapTable("hideLoading");
      }
    },
    error:function(d){
      console.log(d)
    }
  })
}

2. 请求完接口，前端手动修改row

saveData()

function saveData(index, field, value, row) {
  "use strict";
  $('#table').bootstrapTable('updateCell', { /// 更新单元格
      index: index, //行索引
      field: field, //列名
      value: value //cell值
  })
  var map = {"id" : row.id};
  if(field == "price" || field == "sort"){
    value = Number(value);
  }
  map[field] = value; /// 不可使用{field: value}，这种定义下键不可为变量
  var datas = JSON.stringify(map); /// 对象转json字符串
  $.ajax({
    url: baseUrl+"/admin/shop/edit",
    method: "post",
    data: datas,
    success: function(rs){
      if(rs.code != 0){
        alert("修改失败!"+rs.data)
      }
    },
    error:function(d){
      console.log(d)
    }
  })
}

四、总结

1. 解决BUG: 开启sort后不显示箭头符号

直接引用即可

.fixed-table-container thead th .sortable {
	background-image: url('img/sort_sort.png');
	background-size: 10px 16px;
	cursor: pointer;
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 20px;
	margin-right: 10px;
}

.fixed-table-container thead th .asc {
	background-image: url('img/sort_asc.png');
	background-size: 10px 16px;
	cursor: pointer;
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 20px;
	margin-right: 10px;
}

.fixed-table-container thead th .desc {
	background-image: url('img/sort_desc.png');
	background-size: 10px 16px;
	cursor: pointer;
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 20px;
	margin-right: 10px;
}

2. 监听每个cell点击事件

onClickCell: function(field, value, row, $element) {
  if (field == "name" || field == "price" || field == "sort") { /// 可编辑的行
    $element.attr('contenteditable', true); /// 使其可编辑
    $element.blur(function() {
      let index = $element.parent().data('index'); /// 获取row下标
      let tdValue = $element.html(); /// 获取cell内显示值
      saveData(index, field, tdValue, row); /// 调用方法来更新表格
    })
  }
}

3. 更新某cell数据

$('#table').bootstrapTable('updateCell', { /// 更新单元格
  index: index, //行索引
  field: field, //列名
  value: value //cell值
})

4. 更新某行数据

$('#table').bootstrapTable('updateRow', { /// 更新单元格
  index: index, //行索引
  row: row
})

5. 自定义列样式

{
  field: 'is_post',
  title: '包邮',
  align: 'center',
  sortable: true,
  formatter:function(value, row, index){
  	if(value == 1){
      return '<a class="btn" style="color: green">是</a>';
    }
    if(value == 2){
      return '<a class="btn" style="color: red">否</a>';
    }
  }
}

6. 重新加载数据

$('#table').bootstrapTable('load', []);
$('#table').bootstrapTable('refresh');

7. 显示或隐藏加载状态

$('#table').bootstrapTable("showLoading");
/// 这里可以去请求数据
$('#table').bootstrapTable("hideLoading");