Christian-Yang
commented
7 years ago Open Christian-Yang opened 7 years ago
Christian-Yang
commented
7 years ago Christian-Yang
commented
7 years ago 通过javascript方式使用bootStrap table，过程如下
```<table id="table"></table>```[2];在组件的ts文件上写上如下：
$('#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'
}]
});从上面可以看到，通过使用bootstrapTable这个函数，添加表格选项，比如：columns等等，这个对应于Excel中的Table options表格选项页面。
所有关于表格的设置都在这个页面：http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options
可以使用$.extend()方法来扩张。可以看这个文档：http://www.poluoluo.com/jzxy/201509/424718.html
在使用table option设置表格的时候，可以这样写，写一个tableOption={},然后把设置项，一个一个的添加进去。
例如：
tableOption={
pagination: true, //是否显示分页,设置为 true 会在表格底部显示分页条（*）
url: '/Export/GetDepartment', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器,一个jQuery 选择器，指明自定义的toolbar 例如:#toolbar, .toolbar或者是一个Dom节点，比如我们想让一个按钮附加到表格上，让这个按钮和搜索框一行，那么就给这个按钮用一个div包起来，同时给这个div指定一个toolbar的id，或者一个toolbar的类，这样设置到toolbar上，就可以让他们在同一行上了。
escape:true //转义HTML字符串，替换 &, <, >, ", `, 和 ' 字符。过滤危险字符
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageSize: 10, //每页的记录行数（*）。如果设置了分页，页面数据条数
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）。就是可以设置一个页面上显示多少条数据，比如一个页面上显示10条，25条，50条，100条。
search:true, //是否启用搜索框
strictSearch:true, //设置为 true启用 全匹配搜索，否则为模糊搜索
searchText:'', //初始化搜索文字
paginationDetailHAlign:
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
clickToSelect:true,
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
}
可以在bootstrap-table，官方文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 页面的最下面找到，关于国际化的所有信息。
bootstrap table 国际化：
We can import all locale files what you need: 你可以导入所有你需要的国际化文件，这些文件都是js文件，它们在node_modules包中的/dist/locale目录下。 所有的国际化的js文件，都在这个链接上可以找到：https://github.com/wenzhixin/bootstrap-table/tree/master/src/locale
<script src="bootstrap-table-en-US.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>And then use JavaScript to switch locale: 然后使用javascript就可以实现国际化，我们可以把这段代码，添加到组件的构造函数，或者ngOnInit()函数
if(英文) {
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US']);
}
else if (中文){
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
}参考资料：http://www.cnblogs.com/yinglunstory/p/6092834.html
bootstrap table官方中的列选项：formatter和events bootstrap table：http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options
bootstrap table可以实现自定义单元格显示内容和这个单元格中的事件处理。例如，想实现如下效果：
那么就需要自定义单元格中的显示内容，因为单元格就是列，所以我们要去bootstrap-table中的列选项中去查看相应的定义和实现。
bootsrtap table的列选项中有一个：formatter。这个选项就可以自定义单元格。
例如：
[1] 在列定义中，以下面的方式定义要自定显示内容的单元格
{
field: 'operate',
title: 'Item Operate',
align: 'center',
//定义点击事件，当这个单元格中的内容被点击的时候触发事件
events: operateEvents,
//定义单元格中的显示内容
formatter: operateFormatter
}
[2]定义要自定义显示的内容，这个函数需要返回一个字符串。有两种定义方式
定义方式一： (value, row, index) => { return 'string' }
定义方式二：
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="glyphicon glyphicon-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
[3]定义上面的自定义的显示内容中点击时候调用的函数。注意上面的两个类，其中一个
```<a class="like">```是``` class="like" ```
另外一个是``` <a class="remove"> ``` 这两个类将来是用来触发事件使用的
//这里需要在组件的类中定义window:window=window这样的一个window对象。
window.operateEvents = {
//当class=".like"被点击时候调用的函数
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row));
},
//当class=".remove“被点击时候调用的函数
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
};
如果想要给一个bootstrap table 添加一个搜索框，那么需要在表格选项中进行设置。 也就是在Table options中有一个选项叫做：search 。这个选项就是用来开启bootstrap table的搜索框的功能。默认这个东西是false的，所以需要在表格中设置为true。
$('.bootstrap-table .search input')这样就能选中这个搜索用的input框，如果要给这个input框设置
placeholder也就是这个搜索框的提示信息，那么只需要这么写$('.bootstrap-table .search input').attr('placeholder','请您搜索！')。这个时候这个搜索框中就会有“请您搜索！”这提示信息，当然这里也可以设置变量。另外如果想让这个input搜索框中能有一个放大镜这样的搜索图标 ,那么需要设置一个span标签通过这个span标签来设置，如下：
$('.bootstrap-table .search input').attr('placeholder','请您搜索！').parent().append('<span></span>')
这样这个span标签就和input是同级的，都在<div class="search">这个div下面
然后给这个span设置一个背景图,通过css样式：
.bootstrap-table .search input + span {
background:图片地址
}
Methods:
bootstrap table 方法Methods