bootstrap-table-demo.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. /*!
  2. * Remark (http://getbootstrapadmin.com/remark)
  3. * Copyright 2015 amazingsurge
  4. * Licensed under the Themeforest Standard Licenses
  5. */
  6. function cellStyle(value, row, index) {
  7. var classes = ['active', 'success', 'info', 'warning', 'danger'];
  8. if (index % 2 === 0 && index / 2 < classes.length) {
  9. return {
  10. classes: classes[index / 2]
  11. };
  12. }
  13. return {};
  14. }
  15. function rowStyle(row, index) {
  16. var classes = ['active', 'success', 'info', 'warning', 'danger'];
  17. if (index % 2 === 0 && index / 2 < classes.length) {
  18. return {
  19. classes: classes[index / 2]
  20. };
  21. }
  22. return {};
  23. }
  24. function scoreSorter(a, b) {
  25. if (a > b) return 1;
  26. if (a < b) return -1;
  27. return 0;
  28. }
  29. function nameFormatter(value) {
  30. return value + '<i class="icon wb-book" aria-hidden="true"></i> ';
  31. }
  32. function starsFormatter(value) {
  33. return '<i class="icon wb-star" aria-hidden="true"></i> ' + value;
  34. }
  35. function queryParams() {
  36. return {
  37. type: 'owner',
  38. sort: 'updated',
  39. direction: 'desc',
  40. per_page: 100,
  41. page: 1
  42. };
  43. }
  44. function buildTable($el, cells, rows) {
  45. var i, j, row,
  46. columns = [],
  47. data = [];
  48. for (i = 0; i < cells; i++) {
  49. columns.push({
  50. field: '字段' + i,
  51. title: '单元' + i
  52. });
  53. }
  54. for (i = 0; i < rows; i++) {
  55. row = {};
  56. for (j = 0; j < cells; j++) {
  57. row['字段' + j] = 'Row-' + i + '-' + j;
  58. }
  59. data.push(row);
  60. }
  61. $el.bootstrapTable('destroy').bootstrapTable({
  62. columns: columns,
  63. data: data,
  64. iconSize: 'outline',
  65. icons: {
  66. columns: 'glyphicon-list'
  67. }
  68. });
  69. }
  70. (function(document, window, $) {
  71. 'use strict';
  72. // Example Bootstrap Table From Data
  73. // ---------------------------------
  74. (function() {
  75. var bt_data = [{
  76. "Tid": "1",
  77. "First": "奔波儿灞",
  78. "sex": "男",
  79. "Score": "50"
  80. }, {
  81. "Tid": "2",
  82. "First": "灞波儿奔",
  83. "sex": "男",
  84. "Score": "94"
  85. }, {
  86. "Tid": "3",
  87. "First": "作家崔成浩",
  88. "sex": "男",
  89. "Score": "80"
  90. }, {
  91. "Tid": "4",
  92. "First": "韩寒",
  93. "sex": "男",
  94. "Score": "67"
  95. }, {
  96. "Tid": "5",
  97. "First": "郭敬明",
  98. "sex": "男",
  99. "Score": "100"
  100. }, {
  101. "Tid": "6",
  102. "First": "马云",
  103. "sex": "男",
  104. "Score": "77"
  105. }, {
  106. "Tid": "7",
  107. "First": "范爷",
  108. "sex": "女",
  109. "Score": "87"
  110. }];
  111. $('#exampleTableFromData').bootstrapTable({
  112. data: bt_data,
  113. // mobileResponsive: true,
  114. height: "250"
  115. });
  116. })();
  117. // Example Bootstrap Table Columns
  118. // -------------------------------
  119. (function() {
  120. $('#exampleTableColumns').bootstrapTable({
  121. url: "js/demo/bootstrap_table_test.json",
  122. height: "400",
  123. iconSize: 'outline',
  124. showColumns: true,
  125. icons: {
  126. refresh: 'glyphicon-repeat',
  127. toggle: 'glyphicon-list-alt',
  128. columns: 'glyphicon-list'
  129. }
  130. });
  131. })();
  132. // Example Bootstrap Table Large Columns
  133. // -------------------------------------
  134. buildTable($('#exampleTableLargeColumns'), 50, 50);
  135. // Example Bootstrap Table Toolbar
  136. // -------------------------------
  137. (function() {
  138. $('#exampleTableToolbar').bootstrapTable({
  139. url: "js/demo/bootstrap_table_test2.json",
  140. search: true,
  141. showRefresh: true,
  142. showToggle: true,
  143. showColumns: true,
  144. toolbar: '#exampleToolbar',
  145. iconSize: 'outline',
  146. icons: {
  147. refresh: 'glyphicon-repeat',
  148. toggle: 'glyphicon-list-alt',
  149. columns: 'glyphicon-list'
  150. }
  151. });
  152. })();
  153. // Example Bootstrap Table Events
  154. // ------------------------------
  155. (function() {
  156. $('#exampleTableEvents').bootstrapTable({
  157. url: "js/demo/bootstrap_table_test.json",
  158. search: true,
  159. pagination: true,
  160. showRefresh: true,
  161. showToggle: true,
  162. showColumns: true,
  163. iconSize: 'outline',
  164. toolbar: '#exampleTableEventsToolbar',
  165. icons: {
  166. refresh: 'glyphicon-repeat',
  167. toggle: 'glyphicon-list-alt',
  168. columns: 'glyphicon-list'
  169. }
  170. });
  171. var $result = $('#examplebtTableEventsResult');
  172. $('#exampleTableEvents').on('all.bs.table', function(e, name, args) {
  173. console.log('Event:', name, ', data:', args);
  174. })
  175. .on('click-row.bs.table', function(e, row, $element) {
  176. $result.text('Event: click-row.bs.table');
  177. })
  178. .on('dbl-click-row.bs.table', function(e, row, $element) {
  179. $result.text('Event: dbl-click-row.bs.table');
  180. })
  181. .on('sort.bs.table', function(e, name, order) {
  182. $result.text('Event: sort.bs.table');
  183. })
  184. .on('check.bs.table', function(e, row) {
  185. $result.text('Event: check.bs.table');
  186. })
  187. .on('uncheck.bs.table', function(e, row) {
  188. $result.text('Event: uncheck.bs.table');
  189. })
  190. .on('check-all.bs.table', function(e) {
  191. $result.text('Event: check-all.bs.table');
  192. })
  193. .on('uncheck-all.bs.table', function(e) {
  194. $result.text('Event: uncheck-all.bs.table');
  195. })
  196. .on('load-success.bs.table', function(e, data) {
  197. $result.text('Event: load-success.bs.table');
  198. })
  199. .on('load-error.bs.table', function(e, status) {
  200. $result.text('Event: load-error.bs.table');
  201. })
  202. .on('column-switch.bs.table', function(e, field, checked) {
  203. $result.text('Event: column-switch.bs.table');
  204. })
  205. .on('page-change.bs.table', function(e, size, number) {
  206. $result.text('Event: page-change.bs.table');
  207. })
  208. .on('search.bs.table', function(e, text) {
  209. $result.text('Event: search.bs.table');
  210. });
  211. })();
  212. })(document, window, jQuery);