angularjs+bootstrap表格组件的使用

一、table控件基本使用方法：

• 安装bootstrap-table插件：

>bower install bootstrap-table --save
bower bootstrap-table#*         cached https://github.com/wenzhixin/bootstrap-table.git#1.11.1
bower bootstrap-table#*       validate 1.11.1 against https://github.com/wenzhixin/bootstrap-table.git#*

• 添加相关依赖：

...
    
    
...
    
    
    

• 页面编辑：

  基于bootstrap-table插件的表格页面代码非常简单，大部分实现都在controller中。当然其实代码在view还是controller中都是习惯而已，因为最终都是编译到一起，这个熟悉MVC框架的你应该理解。

第一行表明该div使用了bootstrap的栅栏布局；第二行申明了一个table组件。

• controller开发：

angular.module('webApp')
  .controller('OplogCtrl', function () {
    var table = new TableInit();
    table.Init();
  });

TableInit方法就是用来实现表格组件的初始化，下面附上相关代码和相关注释：

var TableInit = function() {
  var tableInit = new Object();
  tableInit.Init = function () {
    $('#oplog-table').bootstrapTable({
      url: 'data/oplog.json', //请求后台url(*)
      method: 'get', //请求后台方法(*)
      // toolbar: '#toolbar' // 工具按钮所在的容器
      striped: true, // 是否使用行间隔色
      cache: false, // 是否使用缓存，默认值为true(*)
      pagination: true, // 是否显示分页(*)
      sortable: true, // 是否启用排序
      sortOrder: "asc", // 排序方式
      queryParams: tableInit.queryParams, // ??传递参数(*)
      sidePagination: "server", // 分页方式：client表示客户端分页(*)
      pageNumber: 1, // 初始化加载第一页
      pageSize: 10, // 每页的记录行数(*)
      pageList: [10, 25, 50, 100], // 可供选择的每页行数(*)
      search: true, // 是否显示表格搜索
      strictSearch: true, // ??
      showColumns: true, // 是否显示所有列
      showRefresh: true, // 是否显示刷新按钮
      minimumCountColumns: 2, // 最少允许的列数
      clickToSelect: true, // 是否启用点击选中行
      height: 500, // 行高
      uniqueId: "ID", // 每一行的唯一标识
      showToggle: true, // 是否显示详细视图和列表视图切换按钮
      cardView: false, // 是否显示详细视图
      detailView: false, // 是否显示父子表
      columns: [{
        checkbox: true
      }, {
        field: 'time',
        title: '操作时间'
      }, {
        field: 'op_type',
        title: '操作类型'
      }, {
        field: 'op_params',
        title: '操作参数'
      }, {
        field: 'user',
        title: '用户信息'
      }, {
        field: 'enable_time',
        title: '生效时间'
      }, {
        field: 'result',
        title: '操作结果'
      }]
    });
  };

  tableInit.queryParams = function (params) {
    var temp = {
      limit: params.limit,
      offset: params.offset,
      departmentname: "",
      statu: ""
    };
    return temp;
  };

  return tableInit;
};

测试验证时，请求后台的url可以指向自定义的json结构，如上述代码中的data/oplog.json，指向的是data目录下的oplog.json的json数据：

{
  "total": 3,
  "rows": [{
    "time": "2017-03-08 10:41:20",
    "op_type": 0,
    "op_params": "{}",
    "user": 0,
    "enable_time": "",
    "result": 0
  }, {
    "time": "2017-03-08 10:41:20",
    "op_type": 0,
    "op_params": "{}",
    "user": 0,
    "enable_time": "",
    "result": 0
  }, {
    "time": "2017-03-08 10:41:20",
    "op_type": 0,
    "op_params": "{}",
    "user": 0,
    "enable_time": "",
    "result": 0
  }]
}

• 呈现效果：

table_page.png

二、table控件添加搜索功能：

• 安装时间控件：

  由于这里搜索需要支持时间段搜索和复选下拉框，所以先安装datetimepicker控件和：

bower install eonasdan-bootstrap-datetimepicker#latest --save
bower install bootstrap-multiselect#latest --save

• 添加css、js依赖：

• 页面增加搜索框：

      

        
查询条件
        

          

            

              

                

                  操作起始时间：
                  

                    

                      

                        
                        
                          
                        
                      
                    
                  
                  操作结束时间：
                  

                    

                      

                        
                        
                          
                        
                      
                    
                  
                
                

                  操作类型：
                  

                    
                    
                      ADD
                      DEL
                    
                  
                  用户信息：
                  

                    
                  
                
                

                  操作结果：
                  

                    
                  
                  

                    查询
                  
                
              
            
          
        
      
    

• 添加搜索相应事件：

# controller主函数中
    var btnInit = new OplogButtonInit();
    btnInit.Init();
# 方法定义
var OplogButtonInit = function () {
  var btnInit = new Object();
  btnInit.Init = function () {
    $('#btnOplogQuery').click(function () {
      $(this).button('loading').delay(100).queue(function () {
        btnInit.refreshTable();
        $(this).button('reset');
        $(this).dequeue();
      });
    });
  };
  btnInit.refreshTable = function () {
    var table = new OplogTableInit();
    $('#oplogTable').bootstrapTable('refresh', {
      url: 'data/oplog_new.json',
      query: table.queryParams
    });
  };
  return btnInit;
};

上述代码中refreshTable是核心代码，实现表格刷新，传递的参数为table.queryParams。btnInit.Init实现了查询按钮的点击响应。

• 呈现效果：

table_search_page.png

三、table控件添加、删除记录：

• 页面增加按钮：

    

      
        新增NAT网关
      
      
        删除NAT网关
      
    

• table控件配置toolbar：

      toolbar: '#toolbar',

• 设置按钮响应：

var NatgwButtonInit = function () {
  var btnInit = new Object();
  btnInit.Init = function () {
    $('#btn_remove_natgw').click(function () {
      var selectRows = $('#natgwTable').bootstrapTable('getSelections');
      console.log('selected rows are:', selectRows);
      $(this).button('loading').delay(10000).queue(function () {
        $('#natgwTable').bootstrapTable('removeAll');
        $(this).button('reset');
        $(this).dequeue();
      });
    });
  };
  return btnInit;
};

四、遗留问题：

• 下拉框点击后不能显示下拉选项：
  如上图操作类型标签页后的下拉框所示，单击后不能显示选项，网上有说是因为在panel组件下，所以需要设置panel的style='overflow: visible;'但是设置后还是没有用，而且发现表格选择一页多少航的下拉框也有同样的问题。

在提交代码时发现如下差异，加上这两个被莫名其妙删除的引用后，下拉框就能出现了....这个问题浪费了有接近一天时间...( ˇˍˇ )

code_diff.png

参考资料：

• JS组件系列——表格组件神器：bootstrap table
• JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐
• JS组件系列——两种bootstrap multiselect组件大比拼