corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
20 office 1 # 表格参数 []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/documentation/table-options.md)
2  
3 ---
4  
5 表格的参数定义在 `jQuery.fn.bootstrapTable.defaults`。
6  
7 <table class="table"
8 id="t"
9 data-search="true"
10 data-show-toggle="true"
11 data-show-columns="true"
12 data-mobile-responsive="true">
13 <thead>
14 <tr>
15 <th>名称</th>
16 <th>标签</th>
17 <th>类型</th>
18 <th>默认</th>
19 <th>描述</th>
20 </tr>
21 </thead>
22 <tbody>
23 <tr>
24 <td>-</td>
25 <td>data-toggle</td>
26 <td>String</td>
27 <td>'table'</td>
28 <td>不用写 JavaScript 直接启用表格。</td>
29 </tr>
30 <tr>
31 <td>classes</td>
32 <td>data-classes</td>
33 <td>String</td>
34 <td>'table table-hover'</td>
35 <td>表格的类名称。默认情况下，表格是有边框的，你可以添加 'table-no-bordered' 来删除表格的边框样式。</td>
36 </tr>
37 <tr>
38 <td>sortClass</td>
39 <td>data-sort-class</td>
40 <td>String</td>
41 <td>undefined</td>
42 <td>The class name of the td elements which are sorted.</td>
43 </tr>
44 <tr>
45 <td>height</td>
46 <td>data-height</td>
47 <td>Number</td>
48 <td>undefined</td>
49 <td>定义表格的高度。</td>
50 </tr>
51 <tr>
52 <td>undefinedText</td>
53 <td>data-undefined-text</td>
54 <td>String</td>
55 <td>'-'</td>
56 <td>当数据为 undefined 时显示的字符</td>
57 </tr>
58 <tr>
59 <td>striped</td>
60 <td>data-striped</td>
61 <td>Boolean</td>
62 <td>false</td>
63 <td>设置为 <code>true</code> 会有隔行变色效果</td>
64 </tr>
65 <tr>
66 <td>sortName</td>
67 <td>data-sort-name</td>
68 <td>String</td>
69 <td>undefined</td>
70 <td>定义排序列,通过url方式获取数据填写字段名，否则填写下标</td>
71 </tr>
72 <tr>
73 <td>sortOrder</td>
74 <td>data-sort-order</td>
75 <td>String</td>
76 <td>'asc'</td>
77 <td>定义排序方式 'asc' 或者 'desc'</td>
78 </tr>
79 <tr>
80 <td>sortStable</td>
81 <td>data-sort-stable</td>
82 <td>Boolean</td>
83 <td>false</td>
84 <td>设置为 <code>true</code> 将获得稳定的排序，我们会添加<code>_position</code>属性到 row 数据中。</td>
85 </tr>
86 <tr>
87 <td>iconsPrefix</td>
88 <td>data-icons-prefix</td>
89 <td>String</td>
90 <td>'glyphicon'</td>
91 <td>定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome，并且配合 icons 属性实现效果<br>
92 Glyphicon 集成于Bootstrap可免费使用 参考：<a href="http://glyphicons.com/">http://glyphicons.com/</a><br>
93 FontAwesome 参考：<a href="http://fortawesome.github.io/">http://fortawesome.github.io/</a>
94 </td>
95 </tr>
96 <tr>
97 <td>icons</td>
98 <td>data-icons</td>
99 <td>Object</td>
100 <td>{<br/>
101 &nbsp;&nbsp;paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',<br/>
102 &nbsp;&nbsp;paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',<br/>
103 &nbsp;&nbsp;refresh: 'glyphicon-refresh icon-refresh'<br/>
104 &nbsp;&nbsp;toggle: 'glyphicon-list-alt icon-list-alt'<br/>
105 &nbsp;&nbsp;columns: 'glyphicon-th icon-th'<br/>
106 &nbsp;&nbsp;detailOpen: 'glyphicon-plus icon-plus'<br/>
107 &nbsp;&nbsp;detailClose: 'glyphicon-minus icon-minus'<br/>
108 }</td>
109 <td>自定义图标</td>
110 </tr>
111 <tr>
112 <td>columns</td>
113 <td>-</td>
114 <td>Array</td>
115 <td>[]</td>
116 <td>列配置项,详情请查看 列参数 表格.
117 </td>
118 </tr>
119 <tr>
120 <td>data</td>
121 <td>-</td>
122 <td>Array</td>
123 <td>[]</td>
124 <td>加载json格式的数据</td>
125 </tr>
126 <tr>
127 <td>ajax</td>
128 <td>data-ajax</td>
129 <td>Function</td>
130 <td>undefined</td>
131 <td>自定义 AJAX 方法,须实现 jQuery AJAX API</td>
132 </tr>
133 <tr>
134 <td>method</td>
135 <td>data-method</td>
136 <td>String</td>
137 <td>'get'</td>
138 <td>服务器数据的请求方式 'get' or 'post' </td>
139 </tr>
140 <tr>
141 <td>url</td>
142 <td>data-url</td>
143 <td>String</td>
144 <td>undefined</td>
145 <td>服务器数据的加载地址</td>
146 </tr>
147 <tr>
148 <td>cache</td>
149 <td>data-cache</td>
150 <td>Boolean</td>
151 <td>true</td>
152 <td>设置为 <code>false</code> 禁用 AJAX 数据缓存</td>
153 </tr>
154 <tr>
155 <td>contentType</td>
156 <td>data-content-type</td>
157 <td>String</td>
158 <td>'application/json'</td>
159 <td>发送到服务器的数据编码类型</td>
160 </tr>
161 <tr>
162 <td>dataType</td>
163 <td>data-data-type</td>
164 <td>String</td>
165 <td>'json'</td>
166 <td>服务器返回的数据类型</td>
167 </tr>
168 <tr>
169 <td>ajaxOptions</td>
170 <td>data-ajax-options</td>
171 <td>Object</td>
172 <td>{}</td>
173 <td>提交ajax请求时的附加参数，可用参数列请查看<a href="http://api.jquery.com/jQuery.ajax">http://api.jquery.com/jQuery.ajax</a>.</td>
174 </tr>
175 <tr>
176 <td>queryParams</td>
177 <td>data-query-params</td>
178 <td>Function</td>
179 <td>function(params) {<br>return params;<br>}</td>
180 <td>
181 请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数
182 如果 queryParamsType = 'limit' ,返回参数必须包含<br>
183 limit, offset, search, sort, order
184 否则, 需要包含: <br>
185 pageSize, pageNumber, searchText, sortName, sortOrder. <br>
186 返回false将会终止请求
187 </td>
188 </tr>
189 <tr>
190 <td>queryParamsType</td>
191 <td>data-query-params-type</td>
192 <td>String</td>
193 <td>'limit'</td>
194 <td>设置为 'limit' 则会发送符合 RESTFul 格式的参数.</td>
195 </tr>
196 <tr>
197 <td>responseHandler</td>
198 <td>data-response-handler</td>
199 <td>Function</td>
200 <td>function(res) {<br>return res;<br>}</td>
201 <td>
202 加载服务器数据之前的处理程序，可以用来格式化数据。<br />参数：res为从服务器请求到的数据。
203 </td>
204 </tr>
205 <tr>
206 <td>pagination</td>
207 <td>data-pagination</td>
208 <td>Boolean</td>
209 <td>false</td>
210 <td>设置为 <code>true</code> 会在表格底部显示分页条</td>
211 </tr>
212 <tr>
213 <td>paginationLoop</td>
214 <td>data-pagination-loop</td>
215 <td>Boolean</td>
216 <td>true</td>
217 <td>设置为 <code>true</code> 启用分页条无限循环的功能。</td>
218 </tr>
219 <tr>
220 <td>onlyInfoPagination</td>
221 <td>data-only-info-pagination</td>
222 <td>Boolean</td>
223 <td>false</td>
224 <td>设置为 <code>true</code> 只显示总数据数，而不显示分页按钮。需要 pagination='True'</td>
225 </tr>
226 <tr>
227 <td>sidePagination</td>
228 <td>data-side-pagination</td>
229 <td>String</td>
230 <td>'client'</td>
231 <td>设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法</td>
232 </tr>
233 <tr>
234 <td>pageNumber</td>
235 <td>data-page-number</td>
236 <td>Number</td>
237 <td>1</td>
238 <td>如果设置了分页，首页页码</td>
239 </tr>
240 <tr>
241 <td>pageSize</td>
242 <td>data-page-size</td>
243 <td>Number</td>
244 <td>10</td>
245 <td>如果设置了分页，页面数据条数</td>
246 </tr>
247 <tr>
248 <td>pageList</td>
249 <td>data-page-list</td>
250 <td>Array</td>
251 <td>[10, 25, 50, 100, All]</td>
252 <td>如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。</td>
253 </tr>
254 <tr>
255 <td>selectItemName</td>
256 <td>data-select-item-name</td>
257 <td>String</td>
258 <td>'btSelectItem'</td>
259 <td>radio or checkbox 的字段名</td>
260 </tr>
261 <tr>
262 <td>smartDisplay</td>
263 <td>data-smart-display</td>
264 <td>Boolean</td>
265 <td>true</td>
266 <td>True to display pagination or card view smartly.</td>
267 </tr>
268 <tr>
269 <td>escape</td>
270 <td>data-escape</td>
271 <td>Boolean</td>
272 <td>false</td>
273 <td>转义HTML字符串，替换 <code>&</code>, <code><</code>,
274 <code>></code>, <code>"</code>, <code>`</code>, 和 <code>'</code> 字符.</td>
275 </tr>
276 <tr>
277 <td>search</td>
278 <td>data-search</td>
279 <td>Boolean</td>
280 <td>false</td>
281 <td>是否启用搜索框</td>
282 </tr>
283 <tr>
284 <td>searchOnEnterKey</td>
285 <td>data-search-on-enter-key</td>
286 <td>Boolean</td>
287 <td>false</td>
288 <td>设置为 <code>true</code>时，按回车触发搜索方法，否则自动触发搜索方法</td>
289 </tr>
290 <tr>
291 <td>strictSearch</td>
292 <td>data-strict-search</td>
293 <td>Boolean</td>
294 <td>false</td>
295 <td>设置为 <code>true</code>启用 全匹配搜索，否则为模糊搜索</td>
296 </tr>
297 <tr>
298 <td>searchText</td>
299 <td>data-search-text</td>
300 <td>String</td>
301 <td>''</td>
302 <td>初始化搜索文字</td>
303 </tr>
304 <tr>
305 <td>searchTimeOut</td>
306 <td>data-search-time-out</td>
307 <td>Number</td>
308 <td>500</td>
309 <td>设置搜索超时时间</td>
310 </tr>
311 <tr>
312 <td>trimOnSearch</td>
313 <td>data-trim-on-search</td>
314 <td>Boolean</td>
315 <td>true</td>
316 <td>设置为 <code>true</code> 将允许空字符搜索</td>
317 </tr
318 <tr>
319 <td>showHeader</td>
320 <td>data-show-header</td>
321 <td>Boolean</td>
322 <td>true</td>
323 <td>是否显示列头</td>
324 </tr>
325 <tr>
326 <td>showFooter</td>
327 <td>data-show-footer</td>
328 <td>Boolean</td>
329 <td>false</td>
330 <td>是否显示列脚</td>
331 </tr>
332 <tr>
333 <td>showColumns</td>
334 <td>data-show-columns</td>
335 <td>Boolean</td>
336 <td>false</td>
337 <td>是否显示 内容列下拉框</td>
338 </tr>
339 <tr>
340 <td>showRefresh</td>
341 <td>data-show-refresh</td>
342 <td>Boolean</td>
343 <td>false</td>
344 <td>是否显示 刷新按钮</td>
345 </tr>
346 <tr>
347 <td>showToggle</td>
348 <td>data-show-toggle</td>
349 <td>Boolean</td>
350 <td>false</td>
351 <td>是否显示 切换试图（table/card）按钮
352 </td>
353 </tr>
354 <tr>
355 <td>showPaginationSwitch</td>
356 <td>data-show-pagination-switch</td>
357 <td>Boolean</td>
358 <td>false</td>
359 <td>是否显示 数据条数选择框</td>
360 </tr>
361 <tr>
362 <td>minimumCountColumns</td>
363 <td>data-minimum-count-columns</td>
364 <td>Number</td>
365 <td>1</td>
366 <td>当列数小于此值时，将隐藏内容列下拉框。
367 </td>
368 </tr>
369 <tr>
370 <td>idField</td>
371 <td>data-id-field</td>
372 <td>String</td>
373 <td>undefined</td>
374 <td>指定主键列</td>
375 </tr>
376 <tr>
377 <td>uniqueId</td>
378 <td>data-unique-id</td>
379 <td>String</td>
380 <td>undefined</td>
381 <td>Indicate an unique identifier for each row.</td>
382 </tr>
383 <tr>
384 <td>cardView</td>
385 <td>data-card-view</td>
386 <td>Boolean</td>
387 <td>false</td>
388 <td>设置为 <code>true</code>将显示card视图，适用于移动设备。否则为table试图，适用于pc</td>
389 </tr>
390 <tr>
391 <td>detailView</td>
392 <td>data-detail-view</td>
393 <td>Boolean</td>
394 <td>false</td>
395 <td>设置为 <code>true</code> 可以显示详细页面模式。</td>
396 </tr>
397 <tr>
398 <td>detailFormatter</td>
399 <td>data-detail-formatter</td>
400 <td>Function</td>
401 <td>function(index, row) {<br>return '';<br>}</td>
402 <td>格式化详细页面模式的视图。</td>
403 </tr>
404 <tr>
405 <td>searchAlign</td>
406 <td>data-search-align</td>
407 <td>String</td>
408 <td>'right'</td>
409 <td>指定 搜索框 水平方向的位置。'left' or 'right'</td>
410 </tr>
411 <tr>
412 <td>buttonsAlign</td>
413 <td>data-buttons-align</td>
414 <td>String</td>
415 <td>'right'</td>
416 <td>指定 按钮 水平方向的位置。'left' or 'right'</td>
417 </tr>
418 <tr>
419 <td>toolbarAlign</td>
420 <td>data-toolbar-align</td>
421 <td>String</td>
422 <td>'left'</td>
423 <td>指定 toolbar 水平方向的位置。'left' or 'right'</td>
424 </tr>
425 <tr>
426 <td>paginationVAlign</td>
427 <td>data-pagination-v-align</td>
428 <td>String</td>
429 <td>'bottom'</td>
430 <td>指定 分页条 在垂直方向的位置。'top' or 'bottom' or 'bonth'</td>
431 </tr>
432 <tr>
433 <td>paginationHAlign</td>
434 <td>data-pagination-h-align</td>
435 <td>String</td>
436 <td>'right'</td>
437 <td>指定 分页条 在水平方向的位置。'left' or 'right'</td>
438 </tr>
439 <tr>
440 <td>paginationDetailHAlign</td>
441 <td>data-pagination-detail-h-align</td>
442 <td>String</td>
443 <td>'left'</td>
444 <td>指定 分页详细信息 在水平方向的位置。'left' or 'right'</td>
445 </tr>
446 <tr>
447 <td>paginationPreText</td>
448 <td>data-pagination-pre-text</td>
449 <td>String</td>
450 <td>'&lt;'</td>
451 <td>指定分页条中上一页按钮的图标或文字</td>
452 </tr>
453 <tr>
454 <td>paginationNextText</td>
455 <td>data-pagination-next-text</td>
456 <td>String</td>
457 <td>'&gt;'</td>
458 <td>指定分页条中下一页按钮的图标或文字</td>
459 </tr>
460 <tr>
461 <td>clickToSelect</td>
462 <td>data-click-to-select</td>
463 <td>Boolean</td>
464 <td>false</td>
465 <td>设置true 将在点击行时，自动选择rediobox 和 checkbox</td>
466 </tr>
467 <tr>
468 <td>singleSelect</td>
469 <td>data-single-select</td>
470 <td>Boolean</td>
471 <td>false</td>
472 <td>设置True 将禁止多选</td>
473 </tr>
474 <tr>
475 <td>toolbar</td>
476 <td>data-toolbar</td>
477 <td>String</td>
478 <td>undefined</td>
479 <td>
480 一个jQuery 选择器，指明自定义的toolbar 例如:<br>
481 #toolbar, .toolbar.
482 </td>
483 </tr>
484 <tr>
485 <td>checkboxHeader</td>
486 <td>data-checkbox-header</td>
487 <td>Boolean</td>
488 <td>true</td>
489 <td>设置false 将在列头隐藏check-all checkbox .</td>
490 </tr>
491 <tr>
492 <td>maintainSelected</td>
493 <td>data-maintain-selected</td>
494 <td>Boolean</td>
495 <td>false</td>
496 <td>设置为 <code>true</code> 在点击分页按钮或搜索按钮时，将记住checkbox的选择项</td>
497 </tr>
498 <tr>
499 <td>sortable</td>
500 <td>data-sortable</td>
501 <td>Boolean</td>
502 <td>true</td>
503 <td>设置为<code>false</code> 将禁止所有列的排序</td>
504 </tr>
505 <tr>
506 <td>silentSort</td>
507 <td>data-silent-sort</td>
508 <td>Boolean</td>
509 <td>true</td>
510 <td>设置为 <code>false</code> 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 <code>server</code>时生效.</td>
511 </tr>
512 <tr>
513 <td>rowStyle</td>
514 <td>data-row-style</td>
515 <td>Function</td>
516 <td>function(row,index) {<br>return class;<br>}</td>
517 <td>
518 自定义行样式 参数为：<br>
519 row: 行数据<br>
520 index: 行下标<br>
521 返回值可以为class或者css
522 </td>
523 </tr>
524 <tr>
525 <td>rowAttributes</td>
526 <td>data-row-attributes</td>
527 <td>Function</td>
528 <td>function(row,index) {<br>return attributes;<br>}</td>
529 <td>
530 自定义行属性 参数为：<br>
531 row: 行数据<br>
532 index: 行下标<br>
533 返回值可以为class或者css
534 支持所有自定义属性
535 </td>
536 </tr>
537 <tr>
538 <td>customSearch</td>
539 <td>data-custom-search</td>
540 <td>Function</td>
541 <td>$.noop</td>
542 <td>
543 The custom search function is executed instead of built-in search function, takes one parameters: <br>
544 text: the search text.<br>
545 Example usage:<br>
546 <pre>
547 function customSearch(text) {
548 //Search logic here.
549 //You must use `this.data` array in order to filter the data. NO use `this.options.data`.
550 }
551 </pre>
552 </td>
553 </tr>
554 <tr>
555 <td>customSort</td>
556 <td>data-custom-sort</td>
557 <td>Function</td>
558 <td>$.noop</td>
559 <td>
560 The custom sort function is executed instead of built-in sort function, takes two parameters: <br>
561 sortName: the sort name.<br>
562 sortOrder: the sort order.<br>
563 Example usage:<br>
564 <pre>
565 function customSort(sortName, sortOrder) {
566 //Sort logic here.
567 //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
568 }
569 </pre>
570 </td>
571 </tr>
572 </tbody>
573 </table>