Bootstrap Table初探

之前曾经粗略的看了一下PHP语言，当时主要关注的是PHP连接MySQL，前端我简单的使用了easyUI的一个应用控件，整体效果还算可以。

但是easyUI的显示和Bootstrap一比，就显得有些简陋了。今天同样囫囵吞枣般的看了一下Bootstrap，发现Bootstrap Table 组件的显示效果非常棒，功能也很齐全，很符合我直接操作数据库的UI需求。

Bootstrap Table的使用也非常的简单。

1. 首先下载该组件：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
2. 引入jQuery、Bootstrap、Bootstrap Table对应的js和css文件
3. 使用方法
   
   1. data属性
      
      1. 最简单的直接堆数据，只需要在table标签中设置 data-toggle="table"
      2. 使用json数据赋值，在上一步的基础上添加 data-url="data1.json" 来加载数据，使用这种方式，需要给th标签设置 data-field="对应key值"
   2. 还可以直接使用JavaScript的方式去设置Table，这种方式适合动态列表，不确定列属性的Table使用。html只需要定义一个table并赋值id
      

      1. <table id="table"></table>
         
         $('#table').bootstrapTable({
             columns: [{
                 field: 'id',
                 title: 'Item ID'
             }, {
                 field: 'name',
                 title: 'Item Name'
             }, {
                 field: 'price',
                 title: 'Item Price'
             }],
             data: [{
                 id: 1,
                 name: 'Item 1',
                 price: '$1'
             }, {
                 id: 2,
                 name: 'Item 2',
                 price: '$2'
             }]
         });

         
          

      2. <table id="table"></table>
         
         $('#table').bootstrapTable({
             url: 'data1.json',
             columns: [{
                 field: 'id',
                 title: 'Item ID'
             }, {
                 field: 'name',
                 title: 'Item Name'
             }, {
                 field: 'price',
                 title: 'Item Price'
             }, ]
         });