bootstrap table 学习

[Christian-health]

bootstrap table 另外一份翻译

http://blog.csdn.net/rickiyeat/article/details/56483577

Methods:

bootstrap table 方法Methods

Method方法和Events事件之间的区别：Method方法是可以在自己写的任何函数，任何地方，按照需要进行调用，比如，我现在要取得表格的配置选项getOptions，就可以在自己写的函数中直接调用

$table.bootstrapTable('getOptions');这个语句，并获取返回的东西。

而Events事件则是，在construnct或者ngOnInit中调用一次进行注册，然后表格被点击时候会自动自己进行调用。处理相应的事件。

名字：getOptions
参数：无
描述：Return the options object: $table.bootstrapTable('getOptions');
返回bootstrap table 设置中的options选项

名字：getSelections
参数：无
描述：Return all selected rows, when no record selected, am empty array will return: 
返回所有选定的行，当没有选择记录时，空数组将返回
$table.bootstrapTable('getSelections');

名字：getAllSelections
参数：无
描述：Return all selected rows contain search or filter, when no record selected, am empty 
array will return: 
返回所有选定的行包含搜索或过滤器，当没有选择记录时，空数组将返回。
返回所有选择的行，
包括搜索过滤前的，
当没有选择任何行的时候返回一个空数组。

这个与getSelections的区别是：
(1)getAllSelections有搜索框，getAllSelections没有
(2)getAllSelections使用搜索框，搜索了东西，已经看不到勾选的东西了，这个时候，一样能通过
getAllSelections获取到已经选择的东西

$table.bootstrapTable('getAllSelections');

名字：getData
参数：useCurrentPage
描述：Get the loaded data of table: $table.bootstrapTable('getData');
Get the loaded data of table at the moment that this method is called.
 If you set the useCurrentPage to true the method will return the data in the current page.
获取表的加载数据
就是说表中已经加载了那些数据，我可以获取到

获得当前加载的数据。假如设置 
 useCurrentPage 为 true，则返回当前页的数据。

名字：getRowByUniqueId
参数：id
描述：Get data from table, the row that contains the id passed by parameter: 
从表获取数据，包含由参数传递的id的行：
就是说你指定一个id，通过这个唯一的id我们就能从表中获取指定id的数据
根据 uniqueId 获取行数据
$table.bootstrapTable('getRowByUniqueId', 1);

名称：load
参数：data
描述：
Load the data to table, the old rows will be removed: $table.bootstrapTable('load', data);
将数据加载到表中，旧行将被删除
加载数据到表格中，旧数据会被替换

名字：append
参数：data
描述：
Append the data to table: $table.bootstrapTable('append', data);
将数据附加到表
添加数据到表格在，现有数据之后。

名字：prepend
参数：data
描述：插入数据到表格在，现有数据之前
Prepend the data to table: $table.bootstrapTable('prepend', data);
前置数据到表中

名字：remove
参数：params
描述：
从表格中删除数据，包括两个参数：  field: 需要删除的行的 field 名称。
values: 需要删除的行的值，类型为数组。
Remove data from table, the params contains two properties:
field: the field name of remove rows.
values: the array of values for rows which should be removed.
$table.bootstrapTable('remove', {field: 'id', values: ids});

removeAll
Remove all data from table: $table.bootstrapTable('removeAll');
从表中删除所有数据

removeByUniqueId
Remove data from table, the row that contains the id passed by parameter: 
从表中删除数据，该行包含由参数传递的id
(也就是说，可以删除一个指定id的数据行)
$table.bootstrapTable('removeByUniqueId', 1);

insertRow
Insert a new row, the param contains following properties:
插入一个新行，param包含以下属性：
index: the row index to insert into.
index：要插入的行索引。
row: the row data.
行：要插入的行数据。
$table.bootstrapTable('insertRow', {index: 1, row: row});

updateRow
Update the specified row, the param contains following properties: 
更新指定的行，param包含以下属性：
index: the row index to be updated. 
index：要更新的行索引。
row: the row data.
行：要插入的行数据。
$table.bootstrapTable('updateRow', {index: 1, row: row});

updateByUniqueId
Update the specified row, the param contains following properties: 
更新指定的行，param包含以下属性：
id: a row id where the id should be the uniqueid field assigned to the table. 
id：一行id，id应该是分配给表的uniqueid字段。
row: the new row data. $table.bootstrapTable('updateByUniqueId', {id: 3, row: row});
行：新行数据。

showRow/hideRow
Show/Hide the specified row.
显示/隐藏指定的行
$table.bootstrapTable('showRow', {index:1});
$table.bootstrapTable('hideRow', {index:1});

mergeCells
Merge some cells to one cell, the options contains following properties:
将一些单元格合并到一个单元格，该选项包含以下属性：
index: the row index.
index：行索引。
field: the field name.
字段：字段名称。
rowspan: the rowspan count to be merged.
rowspan：要合并的rowspan个数。
colspan: the colspan count to be merged.
colspan：要合并colspan个数。
$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});

checkAll/uncheckAll
Check/Uncheck all current page rows.
选择/不选择 所有的当前页面的行
$table.bootstrapTable('checkAll');
$table.bootstrapTable('uncheckAll');

check/uncheck
Check/Uncheck a row, the row index start with 0.
选择/不选择 一行，行索引从0开始
$table.bootstrapTable('check', 1);
$table.bootstrapTable('uncheck', 1);

checkBy/uncheckBy
Check/Uncheck rows by array of values.
选择/不选择 行通过指定的数组值
$table.bootstrapTable('checkBy', {field:'id', values:[1, 2, 3]});
$table.bootstrapTable('uncheckBy', {field:'id', values:[1, 2, 3]});

refresh
Refresh the remote server data, you can set {silent: true} to refresh the data silently, 
and set {url: newUrl} to change the url. To supply query params specific to this request,
 set {query: {foo: 'bar'}}.
$table.bootstrapTable('refresh');

刷新远程服务器数据，您可以设置{silent：true}以静默方式刷新数据，
并设置set{url：newUrl}来更改URL。 要提供特定于此请求的查询参数，
请设置 set{query：{foo：'bar'}}。
$ table.bootstrapTable（'刷新'）;

resetView
重置视图
Reset the bootstrap table view, for example reset the table height:
 $table.bootstrapTable('resetView');
重置表的视图，例如重置表高度：
$ table.bootstrapTable('reset View');

destroy
Destroy the bootstrap table: $table.bootstrapTable('destroy');
销毁bootstrap table

showLoading/hideLoading
显示表数据正在加载中

 $table.bootstrapTable('showLoading');
 $table.bootstrapTable('hideLoading');

showColumn/hideCoulumn
Show/Hide the specified column.
showColumn/ hideCoulumn
显示/隐藏指定的列。
$table.bootstrapTable('showColumn', 'name');
$table.bootstrapTable('hideColumn', 'name');

Scroll to the number value position, set 'bottom' means scroll to the bottom.
滚动到数字值位置，设置“底部”表示滚动到底部。
$table.bootstrapTable('scrollTo', 0);
$table.bootstrapTable('scrollTo', 'bottom');

selectPage/prevPage/nextPage
请选择数据/ prevPage/下一页
Go to the a specified/previous/next page.
转到指定/上一页/下一页。
$table.bootstrapTable('selectPage', 1);
$table.bootstrapTable('prevPage');
$table.bootstrapTable('nextPage');

togglePagination
togglePagination
切换分页选项：$ table.bootstrapTable（'togglePagination'）;
Toggle the pagination option: $table.bootstrapTable('togglePagination');

toggleView
toggleView
切换卡/表视图：$ table.bootstrapTable（'toggleView'）;
Toggle the card/table view: $table.bootstrapTable('toggleView');

refreshOptions

$table.bootstrapTable('refreshOptions', {
                showColumns: true,
                search: true,
                showRefresh: true,
                url: '../json/data1.json'
            });

resetSearch

$button.click(function () {
            $table.bootstrapTable('resetSearch');
        });

expandRow-collapseRow
$button.click(function () {
            $table.bootstrapTable('expandRow', 1);
        });
        $button2.click(function () {
            $table.bootstrapTable('collapseRow', 1);
        });

filterBy
(Can use only in client-side) Filter data in table, 
e.g. You can filter {age: 10} to show the data only age is equal to 10. 
You can also filter with an array of values, as in: {age: 10, hairColor: ["blue", "red", "green"]} to find data where age is equal to 10 and hairColor is either blue, red, or green.
In this example, we filter by:

$table.bootstrapTable('filterBy', {
    id: [1, 2, 3]
});
过滤
（只能在客户端使用）过滤表中的数据，
例如 您可以过滤{age：10}以显示数据，年龄等于10。
您还可以使用一组值进行过滤，如：{age：10，hairColor：[“blue”，“red”，“green”]}查找年龄等于10的数据，而hairColor为蓝色，红色 ，或绿色。
在这个例子中，我们过滤：

$ table.bootstrapTable（'filterBy'，{
     id：[1，2，3]
}）;

[Christian-health]

Column options

Column options列参数:

中文描述：设置true的时候显示radio并且有radio这列有固定的宽度
Name：radio
Attribute：data-radio
Type：Boolean
Default：FALSE
Description：True to show a radio. The radio column has fixed width.

中文描述：设置true的时候显示checkbox并且有checkbox这列有固定的宽度
Name：checkbox
Attribute：data-checkbox
Type：Boolean
Default：FALSE
Description：True to show a checkbox. The checkbox column has fixed width.

中文描述：列字段名称。
Name：field
Attribute：data-field
Type：String
Default：undefined
Description：The column field name.

中文描述：列标题文本。
Name：title
Attribute：data-title
Type：String
Default：undefined
Description：The column title text.

中文描述：列标题工具提示文本。 此选项还支持标题HTML属性
Name：titleTooltip
Attribute：data-title-tooltip
Type：String
Default：undefined
Description：The column title tooltip text. 
This option also support the title HTML attribute

中文描述：列的css类的名称。
Name：class
Attribute：class / data-class
Type：String
Default：undefined
Description：The column class name.

中文描述：指示单元格应占用的行数。
Name：rowspan
Attribute：rowspan / data-rowspan
Type：Number
Default：undefined
Description：Indicate how many rows a cell should take up.

中文描述：指示单元格应占用的列数。
Name：colspan
Attribute：colspan / data-colspan
Type：Number
Default：undefined
Description：Indicate how many columns a cell should take up.

中文描述：指示如何对齐列数据。 'left'，'right'，'center'可以使用
Name：align
Attribute：data-align
Type：String
Default：undefined
Description：Indicate how to align the column data. 'left', 'right', 'center' can be used

中文描述：指示如何对齐表标题。 'left'，'right'，'center'可以使用
Name：halign
Attribute：data-halign
Type：String
Default：undefined
Description：Indicate how to align the table header. 'left', 'right', 'center' can be used

中文描述：指示如何对齐表尾。 'left'，'right'，'center'可以使用
Name：falign
Attribute：data-falign
Type：String
Default：undefined
Description：Indicate how to align the table footer. 'left', 'right', 'center' can be used.

中文描述：指示如何对齐单元格数据。 'top'，'middle'，'bottom'可以使用。
Name：valign
Attribute：data-valign
Type：String
Default：undefined
Description：Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.

中文描述：列的宽度。 如果未定义，宽度将自动展开以适合其内容。 此外，你可以添加'％'到你的数字，bootstrapTable将使用百分比单位，否则，你可以添加或没有'px'到你的数字，然后bootstrapTable将使用像素
Name：width
Attribute：data-width
Type：Number   {Pixels or Percentage}
Default：undefined
Description：
The width of column. If not defined, the width will auto expand to fit its contents.
 Also you can add '%' to your number and the bootstrapTable will use the percentage unit,
 otherwise, you can add or no the 'px' to your number and 
then the bootstrapTable will use the pixels

中文描述：true允许列可以排序。
Name：sortable
Attribute：data-sortable
Type：Boolean
Default：FALSE
Description：True to allow the column can be sorted.

中文描述：默认排序顺序，只能为“asc”或“desc”。
Name：order
Attribute：data-order
Type：String
Default：'asc'
Description：The default sort order, can only be 'asc' or 'desc'.

中文描述：
Name：
Attribute：
Type：
Default：
Description：

中文描述：
Name：
Attribute：
Type：
Default：
Description：

[Christian-health]

Table options

Table options表格选项:

通过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'.
}

[Christian-health]

Events 事件

bootstrap table Events 事件

bootstrap table 官网地址：http://bootstrap-table.wenzhixin.net.cn/documentation/#events

bootstrap table事件的使用方法如下：

Option Event  这种定义方式使用的是【选项事件】，也就是表格选项本身的事件
方式一：
$('#table').bootstrapTable({
    onEventName: function (arg1, arg2, ...) {
        // ...
    }
});

jQuery Event，jQuery 事件，这种方式使用的是jquery事件方式，方式二：
$('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {
    // ...
});

方式一：
$('#table').bootstrapTable({
    onEventName: function (arg1, arg2, ...) {
        // ...
    }
});

这里的方式一，是在$('#table').bootstrapTable这个函数中添加bootstrap table表格中的事件处理函数。 我们添加其他的表格定义也是在这个函数中添加的，比如我们在这个函数中添加，gridOptions表格选项和columns列选项，也是在这个函数中添加的。

这里我们定义一个表格中某一行被点击时候的事件处理函数，onClickRow。 所以按照上面的方式应该是

按照方式一定义的onClickRow事件处理函数：
$('#table').bootstrapTable({
    onClickRow: function (row : any, $element : any,field : any) {

    }
});

同样我们还有第二种方式定义事件处理函数，使用jquery事件处理方式：

$('#table').on('click-row.bs.table', function (e, arg1, arg2, ...) {
    // ...
});

推荐使用第二种方式，也就是下面的这种处理方式，因为非常灵活，这样写的函数可以在任何需要的地方进行调用

在使用的时候，可以使用第二种事件处理方式，可以定义一系列的事件处理函数，然后把这一系列的事件处理函数，放置到一个总的函数中。比如这个函数叫做

eventOperatorFun() {
       表格一行被点击就会调用
      $('#table').on('click-row.bs.table', function (e, arg1, arg2, ...) {
                  // ...
     });
     表格只要被点击就会调用
    $('#table').on('all.bs.table', function (e, arg1, arg2, ...) {
               // ...
    });
   表格一行被双击就会调用
   $('#table').on('dbl-click-row.bs.table', function (e, arg1, arg2, ...) {
             // ...
   });
}

bootstrap table中的所有事件：

中文描述：所有的事件都会触发该事件，参数包括：name：事件名，args：事件的参数。
Option Event：onAll
jQuery Event：all.bs.table
Parameter：name, args
Description：
                      Fires when all events trigger, the parameters contain: 
                      name: the event name, 
                      args: the event data.

中文描述： 当用户点击某一行的时候触发，参数包括：
                    row：点击行的数据，
                    $element：tr 元素，
                    field：点击列的 field 名称。
Option Event：onClickRow
jQuery Event：click-row.bs.table
Parameter：row, $element, field
Description：Fires when user click a row, the parameters contain: 
                      row: the record corresponding to the clicked row, 
                      $element: the tr element, 
                      field: the field name corresponding to the clicked cell.

中文描述： 当用户双击某一行的时候触发，参数包括：
                   row：点击行的数据，
                   $element：tr 元素，
                   field：点击列的 field 名称。
Option Event：onDblClickRow
jQuery Event：dbl-click-row.bs.table
Parameter：row, $element, field
Description： Fires when user double click a row, the parameters contain: 
                      row: the record corresponding to the clicked row, 
                      $element: the tr element, 
                      field: the field name corresponding to the clicked cell.

中文描述：当用户双击某一单元格的时候触发，参数包括：
                   field：点击列的 field 名称，
                   value：点击列的 value 值，
                   row：点击列的整行数据，
                   $element：td 元素。
Option Event：onDblClickCell
jQuery Event：click-cell.bs.table
Parameter：field, value, row, $element
Description：Fires when user click a cell, the parameters contain: 
                      field: the field name corresponding to the clicked cell, 
                      value: the data value corresponding to the clicked cell, 
                      row: the record corresponding to the clicked row, 
                      $element: the td element.

中文描述： 当用户点击某一单元格的时候触发，参数包括：
                   field：点击列的 field 名称，
                   value：点击列的 value 值，
                   row：点击列的整行数据，
                   $element：td 元素。
Option Event：onClickCell
jQuery Event：click-cell.bs.table
Parameter：field, value, row, $element
Description：Fires when user click a cell, the parameters contain: 
                      field: the field name corresponding to the clicked cell, 
                      value: the data value corresponding to the clicked cell, 
                      row: the record corresponding to the clicked row, 
                      $element: the td element.

中文描述：当用户对列进行排序时触发，参数包含：
                  name：排序列字段名
                  order：排序列的顺序。
Option Event：onSort
jQuery Event：sort.bs.table
Parameter：name, order
Description：Fires when user sort a column, the parameters contain: 
                      name: the sort column field name
                      order: the sort column order.

中文描述：当用户check选择行时触发，参数包含：
                  row：与单击的行对应的记录。 $ element：选中DOM元素
Option Event：onCheck
jQuery Event：check.bs.table
Parameter：row, $element
                    Description：Fires when user check a row, the parameters contain: 
                    row: the record corresponding to the clicked row. $element: the DOM element checked.

中文描述：当用户取消选中行时触发，参数包含：
                  row：与单击的行对应的记录。 $ element：取消选中DOM元素。
Option Event：onUncheck
jQuery Event：uncheck.bs.table
Parameter：row, $element
Description：Fires when user uncheck a row, the parameters contain: 
                      row: the record corresponding to the clicked row. $element: the DOM element unchecked.

中文描述：当用户检查check(选择)所有行时触发，参数包含：
                   rows：与新检查的行对应的记录数组。
Option Event：onCheckAll
jQuery Event：check-all.bs.table
Parameter：rows
Description： Fires when user check all rows, the parameters contain: 
                       rows: array of records corresponding to newly checked rows.

中文描述：当用户取消选中所有行时触发，参数包含：
                   rows：与先前检查的行对应的记录数组。
Option Event：onUncheckAll
jQuery Event：uncheck-all.bs.table
Parameter：rows
Description：Fires when user uncheck all rows, the parameters contain: 
                      rows: array of records corresponding to previously checked rows 

中文描述：当用户检查check(选择)某些行时触发，参数包含：
                   rows：与先前检查的行对应的记录数组。
Option Event： onCheckSome
jQuery Event：check-some.bs.table
Parameter：rows
Description：Fires when user check some rows, the parameters contain: 
                     rows: array of records corresponding to previously checked rows.

中文描述：当用户取消选中某些行时触发，参数包含：
                   rows：与先前检查的行对应的记录数组。
Option Event：onUncheckSome
jQuery Event：uncheck-some.bs.table
Parameter：
Description： Fires when user uncheck some rows, the parameters contain: 
                       rows: array of records corresponding to previously checked rows.

中文描述：当远程数据成功加载时触发。
Option Event：onLoadSuccess
jQuery Event：load-success.bs.table
Parameter：data
Description：Fires when remote data is loaded successfully.

中文描述： 在加载远程数据时发生某些错误时触发
Option Event：onLoadError
jQuery Event：load-error.bs.table
Parameter：status, res
Description：Fires when some errors occur to load remote data.

中文描述：切换列可见时触发。
Option Event：onColumnSwitch
jQuery Event：column-switch.bs.table
Parameter：field, checked
Description：Fires when switch the column visible.

中文描述：在按列搜索时触发。
Option Event：onColumnSearch
jQuery Event：column-search.bs.table
Parameter：field, text
Description：Fires when search by column.

中文描述：更改页码或页面大小时触发。
Option Event：onPageChange
jQuery Event：page-change.bs.table
Parameter：number, size
Description：Fires when change the page number or page size.

中文描述：在搜索表时触发。
Option Event：onSearch
jQuery Event：search.bs.table
Parameter：text
Description：Fires when search the table.

中文描述：切换表视图时触发。
Option Event：onToggle
jQuery Event：toggle.bs.table
Parameter：cardView
Description：Fires when toggle the view of table.

中文描述：在呈现（渲染）表体之前触发
Option Event：onPreBody
jQuery Event：pre-body.bs.table
Parameter：data
Description：Fires before the table body is rendered

中文描述：在表体中渲染并在DOM中可用之后触发
Option Event：onPostBody
jQuery Event：post-body.bs.table
Parameter：data
Description：Fires after the table body is rendered and available in the DOM

中文描述：在表头渲染，并在DOM中可用之后触发
Option Event：onPostHeader
jQuery Event：post-header.bs.table
Parameter：none
Description：Fires after the table header is rendered and availble in the DOM

中文描述：当点击详细图标展开详细页面的时候触发
Option Event：onExpandRow
jQuery Event：expand-row.bs.table
Parameter：index, row, $detail
Description：Fires when click the detail icon to expand the detail view.

中文描述：当点击详细图片收起详细页面的时候触发。
Option Event：onCollapseRow
jQuery Event：collapse-row.bs.table
Parameter：index, row
Description：Fires when click the detail icon to collapse the detail view

中文描述：在刷新选项之后和在销毁和初始化表之前触发
Option Event：onRefreshOptions
jQuery Event：refresh-options.bs.table
Parameter：options
Description：Fires after refresh the options and before destroy and init the table

中文描述：当重置表的视图时触发。
Option Event：onResetView
jQuery Event：reset-view.bs.table
Parameter：
Description：Fires when reset view of the table.

中文描述：单击刷新按钮后触发。
Option Event：onRefresh
jQuery Event：refresh.bs.table
Parameter：params
Description：Fires after the click the refresh button.

[Christian-health]

国际化

可以在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']);
}

[Christian-health]

自定义单元格和事件处理

bootstrap table 自定义单元格显示内容和单元格事件处理

参考资料：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]
        });
      }
    };

[Christian-health]

Column options列参数

bootstrap table 列选项：

[Christian-health]

http://blog.csdn.net/april_4/article/details/52846332

[Christian-health]

bootstrap table搜索框

bootstrap table搜索框实现

如果想要给一个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:图片地址
}

[Christian-health]

设置和清除表格底部的按钮

参考：http://www.cnblogs.com/changwei0708/p/5834141.html 参考资料：http://blog.csdn.net/april_4/article/details/52846332

设置表格底部的按钮

可以使用如下代码设置表格底部的按钮：

    $('#table1').parents('.fixed-table-container').append(`<div class="fixed-table-footerButtons">  
        <input type="checkbox" class="checkAll">  
        <button id="delete-curalarm-btn"  data-target="#DelConfirm" data-toggle="modal" disabled>??</button>  
        <button id="confirm-curalarm-btn" disabled>确认</button>  
        <button id="unconfirm-curalarm-btn" disabled>取消确认</button>  
    </div>`);  

比如，我现在要在表格的底部添加一个删除按钮，用来删除掉，可以这么写：

//点击之后出现对话框，使用的是bootstrap table的对话框，主要就是代码 
data-target="#DelConfirm" data-toggle="modal" 
    $('#table1').parents('.fixed-table-container').append(`<div class="fixed-table-footerButtons">  
        <input type="checkbox" class="checkAll">  
        <button id="delete-curalarm-btn"  data-target="#DelConfirm" data-toggle="modal" disabled>删除</button>  
    </div>`);  

//注意最初的时候这个删除按钮设置成disabled，当有选择选项的时候，再取消掉disabled属性

   $('#table1').parents('.fixed-table-container')
      .append(`<div class="fixed-table-footerButtons">
                      <input type="checkbox" class="checkAll">
                      <button id="delete-curalarm-btn"  disabled>
                              删除
                      </button>
                    </div>`);

//设置当选中选项时候表格底部删除按钮开启，即非disable状态

    $('#table1').on('check.bs.table uncheck.bs.table ' +  
      'check-all.bs.table uncheck-all.bs.table', function () {  
      $('#delete-curalarm-btn').prop('disabled', !$('#table1').bootstrapTable('getSelections').length);  
    });  

//当选中选项的时候，设置表格底部删除按钮左侧的全选checkbox状态为checked

 $('#table1').on('check-all.bs.table uncheck-all.bs.table', function () {  
      $('.fixed-table-footerButtons .checkAll').prop('checked', $('#table1').bootstrapTable('getSelections').length > 0);  
    });  

//当点击表格删除按钮左侧的checkbox的时候，设置表格中的所有数据选中，不选中

 $('.bootstrap-table .fixed-table-footerButtons .checkAll').change(function () {  
      if ($(this).prop('checked')) {  
        $('#table1').bootstrapTable('checkAll');  
      } else {  
        $('#table1').bootstrapTable('uncheckAll');  
      }  
    });  

//定义表格底部删除按钮点击时候调用的函数

 $('#confirm-curalarm-btn').click(function () {  
      that.alarmConfirm();  
    });  

清除表格底部按钮

//当表格中没有数据的时候，隐藏表格底部的按钮

$('#table1').on('reset-view.bs.table', () => {
      if ($('#table1').bootstrapTable('getData').length > 0) {
        $('#table1').parents('.fixed-table-container').find('.fixed-table-footerButtons').css('display', 'block');
      } else {
        $('#table1').parents('.fixed-table-container').find('.fixed-table-footerButtons').css('display', 'none');
      }
    });