一、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 -->
<link rel="stylesheet" href="bower_components/bootstrap-table/dist/bootstrap-table.css">
...
<!-- bootstrap-table -->
<script src="bower_components/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="bower_components/bootstrap-table/dist/local/bootstrap-table-zh-CN.js"></script>
-
页面编辑：
基于bootstrap-table插件的表格页面代码非常简单，大部分实现都在controller中。当然其实代码在view还是controller中都是习惯而已，因为最终都是编译到一起，这个熟悉MVC框架的你应该理解。
<div class="col-md-10">
<table id="oplog-table"></table>
</div>
第一行表明该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依赖：
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" />
-
页面增加搜索框：
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#searchGroup" href="#searchTree">查询条件</div>
<div id="searchTree" class="panel-collapse collapse in">
<div class="panel-body">
<form id="formSearch" class="form-hrizontal">
<div class="form-group" style="margin-top: 0px">
<div class="row">
<label class="control-label col-sm-1" for="oplogTimeSearchBegin">操作起始时间：</label>
<div class="col-md-3">
<div class="form-group">
<div class="input-group date" id="oplogTimeSearchBegin">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<label class="control-label col-sm-1" for="oplogTimeSearchEnd">操作结束时间：</label>
<div class="col-md-3">
<div class="form-group">
<div class="input-group date" id="oplogTimeSearchEnd">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<label class="control-label col-sm-1" for="selSearchType">操作类型：</label>
<div class="col-sm-3" style="overflow:visible;">
<!--<input type="text" class="form-control" id="txt_search_type">-->
<select id="selSearchType" style="width: 100%;" multiple="multiple">
<option value="0">ADD</option>
<option value="1">DEL</option>
</select>
</div>
<label class="control-label col-sm-1" for="txtSearchUser">用户信息：</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txtSearchUser">
</div>
</div>
<div class="row">
<label class="control-label col-sm-1" for="txtSearchResult">操作结果：</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="txtSearchResult">
</div>
<div class="col-sm-4" style="text-align: right">
<button type="button" id="btnQuery" class="btn btn-primary">查询</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
-
添加搜索相应事件：
# 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控件添加、删除记录：
-
页面增加按钮：
<div id="toolbar" class="btn-group">
<button id="btn_add_natgw" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增NAT网关
</button>
<button id="btn_remove_natgw" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除NAT网关</button>
</button>
</div>
-
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
