/pack-rat/003_pack_rat/pack-rat/node_modules/bootstrap-table/docs/_i18n/zh-cn/documentation/column-options.md |
@@ -0,0 +1,248 @@ |
# 列参数 []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/documentation/column-options.md) |
|
--- |
|
The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`. |
|
<table class="table" |
id="c" |
data-search="true" |
data-show-toggle="true" |
data-show-columns="true" |
data-mobile-responsive="true"> |
<thead> |
<tr> |
<th>Name</th> |
<th>Attribute</th> |
<th>Type</th> |
<th>Default</th> |
<th>Description</th> |
</tr> |
</thead> |
<tbody> |
<tr> |
<td>radio</td> |
<td>data-radio</td> |
<td>Boolean</td> |
<td>false</td> |
<td>True to show a radio. The radio column has fixed width.</td> |
</tr> |
<tr> |
<td>checkbox</td> |
<td>data-checkbox</td> |
<td>Boolean</td> |
<td>false</td> |
<td>True to show a checkbox. The checkbox column has fixed width.</td> |
</tr> |
<tr> |
<td>field</td> |
<td>data-field</td> |
<td>String</td> |
<td>undefined</td> |
<td>The column field name.</td> |
</tr> |
<tr> |
<td>title</td> |
<td>data-title</td> |
<td>String</td> |
<td>undefined</td> |
<td>The column title text.</td> |
</tr> |
<tr> |
<td>titleTooltip</td> |
<td>data-title-tooltip</td> |
<td>String</td> |
<td>undefined</td> |
<td>The column title tooltip text. This option also support the title HTML attribute</td> |
</tr> |
<tr> |
<td>class</td> |
<td>class / data-class</td> |
<td>String</td> |
<td>undefined</td> |
<td>The column class name.</td> |
</tr> |
<tr> |
<td>rowspan</td> |
<td>rowspan / data-rowspan</td> |
<td>Number</td> |
<td>undefined</td> |
<td>Indicate how many rows a cell should take up.</td> |
</tr> |
<tr> |
<td>colspan</td> |
<td>colspan / data-colspan</td> |
<td>Number</td> |
<td>undefined</td> |
<td>Indicate how many columns a cell should take up.</td> |
</tr> |
<tr> |
<td>align</td> |
<td>data-align</td> |
<td>String</td> |
<td>undefined</td> |
<td>Indicate how to align the column data. 'left', 'right', 'center' can be used.</td> |
</tr> |
<tr> |
<td>halign</td> |
<td>data-halign</td> |
<td>String</td> |
<td>undefined</td> |
<td>Indicate how to align the table header. 'left', 'right', 'center' can be used.</td> |
</tr> |
<tr> |
<td>falign</td> |
<td>data-falign</td> |
<td>String</td> |
<td>undefined</td> |
<td>Indicate how to align the table footer. 'left', 'right', 'center' can be used.</td> |
</tr> |
<tr> |
<td>valign</td> |
<td>data-valign</td> |
<td>String</td> |
<td>undefined</td> |
<td>Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.</td> |
</tr> |
<tr> |
<td>width</td> |
<td>data-width</td> |
<td>Number {Pixels or Percentage}</td> |
<td>undefined</td> |
<td>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</td> |
</tr> |
<tr> |
<td>sortable</td> |
<td>data-sortable</td> |
<td>Boolean</td> |
<td>false</td> |
<td>True to allow the column can be sorted. |
</td> |
</tr> |
<tr> |
<td>order</td> |
<td>data-order</td> |
<td>String</td> |
<td>'asc'</td> |
<td>The default sort order, can only be 'asc' or 'desc'.</td> |
</tr> |
<tr> |
<td>visible</td> |
<td>data-visible</td> |
<td>Boolean</td> |
<td>true</td> |
<td>False to hide the columns item.</td> |
</tr> |
<tr> |
<td>cardVisible</td> |
<td>data-card-visible</td> |
<td>Boolean</td> |
<td>true</td> |
<td>False to hide the columns item in card view state.</td> |
</tr> |
<tr> |
<td>switchable</td> |
<td>data-switchable</td> |
<td>Boolean</td> |
<td>true</td> |
<td>False to disable the switchable of columns item.</td> |
</tr> |
<tr> |
<td>clickToSelect</td> |
<td>data-click-to-select</td> |
<td>Boolean</td> |
<td>true</td> |
<td>True to select checkbox or radiobox when the column is clicked.</td> |
</tr> |
<tr> |
<td>formatter</td> |
<td>data-formatter</td> |
<td>Function</td> |
<td>undefined</td> |
<td> |
The context (this) is the column Object. <br> |
The cell formatter function, take three parameters: <br> |
value: the field value. <br> |
row: the row record data.<br> |
index: the row index.</td> |
</tr> |
<tr> |
<td>footerFormatter</td> |
<td>data-footer-formatter</td> |
<td>Function</td> |
<td>undefined</td> |
<td> |
The context (this) is the column Object. <br> |
The function, take one parameter: <br> |
data: Array of all the data rows. <br> |
the function should return a string with the text to show in the footer cell. |
</tr> |
<tr> |
<td>events</td> |
<td>data-events</td> |
<td>Object</td> |
<td>undefined</td> |
<td> |
The cell events listener when you use formatter function, take three parameters: <br> |
event: the jQuery event. <br> |
value: the field value. <br> |
row: the row record data.<br> |
index: the row index. |
</td> |
</tr> |
<tr> |
<td>sorter</td> |
<td>data-sorter</td> |
<td>Function</td> |
<td>undefined</td> |
<td> |
The custom field sort function that used to do local sorting, take two parameters: <br> |
a: the first field value.<br> |
b: the second field value. |
</td> |
</tr> |
<tr> |
<td>sortName</td> |
<td>data-sort-name</td> |
<td>String</td> |
<td>undefined</td> |
<td>Provide a customizable sort-name, not the default sort-name in the header, or the field name |
of the column. For example, a column might display the value of fieldName of "html" such as |
"<b><span style="color:red">abc</span></b>", but a fieldName to sort is "content" with the value of "abc". |
</td> |
</tr> |
<tr> |
<td>cellStyle</td> |
<td>data-cell-style</td> |
<td>Function</td> |
<td>undefined</td> |
<td> |
The cell style formatter function, take three parameters: <br> |
value: the field value.<br> |
row: the row record data.<br> |
index: the row index.<br> |
field: the row field.<br> |
Support classes or css. |
</td> |
</tr> |
<tr> |
<td>searchable</td> |
<td>data-searchable</td> |
<td>Boolean</td> |
<td>true</td> |
<td> |
True to search data for this column. |
</td> |
</tr> |
<tr> |
<td>searchFormatter</td> |
<td>data-search-formatter</td> |
<td>Boolean</td> |
<td>true</td> |
<td> |
True to search use formated data. |
</td> |
</tr> |
</tbody> |
</table> |
/pack-rat/003_pack_rat/pack-rat/node_modules/bootstrap-table/docs/_i18n/zh-cn/documentation/events.md |
@@ -0,0 +1,229 @@ |
# 事件 []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/documentation/events.md) |
|
--- |
|
<table class="table" |
id="e" |
data-search="true" |
data-show-toggle="true" |
data-show-columns="true" |
data-mobile-responsive="true"> |
<thead> |
<tr> |
<th>Option 事件</th> |
<th>jQuery 事件</th> |
<th>参数</th> |
<th>描述</th> |
</tr> |
</thead> |
<tbody> |
<tr> |
<td>onAll</td> |
<td>all.bs.table</td> |
<td>name, args</td> |
<td> |
所有的事件都会触发该事件,参数包括:<br> |
name:事件名,<br> |
args:事件的参数。 |
</td> |
</tr> |
<tr> |
<td>onClickRow</td> |
<td>click-row.bs.table</td> |
<td>row, $element</td> |
<td> |
当用户点击某一行的时候触发,参数包括:<br> |
row:点击行的数据,<br> |
$element:tr 元素,<br> |
field:点击列的 field 名称。 |
</td> |
</tr> |
<tr> |
<td>onDblClickRow</td> |
<td>dbl-click-row.bs.table</td> |
<td>row, $element</td> |
<td> |
当用户双击某一行的时候触发,参数包括:<br> |
row:点击行的数据,<br> |
$element:tr 元素,<br> |
field:点击列的 field 名称。 |
</td> |
</tr> |
<tr> |
<td>onClickCell</td> |
<td>click-cell.bs.table</td> |
<td>field, value, row, $element</td> |
<td> |
当用户点击某一列的时候触发,参数包括:<br> |
field:点击列的 field 名称,<br> |
value:点击列的 value 值,<br> |
row:点击列的整行数据,<br> |
$element:td 元素。 |
</td> |
</tr> |
<tr> |
<td>onDblClickCell</td> |
<td>dbl-click-cell.bs.table</td> |
<td>field, value, row, $element</td> |
<td> |
当用户双击某一列的时候触发,参数包括:<br> |
field:点击列的 field 名称,<br> |
value:点击列的 value 值,<br> |
row:点击列的整行数据,<br> |
$element:td 元素。 |
</td> |
</tr> |
<tr> |
<td>onSort</td> |
<td>sort.bs.table</td> |
<td>name, order</td> |
<td> |
Fires when user sort a column, the parameters contains: <br> |
name: the sort column field name<br> |
order: the sort column order. |
</td> |
</tr> |
<tr> |
<td>onCheck</td> |
<td>check.bs.table</td> |
<td>row</td> |
<td> |
Fires when user check a row, the parameters contains: <br> |
row: the record corresponding to the clicked row. |
$element: the DOM element checked. |
</td> |
</tr> |
<tr> |
<td>onUncheck</td> |
<td>uncheck.bs.table</td> |
<td>row</td> |
<td> |
Fires when user uncheck a row, the parameters contains: <br> |
row: the record corresponding to the clicked row. |
$element: the DOM element unchecked. |
</td> |
</tr> |
<tr> |
<td>onCheckAll</td> |
<td>check-all.bs.table</td> |
<td>rows</td> |
<td> |
Fires when user check all rows, the parameters contains: <br> |
rows: array of records corresponding to newly checked rows. |
</td> |
</tr> |
<tr> |
<td>onUncheckAll</td> |
<td>uncheck-all.bs.table</td> |
<td>rows</td> |
<td> |
Fires when user uncheck all rows, the parameters contains: <br> |
rows: array of records corresponding to previously checked rows. |
</td> |
</tr> |
<tr> |
<td>onCheckSome</td> |
<td>check-some.bs.table</td> |
<td>rows</td> |
<td> |
Fires when user check some rows, the parameters contains: <br> |
rows: array of records corresponding to previously checked rows. |
</td> |
</tr> |
<tr> |
<td>onUncheckSome</td> |
<td>uncheck-some.bs.table</td> |
<td>rows</td> |
<td> |
Fires when user uncheck some rows, the parameters contains: <br> |
rows: array of records corresponding to previously checked rows. |
</td> |
</tr> |
<tr> |
<td>onLoadSuccess</td> |
<td>load-success.bs.table</td> |
<td>data</td> |
<td>Fires when remote data is loaded |
successfully. |
</td> |
</tr> |
<tr> |
<td>onLoadError</td> |
<td>load-error.bs.table</td> |
<td>status</td> |
<td>Fires when some errors occur to load remote data.</td> |
</tr> |
<tr> |
<td>onColumnSwitch</td> |
<td>column-switch.bs.table</td> |
<td>field, checked</td> |
<td>Fires when switch the column visible.</td> |
</tr> |
<tr> |
<td>onColumnSearch</td> |
<td>column-search.bs.table</td> |
<td>field, text</td> |
<td>Fires when search by column.</td> |
</tr> |
<tr> |
<td>onPageChange</td> |
<td>page-change.bs.table</td> |
<td>number, size</td> |
<td>Fires when change the page number or page size.</td> |
</tr> |
<tr> |
<td>onSearch</td> |
<td>search.bs.table</td> |
<td>text</td> |
<td>Fires when search the table.</td> |
</tr> |
<tr> |
<td>onToggle</td> |
<td>toggle.bs.table</td> |
<td>cardView</td> |
<td>Fires when toggle the view of table.</td> |
</tr> |
<tr> |
<td>onPreBody</td> |
<td>pre-body.bs.table</td> |
<td>data</td> |
<td>Fires before the table body is rendered</td> |
</tr> |
<tr> |
<td>onPostBody</td> |
<td>post-body.bs.table</td> |
<td>none</td> |
<td>Fires after the table body is rendered and available in the DOM</td> |
</tr> |
<tr> |
<td>onPostHeader</td> |
<td>post-header.bs.table</td> |
<td>none</td> |
<td>Fires after the table header is rendered and availble in the DOM</td> |
</tr> |
<tr> |
<td>onExpandRow</td> |
<td>expand-row.bs.table</td> |
<td>index, row, $detail</td> |
<td>当点击详细图标展开详细页面的时候触发。</td> |
</tr> |
<tr> |
<td>onCollapseRow</td> |
<td>collapse-row.bs.table</td> |
<td>index, row</td> |
<td>当点击详细图片收起详细页面的时候触发。</td> |
</tr> |
<tr> |
<td>onRefreshOptions</td> |
<td>refresh-options.bs.table</td> |
<td>options</td> |
<td>Fires after refresh the options and before destroy and init the table.</td> |
</tr> |
<tr> |
<td>onRefresh</td> |
<td>refresh.bs.table</td> |
<td>params</td> |
<td>Fires after the click the refresh button.</td> |
</tr> |
</tbody> |
</table> |
/pack-rat/003_pack_rat/pack-rat/node_modules/bootstrap-table/docs/_i18n/zh-cn/documentation/methods.md |
@@ -0,0 +1,332 @@ |
# 方法 []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/documentation/methods.md) |
|
--- |
|
使用方法的语法:`$('#table').bootstrapTable('method', parameter);`。 |
|
<table class="table" |
id="m" |
data-search="true" |
data-show-toggle="true" |
data-show-columns="true" |
data-mobile-responsive="true"> |
<thead> |
<tr> |
<th>名称</th> |
<th>参数</th> |
<th>描述</th> |
<th data-formatter="methodFormatter" |
data-align="center" |
data-valign="middle">例子</th> |
</tr> |
</thead> |
<tbody> |
<tr> |
<td>getOptions</td> |
<td>none</td> |
<td>返回表格的 Options。</td> |
<td>getOptions</td> |
</tr> |
<tr> |
<td>getSelections</td> |
<td>none</td> |
<td>返回所选的行,当没有选择任何行的时候返回一个空数组。</td> |
<td>getSelections</td> |
</tr> |
<tr> |
<td>getAllSelections</td> |
<td>none</td> |
<td>返回所有选择的行,包括搜索过滤前的,当没有选择任何行的时候返回一个空数组。</td> |
<td>getAllSelections</td> |
</tr> |
<tr> |
<td>getData</td> |
<td>useCurrentPage</td> |
<td>或者当前加载的数据。假如设置 useCurrentPage 为 true,则返回当前页的数据。</td> |
<td>getData</td> |
</tr> |
<tr> |
<td>getRowByUniqueId</td> |
<td>id</td> |
<td>根据 uniqueId 获取行数据。</td> |
<td>getRowByUniqueId</td> |
</tr> |
<tr> |
<td>load</td> |
<td>data</td> |
<td>加载数据到表格中,旧数据会被替换。</td> |
<td>load</td> |
</tr> |
<tr> |
<td>showAllColumns</td> |
<td>none</td> |
<td>Show All the columns.</td> |
<td>showAllColumns</td> |
</tr> |
<tr> |
<td>hideAllColumns</td> |
<td>none</td> |
<td>Hide All the columns.</td> |
<td>hidAllColumns</td> |
</tr> |
<tr> |
<td>append</td> |
<td>data</td> |
<td>添加数据到表格在现有数据之后。</td> |
<td>append</td> |
</tr> |
<tr> |
<td>prepend</td> |
<td>data</td> |
<td>插入数据到表格在现有数据之前。</td> |
<td>prepend</td> |
</tr> |
<tr> |
<td>remove</td> |
<td>params</td> |
<td> |
从表格中删除数据,包括两个参数: |
field: 需要删除的行的 field 名称。<br> |
values: 需要删除的行的值,类型为数组。<br> |
</td> |
<td>remove</td> |
</tr> |
<tr> |
<td>removeAll</td> |
<td>-</td> |
<td>删除表格所有数据。</td> |
<td>removeAll</td> |
</tr> |
<tr> |
<td>removeByUniqueId</td> |
<td>id</td> |
<td>根据 uniqueId 删除指定的行。</td> |
<td>removeByUniqueId</td> |
</tr> |
<tr> |
<td>insertRow</td> |
<td>params</td> |
<td> |
插入新行,参数包括:<br> |
index: 要插入的行的 index。<br> |
row: 行的数据,Object 对象。 |
</td> |
<td>insertRow</td> |
</tr> |
<tr> |
<td>updateRow</td> |
<td>params</td> |
<td> |
更新指定的行,参数包括:<br> |
index: 要更新的行的 index。<br> |
row: 行的数据,Object 对象。 |
</td> |
<td>updateRow</td> |
</tr> |
<tr> |
<td>showRow</td> |
<td>params</td> |
<td>显示指定的行,参数包括:<br> |
index: 要更新的行的 index 或者 uniqueId。<br> |
isIdField: 指定 index 是否为 uniqueid。</td> |
<td>showRow-hideRow</td> |
</tr> |
<tr> |
<td>hideRow</td> |
<td>params</td> |
<td>显示指定的行,参数包括:<br> |
index: 要更新的行的 index。<br> |
uniqueId: 或者要更新的行的 uniqueid。 |
<td>showRow-hideRow</td> |
</tr> |
<tr> |
<td>getRowsHidden</td> |
<td>show</td> |
<td>Get all rows hidden and if you pass the show parameter true the rows will be shown again, otherwise, the method |
only will return the rows hidden.</td> |
</tr> |
<tr> |
<td>mergeCells</td> |
<td>options</td> |
<td> |
Merge some cells to one cell, the options contains following properties: <br> |
index: the row index. <br> |
field: the field name.<br> |
rowspan: the rowspan count to be merged. <br> |
colspan: the colspan count to be merged. |
</td> |
</tr> |
<tr> |
<td>updateCell</td> |
<td>params</td> |
<td> |
Update one cell, the params contains following properties: <br> |
index: the row index. <br> |
field: the field name.<br> |
value: the new field value. |
</td> |
</tr> |
<tr> |
<td>refresh</td> |
<td>params</td> |
<td>Refresh the remote server data, you can set <code>{silent: true}</code> to refresh the data silently, and set <code>{url: newUrl}</code> to change the url. To supply query params specific to this request, set <code>{query: {foo: 'bar'}}</code></td> |
</tr> |
<tr> |
<td>refreshOptions</td> |
<td>options</td> |
<td>Refresh the options</td> |
</tr> |
<tr> |
<td>resetSearch</td> |
<td>text</td> |
<td>Set the search text</td> |
</tr> |
<tr> |
<td>showLoading</td> |
<td>none</td> |
<td>Show loading status.</td> |
</tr> |
<tr> |
<td>hideLoading</td> |
<td>none</td> |
<td>Hide loading status.</td> |
</tr> |
<tr> |
<td>checkAll</td> |
<td>none</td> |
<td>Check all current page rows.</td> |
</tr> |
<tr> |
<td>uncheckAll</td> |
<td>none</td> |
<td>Uncheck all current page rows.</td> |
</tr> |
<tr> |
<td>check</td> |
<td>index</td> |
<td>Check a row, the row index start with 0.</td> |
</tr> |
<tr> |
<td>uncheck</td> |
<td>index</td> |
<td>Uncheck a row, the row index start with 0.</td> |
</tr> |
<tr> |
<td>checkBy</td> |
<td>params</td> |
<td> |
Check a row by array of values, the params contains:<br> |
field: name of the field used to find records<br> |
values: array of values for rows to check<br> |
Example: <br> |
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]}) |
</td> |
</tr> |
<tr> |
<td>uncheckBy</td> |
<td>params</td> |
<td> |
Uncheck a row by array of values, the params contains:<br> |
field: name of the field used to find records<br> |
values: array of values for rows to uncheck<br> |
Example: <br> |
$("#table").bootstrapTable("uncheckBy", {field:"field_name", values:["value1","value2","value3"]}) |
</td> |
</tr> |
<tr> |
<td>resetView</td> |
<td>params</td> |
<td>Reset the bootstrap table view, for example reset the table height.</td> |
</tr> |
<tr> |
<td>resetWidth</td> |
<td>none</td> |
<td>Resizes header and footer to fit current columns width</td> |
</tr> |
<tr> |
<td>destroy</td> |
<td>none</td> |
<td>Destroy the bootstrap table.</td> |
</tr> |
<tr> |
<td>showColumn</td> |
<td>field</td> |
<td>Show the specified column.</td> |
</tr> |
<tr> |
<td>hideColumn</td> |
<td>field</td> |
<td>Hide the specified column.</td> |
</tr> |
<tr> |
<td>getHiddenColumns</td> |
<td>-</td> |
<td>获取隐藏的列。</td> |
</tr> |
<tr> |
<td>getVisibleColumns</td> |
<td>-</td> |
<td>获取可见列。</td> |
</tr> |
<tr> |
<td>scrollTo</td> |
<td>value</td> |
<td>滚动到指定位置,单位为 px,设置 'bottom' 表示跳到最后。</td> |
</tr> |
<tr> |
<td>getScrollPosition</td> |
<td>none</td> |
<td>获取当前滚动条的位置,单位为 px。</td> |
</tr> |
<tr> |
<td>filterBy</td> |
<td>params</td> |
<td>(只能用于 client 端)过滤表格数据, 你可以通过过滤<code>{age: 10}</code>来显示 age 等于 10 的数据。</td> |
</tr> |
<tr> |
<td>selectPage</td> |
<td>page</td> |
<td>跳到指定的页。</td> |
</tr> |
<tr> |
<td>prevPage</td> |
<td>none</td> |
<td>跳到上一页。</td> |
</tr> |
<tr> |
<td>nextPage</td> |
<td>none</td> |
<td>跳到下一页。</td> |
</tr> |
<tr> |
<td>togglePagination</td> |
<td>none</td> |
<td>切换分页选项。</td> |
</tr> |
<tr> |
<td>toggleView</td> |
<td>none</td> |
<td>切换 card/table 视图</td> |
</tr> |
<tr> |
<td>expandRow</td> |
<td>index</td> |
<td>Expand the row that has the index passed by parameter if the detail view option is set to True.</td> |
</tr> |
<tr> |
<td>collapseRow</td> |
<td>index</td> |
<td>Collapse the row that has the index passed by parameter if the detail view option is set to True.</td> |
</tr> |
<tr> |
<td>expandAllRows</td> |
<td>is subtable</td> |
<td>Expand all rows if the detail view option is set to True.</td> |
</tr> |
<tr> |
<td>collapseAllRows</td> |
<td>is subtable</td> |
<td>Collapse all rows if the detail view option is set to True.</td> |
</tr> |
</tbody> |
</table> |
/pack-rat/003_pack_rat/pack-rat/node_modules/bootstrap-table/docs/_i18n/zh-cn/documentation/table-options.md |
@@ -0,0 +1,573 @@ |
# 表格参数 []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/documentation/table-options.md) |
|
--- |
|
表格的参数定义在 `jQuery.fn.bootstrapTable.defaults`。 |
|
<table class="table" |
id="t" |
data-search="true" |
data-show-toggle="true" |
data-show-columns="true" |
data-mobile-responsive="true"> |
<thead> |
<tr> |
<th>名称</th> |
<th>标签</th> |
<th>类型</th> |
<th>默认</th> |
<th>描述</th> |
</tr> |
</thead> |
<tbody> |
<tr> |
<td>-</td> |
<td>data-toggle</td> |
<td>String</td> |
<td>'table'</td> |
<td>不用写 JavaScript 直接启用表格。</td> |
</tr> |
<tr> |
<td>classes</td> |
<td>data-classes</td> |
<td>String</td> |
<td>'table table-hover'</td> |
<td>表格的类名称。默认情况下,表格是有边框的,你可以添加 'table-no-bordered' 来删除表格的边框样式。</td> |
</tr> |
<tr> |
<td>sortClass</td> |
<td>data-sort-class</td> |
<td>String</td> |
<td>undefined</td> |
<td>The class name of the td elements which are sorted.</td> |
</tr> |
<tr> |
<td>height</td> |
<td>data-height</td> |
<td>Number</td> |
<td>undefined</td> |
<td>定义表格的高度。</td> |
</tr> |
<tr> |
<td>undefinedText</td> |
<td>data-undefined-text</td> |
<td>String</td> |
<td>'-'</td> |
<td>当数据为 undefined 时显示的字符</td> |
</tr> |
<tr> |
<td>striped</td> |
<td>data-striped</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code> 会有隔行变色效果</td> |
</tr> |
<tr> |
<td>sortName</td> |
<td>data-sort-name</td> |
<td>String</td> |
<td>undefined</td> |
<td>定义排序列,通过url方式获取数据填写字段名,否则填写下标</td> |
</tr> |
<tr> |
<td>sortOrder</td> |
<td>data-sort-order</td> |
<td>String</td> |
<td>'asc'</td> |
<td>定义排序方式 'asc' 或者 'desc'</td> |
</tr> |
<tr> |
<td>sortStable</td> |
<td>data-sort-stable</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code> 将获得稳定的排序,我们会添加<code>_position</code>属性到 row 数据中。</td> |
</tr> |
<tr> |
<td>iconsPrefix</td> |
<td>data-icons-prefix</td> |
<td>String</td> |
<td>'glyphicon'</td> |
<td>定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome,并且配合 icons 属性实现效果<br> |
Glyphicon 集成于Bootstrap可免费使用 参考:<a href="http://glyphicons.com/">http://glyphicons.com/</a><br> |
FontAwesome 参考:<a href="http://fortawesome.github.io/">http://fortawesome.github.io/</a> |
</td> |
</tr> |
<tr> |
<td>icons</td> |
<td>data-icons</td> |
<td>Object</td> |
<td>{<br/> |
paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',<br/> |
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',<br/> |
refresh: 'glyphicon-refresh icon-refresh'<br/> |
toggle: 'glyphicon-list-alt icon-list-alt'<br/> |
columns: 'glyphicon-th icon-th'<br/> |
detailOpen: 'glyphicon-plus icon-plus'<br/> |
detailClose: 'glyphicon-minus icon-minus'<br/> |
}</td> |
<td>自定义图标</td> |
</tr> |
<tr> |
<td>columns</td> |
<td>-</td> |
<td>Array</td> |
<td>[]</td> |
<td>列配置项,详情请查看 列参数 表格. |
</td> |
</tr> |
<tr> |
<td>data</td> |
<td>-</td> |
<td>Array</td> |
<td>[]</td> |
<td>加载json格式的数据</td> |
</tr> |
<tr> |
<td>ajax</td> |
<td>data-ajax</td> |
<td>Function</td> |
<td>undefined</td> |
<td>自定义 AJAX 方法,须实现 jQuery AJAX API</td> |
</tr> |
<tr> |
<td>method</td> |
<td>data-method</td> |
<td>String</td> |
<td>'get'</td> |
<td>服务器数据的请求方式 'get' or 'post' </td> |
</tr> |
<tr> |
<td>url</td> |
<td>data-url</td> |
<td>String</td> |
<td>undefined</td> |
<td>服务器数据的加载地址</td> |
</tr> |
<tr> |
<td>cache</td> |
<td>data-cache</td> |
<td>Boolean</td> |
<td>true</td> |
<td>设置为 <code>false</code> 禁用 AJAX 数据缓存</td> |
</tr> |
<tr> |
<td>contentType</td> |
<td>data-content-type</td> |
<td>String</td> |
<td>'application/json'</td> |
<td>发送到服务器的数据编码类型</td> |
</tr> |
<tr> |
<td>dataType</td> |
<td>data-data-type</td> |
<td>String</td> |
<td>'json'</td> |
<td>服务器返回的数据类型</td> |
</tr> |
<tr> |
<td>ajaxOptions</td> |
<td>data-ajax-options</td> |
<td>Object</td> |
<td>{}</td> |
<td>提交ajax请求时的附加参数,可用参数列请查看<a href="http://api.jquery.com/jQuery.ajax">http://api.jquery.com/jQuery.ajax</a>.</td> |
</tr> |
<tr> |
<td>queryParams</td> |
<td>data-query-params</td> |
<td>Function</td> |
<td>function(params) {<br>return params;<br>}</td> |
<td> |
请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 |
如果 queryParamsType = 'limit' ,返回参数必须包含<br> |
limit, offset, search, sort, order |
否则, 需要包含: <br> |
pageSize, pageNumber, searchText, sortName, sortOrder. <br> |
返回false将会终止请求 |
</td> |
</tr> |
<tr> |
<td>queryParamsType</td> |
<td>data-query-params-type</td> |
<td>String</td> |
<td>'limit'</td> |
<td>设置为 'limit' 则会发送符合 RESTFul 格式的参数.</td> |
</tr> |
<tr> |
<td>responseHandler</td> |
<td>data-response-handler</td> |
<td>Function</td> |
<td>function(res) {<br>return res;<br>}</td> |
<td> |
加载服务器数据之前的处理程序,可以用来格式化数据。<br />参数:res为从服务器请求到的数据。 |
</td> |
</tr> |
<tr> |
<td>pagination</td> |
<td>data-pagination</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code> 会在表格底部显示分页条</td> |
</tr> |
<tr> |
<td>paginationLoop</td> |
<td>data-pagination-loop</td> |
<td>Boolean</td> |
<td>true</td> |
<td>设置为 <code>true</code> 启用分页条无限循环的功能。</td> |
</tr> |
<tr> |
<td>onlyInfoPagination</td> |
<td>data-only-info-pagination</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code> 只显示总数据数,而不显示分页按钮。需要 pagination='True'</td> |
</tr> |
<tr> |
<td>sidePagination</td> |
<td>data-side-pagination</td> |
<td>String</td> |
<td>'client'</td> |
<td>设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法</td> |
</tr> |
<tr> |
<td>pageNumber</td> |
<td>data-page-number</td> |
<td>Number</td> |
<td>1</td> |
<td>如果设置了分页,首页页码</td> |
</tr> |
<tr> |
<td>pageSize</td> |
<td>data-page-size</td> |
<td>Number</td> |
<td>10</td> |
<td>如果设置了分页,页面数据条数</td> |
</tr> |
<tr> |
<td>pageList</td> |
<td>data-page-list</td> |
<td>Array</td> |
<td>[10, 25, 50, 100, All]</td> |
<td>如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。</td> |
</tr> |
<tr> |
<td>selectItemName</td> |
<td>data-select-item-name</td> |
<td>String</td> |
<td>'btSelectItem'</td> |
<td>radio or checkbox 的字段名</td> |
</tr> |
<tr> |
<td>smartDisplay</td> |
<td>data-smart-display</td> |
<td>Boolean</td> |
<td>true</td> |
<td>True to display pagination or card view smartly.</td> |
</tr> |
<tr> |
<td>escape</td> |
<td>data-escape</td> |
<td>Boolean</td> |
<td>false</td> |
<td>转义HTML字符串,替换 <code>&</code>, <code><</code>, |
<code>></code>, <code>"</code>, <code>`</code>, 和 <code>'</code> 字符.</td> |
</tr> |
<tr> |
<td>search</td> |
<td>data-search</td> |
<td>Boolean</td> |
<td>false</td> |
<td>是否启用搜索框</td> |
</tr> |
<tr> |
<td>searchOnEnterKey</td> |
<td>data-search-on-enter-key</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code>时,按回车触发搜索方法,否则自动触发搜索方法</td> |
</tr> |
<tr> |
<td>strictSearch</td> |
<td>data-strict-search</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code>启用 全匹配搜索,否则为模糊搜索</td> |
</tr> |
<tr> |
<td>searchText</td> |
<td>data-search-text</td> |
<td>String</td> |
<td>''</td> |
<td>初始化搜索文字</td> |
</tr> |
<tr> |
<td>searchTimeOut</td> |
<td>data-search-time-out</td> |
<td>Number</td> |
<td>500</td> |
<td>设置搜索超时时间</td> |
</tr> |
<tr> |
<td>trimOnSearch</td> |
<td>data-trim-on-search</td> |
<td>Boolean</td> |
<td>true</td> |
<td>设置为 <code>true</code> 将允许空字符搜索</td> |
</tr |
<tr> |
<td>showHeader</td> |
<td>data-show-header</td> |
<td>Boolean</td> |
<td>true</td> |
<td>是否显示列头</td> |
</tr> |
<tr> |
<td>showFooter</td> |
<td>data-show-footer</td> |
<td>Boolean</td> |
<td>false</td> |
<td>是否显示列脚</td> |
</tr> |
<tr> |
<td>showColumns</td> |
<td>data-show-columns</td> |
<td>Boolean</td> |
<td>false</td> |
<td>是否显示 内容列下拉框</td> |
</tr> |
<tr> |
<td>showRefresh</td> |
<td>data-show-refresh</td> |
<td>Boolean</td> |
<td>false</td> |
<td>是否显示 刷新按钮</td> |
</tr> |
<tr> |
<td>showToggle</td> |
<td>data-show-toggle</td> |
<td>Boolean</td> |
<td>false</td> |
<td>是否显示 切换试图(table/card)按钮 |
</td> |
</tr> |
<tr> |
<td>showPaginationSwitch</td> |
<td>data-show-pagination-switch</td> |
<td>Boolean</td> |
<td>false</td> |
<td>是否显示 数据条数选择框</td> |
</tr> |
<tr> |
<td>minimumCountColumns</td> |
<td>data-minimum-count-columns</td> |
<td>Number</td> |
<td>1</td> |
<td>当列数小于此值时,将隐藏内容列下拉框。 |
</td> |
</tr> |
<tr> |
<td>idField</td> |
<td>data-id-field</td> |
<td>String</td> |
<td>undefined</td> |
<td>指定主键列</td> |
</tr> |
<tr> |
<td>uniqueId</td> |
<td>data-unique-id</td> |
<td>String</td> |
<td>undefined</td> |
<td>Indicate an unique identifier for each row.</td> |
</tr> |
<tr> |
<td>cardView</td> |
<td>data-card-view</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code>将显示card视图,适用于移动设备。否则为table试图,适用于pc</td> |
</tr> |
<tr> |
<td>detailView</td> |
<td>data-detail-view</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code> 可以显示详细页面模式。</td> |
</tr> |
<tr> |
<td>detailFormatter</td> |
<td>data-detail-formatter</td> |
<td>Function</td> |
<td>function(index, row) {<br>return '';<br>}</td> |
<td>格式化详细页面模式的视图。</td> |
</tr> |
<tr> |
<td>searchAlign</td> |
<td>data-search-align</td> |
<td>String</td> |
<td>'right'</td> |
<td>指定 搜索框 水平方向的位置。'left' or 'right'</td> |
</tr> |
<tr> |
<td>buttonsAlign</td> |
<td>data-buttons-align</td> |
<td>String</td> |
<td>'right'</td> |
<td>指定 按钮 水平方向的位置。'left' or 'right'</td> |
</tr> |
<tr> |
<td>toolbarAlign</td> |
<td>data-toolbar-align</td> |
<td>String</td> |
<td>'left'</td> |
<td>指定 toolbar 水平方向的位置。'left' or 'right'</td> |
</tr> |
<tr> |
<td>paginationVAlign</td> |
<td>data-pagination-v-align</td> |
<td>String</td> |
<td>'bottom'</td> |
<td>指定 分页条 在垂直方向的位置。'top' or 'bottom' or 'bonth'</td> |
</tr> |
<tr> |
<td>paginationHAlign</td> |
<td>data-pagination-h-align</td> |
<td>String</td> |
<td>'right'</td> |
<td>指定 分页条 在水平方向的位置。'left' or 'right'</td> |
</tr> |
<tr> |
<td>paginationDetailHAlign</td> |
<td>data-pagination-detail-h-align</td> |
<td>String</td> |
<td>'left'</td> |
<td>指定 分页详细信息 在水平方向的位置。'left' or 'right'</td> |
</tr> |
<tr> |
<td>paginationPreText</td> |
<td>data-pagination-pre-text</td> |
<td>String</td> |
<td>'<'</td> |
<td>指定分页条中上一页按钮的图标或文字</td> |
</tr> |
<tr> |
<td>paginationNextText</td> |
<td>data-pagination-next-text</td> |
<td>String</td> |
<td>'>'</td> |
<td>指定分页条中下一页按钮的图标或文字</td> |
</tr> |
<tr> |
<td>clickToSelect</td> |
<td>data-click-to-select</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置true 将在点击行时,自动选择rediobox 和 checkbox</td> |
</tr> |
<tr> |
<td>singleSelect</td> |
<td>data-single-select</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置True 将禁止多选</td> |
</tr> |
<tr> |
<td>toolbar</td> |
<td>data-toolbar</td> |
<td>String</td> |
<td>undefined</td> |
<td> |
一个jQuery 选择器,指明自定义的toolbar 例如:<br> |
#toolbar, .toolbar. |
</td> |
</tr> |
<tr> |
<td>checkboxHeader</td> |
<td>data-checkbox-header</td> |
<td>Boolean</td> |
<td>true</td> |
<td>设置false 将在列头隐藏check-all checkbox .</td> |
</tr> |
<tr> |
<td>maintainSelected</td> |
<td>data-maintain-selected</td> |
<td>Boolean</td> |
<td>false</td> |
<td>设置为 <code>true</code> 在点击分页按钮或搜索按钮时,将记住checkbox的选择项</td> |
</tr> |
<tr> |
<td>sortable</td> |
<td>data-sortable</td> |
<td>Boolean</td> |
<td>true</td> |
<td>设置为<code>false</code> 将禁止所有列的排序</td> |
</tr> |
<tr> |
<td>silentSort</td> |
<td>data-silent-sort</td> |
<td>Boolean</td> |
<td>true</td> |
<td>设置为 <code>false</code> 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 <code>server</code>时生效.</td> |
</tr> |
<tr> |
<td>rowStyle</td> |
<td>data-row-style</td> |
<td>Function</td> |
<td>function(row,index) {<br>return class;<br>}</td> |
<td> |
自定义行样式 参数为:<br> |
row: 行数据<br> |
index: 行下标<br> |
返回值可以为class或者css |
</td> |
</tr> |
<tr> |
<td>rowAttributes</td> |
<td>data-row-attributes</td> |
<td>Function</td> |
<td>function(row,index) {<br>return attributes;<br>}</td> |
<td> |
自定义行属性 参数为:<br> |
row: 行数据<br> |
index: 行下标<br> |
返回值可以为class或者css |
支持所有自定义属性 |
</td> |
</tr> |
<tr> |
<td>customSearch</td> |
<td>data-custom-search</td> |
<td>Function</td> |
<td>$.noop</td> |
<td> |
The custom search function is executed instead of built-in search function, takes one parameters: <br> |
text: the search text.<br> |
Example usage:<br> |
<pre> |
function customSearch(text) { |
//Search logic here. |
//You must use `this.data` array in order to filter the data. NO use `this.options.data`. |
} |
</pre> |
</td> |
</tr> |
<tr> |
<td>customSort</td> |
<td>data-custom-sort</td> |
<td>Function</td> |
<td>$.noop</td> |
<td> |
The custom sort function is executed instead of built-in sort function, takes two parameters: <br> |
sortName: the sort name.<br> |
sortOrder: the sort order.<br> |
Example usage:<br> |
<pre> |
function customSort(sortName, sortOrder) { |
//Sort logic here. |
//You must use `this.data` array in order to sort the data. NO use `this.options.data`. |
} |
</pre> |
</td> |
</tr> |
</tbody> |
</table> |