Day22 又回到最初的起点 呆呆地看着萤幕前

• Bootstrap table

就在我们寻寻觅觅如何让表格的功能更完整的时候，我们看到了一道光，这是道毁灭白光，它就是Bootstrap table，它不是仅是风格的设定，还包含表格的各种功能，例如：搜寻、排序、和过滤等，另外还包含表投置顶、分页、显示或隐藏栏列、增加或删除栏列、下载等，这是它的范例，而且也提供code和线上编辑，非常方便。

首先我们来看基本的使用，我们在HTML上有个table的tag然後id是dataTable：

  var $table = $('#dataTable')
  $table.bootstrapTable({
    columns: columns,
    data: data,
    search: true,
    stickyHeader: true,
    theadClasses: "thead-dark",
    showFullscreen: true,

其中资料的部分是columns和data，我这边是用倒叙法，下面的范例要写在上面的范例前。其中特别的是columns中要定义field和title，title是实际显示在表格上的名称，field可以视为本名，要对应到data中的资料：

  var data = [
    {
      'id': 0,
      'name': 'Item 0',
      'price': '$0'
    },
    {
      'id': 1,
      'name': 'Item 1',
      'price': '$1'
    },
    {
      'id': 2,
      'name': 'Item 2',
      'price': '$2'
    }
  ]
  var columns = [
    {
      field: "id",
      title: "Test1", 
    },
    {
      field: "name",
      title: "Test2", 
    },
    {
      field: "price",
      title: "Test3", 
    },
  ]

除了columns和data外，其他可设定很多option，例如thead的class，以及我这边试了三种功能，search、stickyHeader、showFullscreen，其中stickyHeader没反应，showFullscreen还蛮酷的，按下去会全画面，但它的按钮图示不正确，而search大家就老朋友了：

按下full screen後：

接下来我们又可以把流程重新再来一遍，秉持着Agile的精神，而这一次我们可以更快速的通过。