bootstrap-table.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. /**
  2. * @author zhixin wen <wenzhixin2010@gmail.com>
  3. * @version 0.0.1
  4. * @github https://github.com/wenzhixin/bootstrap-table
  5. * @blog http://wenzhixin.net.cn
  6. */
  7. (function($) {
  8. 'use strict';
  9. function Table($el, options) {
  10. this.$el = $el;
  11. this.options = options;
  12. }
  13. Table.prototype = {
  14. constructor: Table,
  15. init: function() {
  16. this.$el.addClass(this.options.class);
  17. this.$header = $('<thead></thead>');
  18. this.$el.append(this.$header);
  19. this.$body = $('<tbody></tbody>');
  20. this.$el.append(this.$body);
  21. this.initHeader();
  22. this.initBody();
  23. },
  24. initHeader: function() {
  25. var that = this,
  26. html = ['<tr>'];
  27. this.header = {
  28. fields: [],
  29. styles: [],
  30. formatters: []
  31. };
  32. $.each(this.options.columns, function(i, column) {
  33. var style = column.align ? 'text-align: ' + column.align + '; ': '';
  34. style += column.width ? 'width: ' + column.width + 'px; ': '';
  35. that.header.fields.push(column.field);
  36. that.header.styles.push(style);
  37. that.header.formatters.push(column.formatter);
  38. html.push('<th style="' + style + '">' + column.title + '</th>');
  39. });
  40. html.push('</tr>');
  41. this.$header.html(html.join(''));
  42. },
  43. initBody: function(data, append) {
  44. var that = this,
  45. html = [];
  46. $.each(data || this.options.data, function(i, item) {
  47. html.push('<tr>');
  48. $.each(that.header.fields, function(j, field) {
  49. var value = item[field];
  50. if (typeof that.header.formatters[j] === 'function') {
  51. value = that.header.formatters[j](value, item);
  52. }
  53. html.push('<td style="' + that.header.styles[j] + '">' + value + '</td>');
  54. });
  55. html.push('</tr>');
  56. });
  57. this.$body[append ? 'append' : 'html'](html.join(''));
  58. },
  59. load: function(data) {
  60. this.initBody(data);
  61. },
  62. append: function(data) {
  63. this.initBody(data, true);
  64. }
  65. };
  66. $.fn.bootstrapTable = function() {
  67. var option = arguments[0],
  68. args = arguments,
  69. value,
  70. allowedMethods = ['load', 'append'];
  71. this.each(function() {
  72. var $this = $(this),
  73. data = $this.data('bootstrapTable'),
  74. options = $.extend({}, $.fn.bootstrapTable.defaults, typeof option === 'object' && option);
  75. if (!data) {
  76. data = new Table($this, options);
  77. $this.data('bootstrapTable', data);
  78. }
  79. if (typeof option === 'string') {
  80. if ($.inArray(option, allowedMethods) < 0) {
  81. throw "Unknown method: " + option;
  82. }
  83. value = data[option](args[1]);
  84. } else {
  85. data.init();
  86. }
  87. });
  88. return value ? value : this;
  89. };
  90. $.fn.bootstrapTable.defaults = {
  91. class: 'table table-striped table-bordered',
  92. columns: [],
  93. data: []
  94. };
  95. })(jQuery);