docs.js 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795
  1. $(function () {
  2. 'use strict';
  3. function initTables() {
  4. var cardView = false;
  5. if ($(window).width() < 640) {
  6. cardView = true;
  7. }
  8. $('#table, #column, #event, #method, #localization').bootstrapTable('destroy');
  9. var tableColumns = [
  10. {field: 'name', title: 'Name', sortable: true},
  11. {field: 'name', title: '名称', sortable: true, visible: false},
  12. {field: 'attribute', title: 'Attribute'},
  13. {field: 'attribute', title: '属性', visible: false},
  14. {field: 'type', title: 'Type'},
  15. {field: 'type', title: '类型', visible: false},
  16. {field: 'description', title: 'Description', align: 'left'},
  17. {field: 'description_zh', title: '描述', align: 'left', visible: false},
  18. {field: 'default', title: 'Default', align: 'left'},
  19. {field: 'default', title: '默认', align: 'left', visible: false},
  20. {field: 'example', title: '', valign: 'middle', formatter: function (value) {
  21. if (!value) {
  22. return '-';
  23. }
  24. return [
  25. '<a title="Example" href="examples.html#' + value + '">',
  26. '<i class="glyphicon glyphicon-eye-open"></i>',
  27. '</a>'].join('');
  28. }}
  29. ];
  30. var columnColumns = [
  31. {field: 'name', title: 'Name', width: 60, sortable: true},
  32. {field: 'name', title: '名称', width: 60, sortable: true, visible: false},
  33. {field: 'attribute', title: 'Attribute'},
  34. {field: 'attribute', title: '属性', visible: false},
  35. {field: 'type', title: 'Type', width: 60},
  36. {field: 'type', title: '类型', width: 60, visible: false},
  37. {field: 'description', title: 'Description', align: 'left', width: 400},
  38. {field: 'description_zh', title: '描述', align: 'left', width: 400, visible: false},
  39. {field: 'default', title: 'Default', align: 'left', width: 180},
  40. {field: 'default', title: '默认', align: 'left', width: 180, visible: false},
  41. {field: 'example', title: '', formatter: function (value) {
  42. if (!value) {
  43. return '-';
  44. }
  45. return [
  46. '<a title="Example" href="examples.html#' + value + '">',
  47. '<i class="glyphicon glyphicon-eye-open"></i>',
  48. '</a>'].join('');
  49. }}
  50. ];
  51. if (getLocale() === 'zh') {
  52. $.each([tableColumns, columnColumns], function (i, columns) {
  53. $.each(columns, function (j, row) {
  54. if (row.field === 'example') {
  55. return;
  56. }
  57. row.visible = typeof row.visible !== 'undefined';
  58. });
  59. });
  60. }
  61. $('#table').bootstrapTable({
  62. cardView: cardView,
  63. columns: tableColumns,
  64. data: [
  65. {
  66. name: '-',
  67. attribute: 'data-toggle',
  68. type: 'String',
  69. description: 'Activate bootstrap table without writing JavaScript.',
  70. description_zh: '不通过JavaScript的方式启动Bootstrap Table。',
  71. 'default': 'table',
  72. example: 'basic-table'
  73. },
  74. {
  75. name: 'classes',
  76. attribute: 'data-classes',
  77. type: 'String',
  78. description: 'The class name of table.',
  79. description_zh: '表格的类名。',
  80. 'default': 'table table-hover',
  81. example: 'classes-table'
  82. },
  83. {
  84. name: 'height',
  85. attribute: 'data-height',
  86. type: 'Number',
  87. description: 'The height of table.',
  88. description_zh: '表格的高度。',
  89. 'default': 'undefined',
  90. example: 'basic-table'
  91. },
  92. {
  93. name: 'undefinedText',
  94. attribute: 'data-undefined-text',
  95. type: 'String',
  96. description: 'Defines the default undefined text.',
  97. description_zh: '定义默认的undefined显示文字。',
  98. 'default': '-',
  99. example: ''
  100. },
  101. {
  102. name: 'striped',
  103. attribute: 'data-striped',
  104. type: 'Boolean',
  105. description: 'True to stripe the rows.',
  106. description_zh: '使表格带有条纹。',
  107. 'default': 'false',
  108. example: 'classes-table'
  109. },
  110. {
  111. name: 'sortName',
  112. attribute: 'data-sort-name',
  113. type: 'String',
  114. description: 'Defines which column can be sorted.',
  115. description_zh: '定义哪一列可被排序。',
  116. 'default': 'undefined',
  117. example: 'sort-table'
  118. },
  119. {
  120. name: 'sortOrder',
  121. attribute: 'data-sort-order',
  122. type: 'String',
  123. description: 'Defines the column sort order, can only be "asc" or "desc".',
  124. description_zh: '定义列排序的顺序,只能为“asc”和“desc”',
  125. 'default': 'asc',
  126. example: 'sort-table'
  127. },
  128. {
  129. name: 'columns',
  130. attribute: '-',
  131. type: 'Array',
  132. description: 'The table columns config object, see column properties for more details.',
  133. description_zh: '表格列的配置,详细见列属性。',
  134. 'default': '[]',
  135. example: 'via-javascript-table'
  136. },
  137. {
  138. name: 'data',
  139. attribute: '-',
  140. type: 'Array',
  141. description: 'The data to be loaded.',
  142. description_zh: '需要加载的数据。',
  143. 'default': '[]',
  144. example: 'table-methods'
  145. },
  146. {
  147. name: 'method',
  148. attribute: 'data-method',
  149. type: 'String',
  150. description: 'The method type to request remote data.',
  151. description_zh: '远程数据请求的方法。',
  152. 'default': 'get',
  153. example: 'basic-table'
  154. },
  155. {
  156. name: 'url',
  157. attribute: 'data-url',
  158. type: 'String',
  159. description: 'A URL to request data from remote site.',
  160. description_zh: '远程数据请求的URL地址。',
  161. 'default': 'undefined',
  162. example: 'basic-table'
  163. },
  164. {
  165. name: 'cache',
  166. attribute: 'data-cache',
  167. type: 'Boolean',
  168. description: 'False to disable caching of AJAX requests.',
  169. description_zh: '设置False禁用AJAX请求的缓存。',
  170. 'default': 'true',
  171. example: 'basic-table'
  172. },
  173. {
  174. name: 'contentType',
  175. attribute: 'data-content-type',
  176. type: 'String',
  177. description: 'The contentType of request remote data.',
  178. description_zh: '远程数据请求的“contentType”类型。',
  179. 'default': 'application/json',
  180. example: ''
  181. },
  182. {
  183. name: 'dataType',
  184. attribute: 'data-data-type',
  185. type: 'String',
  186. description: 'The type of data that you are expecting back from the server.',
  187. description_zh: '远程数据请求返回的数据类型。',
  188. 'default': 'json',
  189. example: ''
  190. },
  191. {
  192. name: 'queryParams',
  193. attribute: 'data-query-params',
  194. type: 'Function',
  195. description: 'When request remote data, sending additional parameters by format the queryParams, the parameters object contains: <br>pageSize, pageNumber, searchText, sortName, sortOrder. Return false to stop request',
  196. description_zh: '远程数据请求时,可以通过queryParams来格式化所需要的数据信息,参数(对象)包含了:<br>pageSize, pageNumber, searchText, sortName, sortOrder。返回 false 可以禁用请求。',
  197. 'default': 'function(params) {<br>return params;<br>}',
  198. example: 'server-side-pagination-table'
  199. },
  200. {
  201. name: 'queryParamsType',
  202. attribute: 'data-query-params-type',
  203. type: 'String',
  204. description: 'Set "limit" to send query params width RESTFul type.',
  205. description_zh: '设置为“limit”可以发送标准的RESTFul类型的参数请求。',
  206. 'default': 'limit',
  207. example: ''
  208. },
  209. {
  210. name: 'responseHandler',
  211. attribute: 'data-response-handler',
  212. type: 'Function',
  213. description: 'Before load remote data, handler the response data format, the parameters object contains: <br>res: the response data.',
  214. description_zh: '在加载数据前,可以对返回的数据进行处理,参数包含:<br>res: 返回的数据。',
  215. 'default': 'function(res) {<br>return res;<br>}',
  216. example: 'card-view'
  217. },
  218. {
  219. name: 'pagination',
  220. attribute: 'data-pagination',
  221. type: 'Boolean',
  222. description: 'True to show a pagination toolbar on table bottom.',
  223. description_zh: '设置True在表格底部显示分页工具栏。',
  224. 'default': 'false',
  225. example: 'pagination-table'
  226. },
  227. {
  228. name: 'sidePagination',
  229. attribute: 'data-side-pagination',
  230. type: 'String',
  231. description: 'Defines the side pagination of table, can only be "client" or "server".',
  232. description_zh: '定义表格分页的位置,只能是“client”(客户端)和“server”(服务器端)。',
  233. 'default': 'client',
  234. example: 'pagination-table'
  235. },
  236. // {
  237. // name: 'totalRows',
  238. // attribute: 'data-total-rows',
  239. // type: 'Number',
  240. // description: 'Defines the total rows of table, you need to set this option when the sidePagination option is set to "server".',
  241. // description_zh: '定义表格记录的总条数,在server端分页的时候需要设置该参数。',
  242. // 'default': 0,
  243. // example: ''
  244. // },
  245. {
  246. name: 'pageNumber',
  247. attribute: 'data-page-number',
  248. type: 'Number',
  249. description: 'When set pagination property, initialize the page number.',
  250. description_zh: '分页的时候设置当前的页码。',
  251. 'default': 1,
  252. example: 'via-javascript-table'
  253. },
  254. {
  255. name: 'pageSize',
  256. attribute: 'data-page-size',
  257. type: 'Number',
  258. description: 'When set pagination property, initialize the page size.',
  259. description_zh: '分页的时候设置每页的条数。',
  260. 'default': 10,
  261. example: 'via-javascript-table'
  262. },
  263. {
  264. name: 'pageList',
  265. attribute: 'data-page-list',
  266. type: 'Array',
  267. description: 'When set pagination property, initialize the page size selecting list.',
  268. description_zh: '分页的时候设置分页数的列表。',
  269. 'default': '[10, 25, 50, 100]',
  270. example: 'via-javascript-table'
  271. },
  272. {
  273. name: 'selectItemName',
  274. attribute: 'data-select-item-name',
  275. type: 'String',
  276. description: 'The name of radio or checkbox input.',
  277. description_zh: '单选框或者复选框的name,用于多个表格使用radio的情况。',
  278. 'default': 'btSelectItem',
  279. example: 'radio-table'
  280. },
  281. {
  282. name: 'smartDisplay',
  283. attribute: 'data-smart-display',
  284. type: 'Boolean',
  285. description: 'True to display pagination or card view smartly.',
  286. description_zh: '设置为True智能显示分页或者Card View。',
  287. 'default': 'true',
  288. example: ''
  289. },
  290. {
  291. name: 'search',
  292. attribute: 'data-search',
  293. type: 'Boolean',
  294. description: 'Enable the search input.',
  295. description_zh: '启用搜索输入框。',
  296. 'default': 'false',
  297. example: 'pagination-table'
  298. },
  299. {
  300. name: 'showHeader',
  301. attribute: 'data-show-header',
  302. type: 'Boolean',
  303. description: 'False to hide the table header.',
  304. description_zh: '设置为False可隐藏表头。',
  305. 'default': 'true',
  306. example: 'hide-header-table'
  307. },
  308. {
  309. name: 'showColumns',
  310. attribute: 'data-show-columns',
  311. type: 'Boolean',
  312. description: 'True to show the columns drop down list.',
  313. description_zh: '设置为True可显示表格显示/隐藏列表。',
  314. 'default': 'false',
  315. example: 'show-columns-table'
  316. },
  317. {
  318. name: 'showRefresh',
  319. attribute: 'data-show-refresh',
  320. type: 'Boolean',
  321. description: 'True to show the refresh button.',
  322. description_zh: '设置为True可显示刷新按钮。',
  323. 'default': 'false',
  324. example: 'basic-toolbar-table'
  325. },
  326. {
  327. name: 'showToggle',
  328. attribute: 'data-show-toggle',
  329. type: 'Boolean',
  330. description: 'True to show the toggle button to toggle table / card view.',
  331. description_zh: '设置为True可显示切换普通表格和名片(card)布局。',
  332. 'default': 'false',
  333. example: 'basic-toolbar-table'
  334. },
  335. {
  336. name: 'minimumCountColumns',
  337. attribute: 'data-minimum-count-columns',
  338. type: 'Number',
  339. description: 'The minimum count columns to hide of the columns drop down list.',
  340. description_zh: '表格显示/隐藏列表时可设置最小隐藏的列数。',
  341. 'default': '1',
  342. example: 'via-javascript-table'
  343. },
  344. {
  345. name: 'idField',
  346. attribute: 'data-id-field',
  347. type: 'String',
  348. description: 'Indicate which field is an identity field.',
  349. description_zh: '标识哪个字段为id主键。',
  350. 'default': 'undefined',
  351. example: ''
  352. },
  353. {
  354. name: 'cardView',
  355. attribute: 'data-card-view',
  356. type: 'Boolean',
  357. description: 'True to show card view table, for example mobile view.',
  358. description_zh: '设置为True时显示名片(card)布局,例如用手机浏览的时候。',
  359. 'default': 'false',
  360. example: 'card-view'
  361. },
  362. {
  363. name: 'searchAlign',
  364. attribute: 'data-search-align',
  365. type: 'String',
  366. description: 'Indicate how to align the search input. "left", "right" can be used.',
  367. description_zh: '定义搜索栏的对齐方式,只能为:"left", "right"。',
  368. 'default': 'right',
  369. example: ''
  370. },
  371. {
  372. name: 'toolbarAlign',
  373. attribute: 'data-toolbar-align',
  374. type: 'String',
  375. description: 'Indicate how to align the toolbar buttons. "left", "right" can be used.',
  376. description_zh: '定义工具栏按钮的对齐方式,只能为:"left", "right"。',
  377. 'default': 'right',
  378. example: ''
  379. },
  380. {
  381. name: 'clickToSelect',
  382. attribute: 'data-click-to-select',
  383. type: 'Boolean',
  384. description: 'True to select checkbox or radiobox when click rows.',
  385. description_zh: '设置为True时点击行即可选中单选/复选框。',
  386. 'default': 'false',
  387. example: 'table-select'
  388. },
  389. {
  390. name: 'singleSelect',
  391. attribute: 'data-single-select',
  392. type: 'Boolean',
  393. description: 'True to allow checkbox selecting only one row.',
  394. description_zh: '设置为True时复选框只能选择一条记录。',
  395. 'default': 'false',
  396. example: 'single-checkbox-table'
  397. },
  398. {
  399. name: 'toolbar',
  400. attribute: 'data-toolbar',
  401. type: 'String',
  402. description: 'A jQuery selector that indicate the toolbar, for example: <br>#toolbar, .toolbar.',
  403. description_zh: '设置jQuery元素为工具栏,例如:<br>#toolbar, .toolbar。',
  404. 'default': 'undefined',
  405. example: 'custom-toolbar-table'
  406. },
  407. {
  408. name: 'checkboxHeader',
  409. attribute: 'data-checkbox-header',
  410. type: 'Boolean',
  411. description: 'False to hide check-all checkbox in header row.',
  412. description_zh: '设置为False时隐藏表头中的全选复选框。',
  413. 'default': 'true',
  414. example: ''
  415. },
  416. {
  417. name: 'maintainSelected',
  418. attribute: 'data-maintain-selected',
  419. type: 'Boolean',
  420. description: 'True to maintain selected rows on change page and search.',
  421. description_zh: '设置为True当换页或者搜索时保持选中的行。',
  422. 'default': 'false',
  423. example: ''
  424. },
  425. {
  426. name: 'sortable',
  427. attribute: 'data-sortable',
  428. type: 'Boolean',
  429. description: 'False to disable sortable of all columns.',
  430. description_zh: '设置为False时禁用所有列的排序。',
  431. 'default': 'true',
  432. example: ''
  433. },
  434. {
  435. name: 'rowStyle',
  436. attribute: 'data-row-style',
  437. type: 'Function',
  438. description: 'The row style formatter function, take two parameters: <br>row: the row record data.<br>index: the row index.<br>Support classes or css.',
  439. description_zh: '行样式格式化方法,有两个参数:<br>row: 行记录的数据。<br>index: 行数据的 index。<br>支持 classes 或者 css.',
  440. 'default': '{}',
  441. example: 'classes-table'
  442. }
  443. ]
  444. });
  445. $('#column').bootstrapTable({
  446. cardView: cardView,
  447. columns: columnColumns,
  448. data: [
  449. {
  450. name: 'radio',
  451. attribute: 'data-radio',
  452. type: 'Boolean',
  453. description: 'True to show a radio. The radio column has fixed width.',
  454. description_zh: '设置为True显示单选框,单选框列有固定的宽度。',
  455. 'default': 'false',
  456. example: 'radio-table'
  457. },
  458. {
  459. name: 'checkbox',
  460. attribute: 'data-checkbox',
  461. type: 'Boolean',
  462. description: 'True to show a checkbox. The checkbox column has fixed width.',
  463. description_zh: '设置为True显示复选框,复选框列有固定的宽度。',
  464. 'default': 'false',
  465. example: 'checkbox-table'
  466. },
  467. {
  468. name: 'field',
  469. attribute: 'data-field',
  470. type: 'String',
  471. description: 'The column field name.',
  472. description_zh: '列标识名称。',
  473. 'default': 'undefined',
  474. example: 'via-javascript-table'
  475. },
  476. {
  477. name: 'title',
  478. attribute: 'data-title',
  479. type: 'String',
  480. description: 'The column title text.',
  481. description_zh: '表头标题。',
  482. 'default': 'undefined',
  483. example: 'via-javascript-table'
  484. },
  485. {
  486. name: 'class',
  487. attribute: 'class / data-class',
  488. type: 'String',
  489. description: 'The column class name.',
  490. description_zh: '列的类名称。',
  491. 'default': 'undefined',
  492. example: 'classes-table'
  493. },
  494. {
  495. name: 'align',
  496. attribute: 'data-align',
  497. type: 'String',
  498. description: 'Indicate how to align the column data. "left", "right", "center" can be used.',
  499. description_zh: '定义列的水平对齐方式,只能为:"left", "right" 和 "center"。',
  500. 'default': 'undefined',
  501. example: 'aligning-columns'
  502. },
  503. {
  504. name: 'halign',
  505. attribute: 'data-halign',
  506. type: 'String',
  507. description: 'Indicate how to align the table header. "left", "right", "center" can be used.',
  508. description_zh: '定义表头的水平对齐方式,只能为:"left", "right" 和 "center"。',
  509. 'default': 'undefined',
  510. example: 'aligning-columns'
  511. },
  512. {
  513. name: 'valign',
  514. attribute: 'data-valign',
  515. type: 'String',
  516. description: 'Indicate how to align the cell data. "top", "middle", "bottom" can be used.',
  517. description_zh: '定义列的垂直对齐方式,只能为:"top", "middle" 和 "bottom"。',
  518. 'default': 'undefined',
  519. example: 'via-javascript-table'
  520. },
  521. {
  522. name: 'width',
  523. attribute: 'data-width',
  524. type: 'Number',
  525. description: 'The width of column. If not defined, the width will auto expand to fit its contents.',
  526. description_zh: '列的宽度,假如没有定义,将根据内容自适应宽度。',
  527. 'default': 'undefined',
  528. example: ''
  529. },
  530. {
  531. name: 'sortable',
  532. attribute: 'data-sortable',
  533. type: 'Boolean',
  534. description: 'True to allow the column can be sorted.',
  535. description_zh: '设置为True允许对该列进行排序。',
  536. 'default': 'false',
  537. example: 'sort-table'
  538. },
  539. {
  540. name: 'order',
  541. attribute: 'data-order',
  542. type: 'String',
  543. description: 'The default sort order, can only be "asc" or "desc".',
  544. description_zh: '定义列排序的顺序,只能为“asc”和“desc”。',
  545. 'default': 'asc',
  546. example: 'sort-table'
  547. },
  548. {
  549. name: 'visible',
  550. attribute: 'data-visible',
  551. type: 'Boolean',
  552. description: 'False to hide the columns item.',
  553. description_zh: '设置为False隐藏该列。',
  554. 'default': 'true',
  555. example: 'show-columns-table'
  556. },
  557. {
  558. name: 'switchable',
  559. attribute: 'data-switchable',
  560. type: 'Boolean',
  561. description: 'False to disable the switchable of columns item.',
  562. description_zh: '设置为False禁用切换列的显示/隐藏。',
  563. 'default': 'true',
  564. example: 'show-columns-table'
  565. },
  566. {
  567. name: 'clickToSelect',
  568. attribute: 'data-click-to-select',
  569. type: 'Boolean',
  570. description: 'True to select checkbox or radiobox when the column is clicked.',
  571. description_zh: '设置为True时点击行即可选中单选/复选框。',
  572. 'default': 'true',
  573. example: 'via-javascript-table'
  574. },
  575. {
  576. name: 'formatter',
  577. attribute: 'data-formatter',
  578. type: 'Function',
  579. description: 'The cell formatter function, take three parameters: <br>value: the field value. <br>row: the row record data.<br>index: the row index.',
  580. description_zh: '列的格式化方法,包含3个参数:<br>value: 该单元格的数据。<br>row: 该行的数据。<br>index: 该行的index。',
  581. 'default': 'undefined',
  582. example: 'format-table'
  583. },
  584. {
  585. name: 'events',
  586. attribute: 'data-events',
  587. type: 'Object',
  588. description: '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.',
  589. description_zh: '当你使用格式化方式时,可以对该列的元素进行事件监听。包含三个参数:<br>event: jQuery 事件。<br>value: 该单元格的数据。<br>row: 该行的数据。<br>index: 该行的index。',
  590. 'default': 'undefined',
  591. example: 'column-events-table'
  592. },
  593. {
  594. name: 'sorter',
  595. attribute: 'data-sorter',
  596. type: 'Function',
  597. description: '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.',
  598. description_zh: '可对列进行自定义排序,包含两个参数:<br>a: 第一个值。<br> b: 第二个值。',
  599. 'default': 'undefined',
  600. example: 'custom-sort-table'
  601. },
  602. {
  603. name: 'cellStyle',
  604. attribute: 'data-cell-style',
  605. type: 'Function',
  606. description: '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>Support classes or css.',
  607. description_zh: '列样式格式化方法,有三个参数:<br>row: 行记录的数据。<br>value: 该单元格的数据。<br>index: 行数据的 index。<br>支持 classes 或者 css.',
  608. 'default': 'undefined',
  609. example: ''
  610. }
  611. ]
  612. });
  613. $('#event').bootstrapTable({
  614. cardView: cardView,
  615. columns: [
  616. {field: 'name', title: 'Option Event', width: 100, sortable: true},
  617. {field: 'event', title: 'jQuery Event', width: 100, sortable: true},
  618. {field: 'parameter', title: 'Parameter', width: 100, sortable: true},
  619. {field: 'description', title: 'Description', align: 'left', width: 400, sortable: true}
  620. ],
  621. data: [
  622. {
  623. name: 'onAll',
  624. event: 'all.bs.table',
  625. parameter: 'name, args',
  626. description: 'Fires when all events trigger, the parameters contains: <br>name: the event name, <br>args: the event data.'
  627. },
  628. {
  629. name: 'onClickRow',
  630. event: 'click-row.bs.table',
  631. parameter: 'row, $element',
  632. description: 'Fires when user click a row, the parameters contains: <br>row: the record corresponding to the clicked row, <br>$element: the tr element.'
  633. },
  634. {
  635. name: 'onDblClickRow',
  636. event: 'dbl-click-row.bs.table',
  637. parameter: 'row, $element',
  638. description: 'Fires when user click a row, the parameters contains: <br>row: the record corresponding to the clicked row, <br>$element: the tr element.'
  639. },
  640. {
  641. name: 'onSort',
  642. event: 'sort.bs.table',
  643. parameter: 'name, order',
  644. description: 'Fires when user sort a column, the parameters contains: <br>name: the sort column field name<br>order: the sort column order.'
  645. },
  646. {
  647. name: 'onCheck',
  648. event: 'check.bs.table',
  649. parameter: 'row',
  650. description: 'Fires when user check a row, the parameters contains: <br>row: the record corresponding to the clicked row.'
  651. },
  652. {
  653. name: 'onUncheck',
  654. event: 'uncheck.bs.table',
  655. parameter: 'row',
  656. description: 'Fires when user uncheck a row, the parameters contains: <br>row: the record corresponding to the clicked row.'
  657. },
  658. {
  659. name: 'onCheckAll',
  660. event: 'check-all.bs.table',
  661. parameter: 'none',
  662. description: 'Fires when user check all rows.'
  663. },
  664. {
  665. name: 'onUncheckAll',
  666. event: 'uncheck-all.bs.table',
  667. parameter: 'none',
  668. description: 'Fires when user uncheck all rows.'
  669. },
  670. {
  671. name: 'onLoadSuccess',
  672. event: 'load-success.bs.table',
  673. parameter: 'data',
  674. description: 'Fires when remote data is loaded successfully.'
  675. },
  676. {
  677. name: 'onLoadError',
  678. event: 'load-error.bs.table',
  679. parameter: 'status',
  680. description: 'Fires when some errors occur to load remote data.'
  681. },
  682. {
  683. name: 'onColumnSwitch',
  684. event: 'column-switch.bs.table',
  685. parameter: 'field, checked',
  686. description: 'Fires when switch the column visible.'
  687. },
  688. {
  689. name: 'onPageChange',
  690. event: 'page-change.bs.table',
  691. parameter: 'number, size',
  692. description: 'Fires when change the page number or page size.'
  693. },
  694. {
  695. name: 'onSearch',
  696. event: 'search.bs.table',
  697. parameter: 'text',
  698. description: 'Fires when search the table.'
  699. }
  700. ]
  701. });
  702. $('#method').bootstrapTable({
  703. cardView: cardView,
  704. columns: [
  705. {field: 'name', title: 'Name', width: 100},
  706. {field: 'parameter', title: 'Parameter', width: 100},
  707. {field: 'description', title: 'Description', align: 'left', width: 400}
  708. ]
  709. }).bootstrapTable('load', [
  710. {name: 'getSelections', parameter: 'none', description: 'Return all selected rows, when no record selected, am empty array will return.'},
  711. {name: 'getData', parameter: 'none', description: 'Get the loaded data of table.'},
  712. {name: 'load', parameter: 'data', description: 'Load the data to table, the old rows will be removed.'}
  713. ]).bootstrapTable('append', [
  714. {name: 'append', parameter: 'data', description: 'Append the data to table.'},
  715. {name: 'remove', parameter: 'params', description: 'Remove data from table, the params contains two properties: <br>field: the field name of remove rows. <br>values: the values of remove rows.'},
  716. {name: 'updateRow', parameter: 'params', description: 'Update the specified row, the param contains following properties: <br>index: the row index to be updated. <br>row: the new row data.'},
  717. {name: 'mergeCells', parameter: 'options', description: 'Merge some cells to one cell, the options contains following properties:'},
  718. {name: 'mergeCells', parameter: 'options', description: 'index: the row index.'},
  719. {name: 'mergeCells', parameter: 'options', description: 'field: the field name.'},
  720. {name: 'mergeCells', parameter: 'options', description: 'rowspan: the rowspan count to be merged.'},
  721. {name: 'mergeCells', parameter: 'options', description: 'colspan: the colspan count to be merged.'},
  722. {name: 'refresh', parameter: 'params', description: '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.'},
  723. {name: 'showLoading', parameter: 'none', description: 'Show loading status.'},
  724. {name: 'hideLoading', parameter: 'none', description: 'Hide loading status.'},
  725. {name: 'checkAll', parameter: 'none', description: 'Check all current page rows.'},
  726. {name: 'uncheckAll', parameter: 'none', description: 'Uncheck all current page rows.'},
  727. {name: 'resetView', parameter: 'params', description: 'Reset the bootstrap table view, for example reset the table height.'},
  728. {name: 'destroy', parameter: 'none', description: 'Destroy the bootstrap table.'},
  729. {name: 'showColumn', parameter: 'field', description: 'Show the specified column.'},
  730. {name: 'hideColumn', parameter: 'field', description: 'Hide the specified column.'}
  731. ]).bootstrapTable('mergeCells', {
  732. index: 6,
  733. field: 'name',
  734. rowspan: 5
  735. }).bootstrapTable('mergeCells', {
  736. index: 6,
  737. field: 'parameter',
  738. rowspan: 5
  739. });
  740. $('#localization').bootstrapTable({
  741. cardView: cardView,
  742. columns: [
  743. {field: 'name', title: 'Name', width: 100},
  744. {field: 'parameter', title: 'Parameter', width: 100},
  745. {field: 'default', title: 'Default', width: 200}
  746. ],
  747. data: [{
  748. name: 'formatLoadingMessage',
  749. parameter: '-',
  750. 'default': 'Loading, please wait…'
  751. }, {
  752. name: 'formatRecordsPerPage',
  753. parameter: 'pageNumber',
  754. 'default': '%s records per page'
  755. }, {
  756. name: 'formatShowingRows',
  757. parameter: 'pageFrom, pageTo, totalRows',
  758. 'default': 'Showing %s to %s of %s rows'
  759. }, {
  760. name: 'formatSearch',
  761. parameter: '-',
  762. 'default': 'Search'
  763. }, {
  764. name: 'formatNoMatches',
  765. parameter: '-',
  766. 'default': 'No matching records found'
  767. }, {
  768. name: 'formatRefresh',
  769. parameter: '-',
  770. 'default': 'Refresh'
  771. }, {
  772. name: 'formatToggle',
  773. parameter: '-',
  774. 'default': 'Toggle'
  775. }, {
  776. name: 'formatColumns',
  777. parameter: '-',
  778. 'default': 'Columns'
  779. }]
  780. });
  781. $('[title]').tooltip();
  782. }
  783. $(window).on('resize', initTables);
  784. initTables();
  785. });