实例化

在使用JS实例化表格之前，首先我们的HTML中必须存在一个table表格，在后台管理列表中常见的表格如：

  1. <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
  2.        data-operate-edit="{:$auth->check('test/edit')}" 
  3.        data-operate-del="{:$auth->check('test/del')}" 
  4.        width="100%">
  5. </table>

初始化

在FastAdmin中可以使用Table.api.init进行表格的初始化配置操作，比如表格参数，列参数，语言包等等。

  1. // 初始化表格参数配置
  2. Table.api.init({
  3.     extend: {
  4.         index_url: 'test/index' + location.search,
  5.         add_url: 'test/add',
  6.         edit_url: 'test/edit',
  7.         del_url: 'test/del',
  8.         multi_url: 'test/multi',
  9.         table: 'test',
  10.     }
  11. });

以上初始化的方法是我们在JS代码中最常看见的，我们还可以使用

  1. Table.api.init({
  2.     pageSize: 20, //调整分页大小为20
  3.     pageList: [10, 25, 50, 100, 'All'], //增加一个100的分页大小
  4. });

等方式来修改表格的默认参数和默认列参数信息，具体可修改的参数请参考表格参数章节和列参数章节

参数中的extend这个参数值是非常重要的一个信息点，此参数用于配置我们加载数据列表的URL、添加文档的URL、编辑文档的URL和删除文档URL等

实例化

通过以上的初始化以后即可使用以下代码进行表格实例化操作了

  1. var table = $("#table");
  3. // 初始化表格
  4. table.bootstrapTable({
  5.     url: $.fn.bootstrapTable.defaults.extend.index_url,
  6.     pk: 'id',
  7.     sortName: 'weigh',
  8.     columns: [
  9.         [
  10.             {checkbox: true},
  11.             {field: 'id', title: __('Id')},
  12.             {field: 'category_id', title: __('Category_id')},
  13.             {field: 'title', title: __('Title')},
  14.             {field: 'image', title: __('Image'), events: Table.api.events.image, formatter: Table.api.formatter.image},
  15.             {field: 'images', title: __('Images'), events: Table.api.events.image, formatter: Table.api.formatter.images},
  16.             {field: 'refreshtime', title: __('Refreshtime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
  17.             {field: 'weigh', title: __('Weigh')},
  18.             {field: 'switch', title: __('Switch'), searchList: {"1":__('Yes'),"0":__('No')}, formatter: Table.api.formatter.toggle},
  19.             {field: 'status', title: __('Status'), searchList: {"normal":__('Normal'),"hidden":__('Hidden')}, formatter: Table.api.formatter.status},
  20.             {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
  21.         ]
  22.     ]
  23. });
  25. // 为表格绑定事件
  26. Table.api.bindevent(table);

如果你的表格只是需要单纯的将普通表格转化为Bootstrap-table，可以直接使用

  1. $('#table').bootstrapTable({
  2.     url: 'data1.json',
  3.     columns: [{
  4.         field: 'id',
  5.         title: 'Item ID'
  6.     }, {
  7.         field: 'name',
  8.         title: 'Item Name'
  9.     }, {
  10.         field: 'price',
  11.         title: 'Item Price'
  12.     }, ]
  13. });

的方式来渲染，无需进行Table.api.init和Table.api.bindevent操作，Table.api.bindevent只是扩展了工具栏、按钮组和事件绑定等信息。