bootstrap-table.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940
  1. /**
  2. * @author zhixin wen <wenzhixin2010@gmail.com>
  3. * version: 1.0.5
  4. * https://github.com/wenzhixin/bootstrap-table/
  5. */
  6. !function ($) {
  7. 'use strict';
  8. // TOOLS DEFINITION
  9. // ======================
  10. // it only does '%s', and return '' when arguments are undefined
  11. var sprintf = function(str) {
  12. var args = arguments,
  13. flag = true,
  14. i = 1;
  15. str = str.replace(/%s/g, function() {
  16. var arg = args[i++];
  17. if (typeof arg === 'undefined') {
  18. flag = false;
  19. return '';
  20. }
  21. return arg;
  22. });
  23. if (flag) {
  24. return str;
  25. }
  26. return '';
  27. };
  28. var getPropertyFromOther = function(list, from, to, value) {
  29. var result = '';
  30. $.each(list, function(i, item) {
  31. if (item[from] === value) {
  32. result = item[to];
  33. return false;
  34. }
  35. return true;
  36. });
  37. return result;
  38. };
  39. // BOOTSTRAP TABLE CLASS DEFINITION
  40. // ======================
  41. var BootstrapTable = function(el, options) {
  42. this.options = options;
  43. this.$el = $(el);
  44. this.$el_ = this.$el.clone();
  45. this.init();
  46. };
  47. BootstrapTable.DEFAULTS = {
  48. bootstrapVersion: 3,
  49. classes: 'table table-hover',
  50. height: undefined,
  51. undefinedText: '-',
  52. sortName: undefined,
  53. sortOrder: 'asc',
  54. striped: false,
  55. columns: [],
  56. data: [],
  57. method: 'get',
  58. url: undefined,
  59. contentType: 'application/json',
  60. queryParams: function(params) {return {};}, // pageSize, pageNumber, searchText
  61. pagination: false,
  62. sidePagination: 'client', // client or server
  63. totalRows: 0, // server side need to set
  64. pageNumber: 1,
  65. pageSize: 10,
  66. pageList: [10, 25, 50, 100],
  67. search: false,
  68. selectItemName: 'btSelectItem',
  69. showHeader: true,
  70. showColumns: false,
  71. idField: undefined,
  72. cardView: false,
  73. clickToSelect: false,
  74. singleSelect: false,
  75. toolbar: undefined,
  76. rowStyle: function(row, index) {return {};},
  77. formatLoadingMessage: function() {
  78. return 'Loading, please wait…';
  79. },
  80. formatRecordsPerPage: function(pageNumber) {
  81. return sprintf('%s records per page', pageNumber);
  82. },
  83. formatShowingRows: function(pageFrom, pageTo, totalRows) {
  84. return sprintf('Showing %s to %s of %s rows', pageFrom, pageTo, totalRows);
  85. },
  86. formatSearch: function() {
  87. return 'Search';
  88. },
  89. formatNoMatches: function() {
  90. return 'No matching records found';
  91. },
  92. onClickRow: function(item) {return false;},
  93. onSort: function(name, order) {return false;},
  94. onCheck: function(row) {return false;},
  95. onUncheck: function(row) {return false;},
  96. onCheckAll: function() {return false;},
  97. onUncheckAll: function() {return false;},
  98. onLoadSuccess: function(data) {return false;},
  99. onLoadError: function(status) {return false;},
  100. onBeforeLoad: function(res) {return res;}
  101. };
  102. BootstrapTable.COLUMN_DEFAULTS = {
  103. radio: false,
  104. checkbox: false,
  105. field: undefined,
  106. title: undefined,
  107. align: undefined, // left, right, center
  108. valign: undefined, // top, middle, bottom
  109. width: undefined,
  110. sortable: false,
  111. order: 'asc', // asc, desc
  112. visible: true,
  113. formatter: undefined,
  114. sorter: undefined
  115. };
  116. BootstrapTable.prototype.init = function() {
  117. this.initContainer();
  118. this.initHeader();
  119. this.initData();
  120. this.initToolbar();
  121. this.initPagination();
  122. this.initBody();
  123. this.initServer();
  124. };
  125. BootstrapTable.prototype.initContainer = function() {
  126. this.$container = $([
  127. '<div class="bootstrap-table">',
  128. '<div class="fixed-table-toolbar"></div>',
  129. '<div class="fixed-table-container">',
  130. '<div class="fixed-table-header"></div>',
  131. '<div class="fixed-table-body">',
  132. '<div class="fixed-table-loading">',
  133. this.options.formatLoadingMessage(),
  134. '</div>',
  135. '</div>',
  136. '<div class="fixed-table-pagination"></div>',
  137. '</div>',
  138. '</div>'].join(''));
  139. this.$container.insertAfter(this.$el);
  140. this.$container.find('.fixed-table-body').append(this.$el);
  141. this.$container.after('<div class="clearfix"></div>');
  142. this.$loading = this.$container.find('.fixed-table-loading');
  143. this.$el.addClass(this.options.classes);
  144. if (this.options.striped) {
  145. this.$el.addClass('table-striped');
  146. }
  147. };
  148. BootstrapTable.prototype.initHeader = function() {
  149. var that = this,
  150. columns = [],
  151. visibleColumns = [],
  152. html = [];
  153. this.$header = this.$el.find('thead');
  154. if (!this.$header.length) {
  155. this.$header = $('<thead></thead>').appendTo(this.$el);
  156. }
  157. if (!this.$header.find('tr').length) {
  158. this.$header.append('<tr></tr>');
  159. }
  160. this.$header.find('th').each(function() {
  161. var column = $.extend({}, {
  162. title: $(this).text()
  163. }, $(this).data());
  164. columns.push(column);
  165. });
  166. this.options.columns = $.extend(columns, this.options.columns);
  167. $.each(this.options.columns, function(i, column) {
  168. that.options.columns[i] = $.extend({}, BootstrapTable.COLUMN_DEFAULTS, column);
  169. });
  170. this.header = {
  171. fields: [],
  172. styles: [],
  173. formatters: [],
  174. sorters: []
  175. };
  176. $.each(this.options.columns, function(i, column) {
  177. var text = '',
  178. style = sprintf('text-align: %s; ', column.align) +
  179. sprintf('vertical-align: %s; ', column.valign),
  180. order = that.options.sortOrder || column.order;
  181. if (!column.visible) {
  182. return;
  183. }
  184. visibleColumns.push(column);
  185. that.header.fields.push(column.field);
  186. that.header.styles.push(style);
  187. that.header.formatters.push(column.formatter);
  188. that.header.sorters.push(column.sorter);
  189. style = sprintf('width: %spx; ', column.checkbox || column.radio ? 36 : column.width);
  190. style += column.sortable ? 'cursor: pointer; ' : '';
  191. html.push('<th' + sprintf(' style="%s"', style) + '>');
  192. html.push('<div class="th-inner">');
  193. text = column.title;
  194. if (that.options.sortName === column.field && column.sortable) {
  195. text += that.getCaretHtml();
  196. }
  197. if (column.checkbox && !that.options.singleSelect) {
  198. text = '<input name="btSelectAll" type="checkbox" class="checkbox" />';
  199. that.header.stateField = column.field;
  200. }
  201. if (column.radio) {
  202. text = '';
  203. that.header.stateField = column.field;
  204. }
  205. html.push(text);
  206. html.push('</div>');
  207. html.push('</th>');
  208. });
  209. this.$header.find('tr').html(html.join(''));
  210. this.$header.find('th').each(function(i) {
  211. $(this).data(visibleColumns[i]);
  212. if (visibleColumns[i].sortable) {
  213. $(this).off('click').on('click', $.proxy(that.onSort, that));
  214. }
  215. });
  216. if (!this.options.showHeader || this.options.cardView) {
  217. this.$header.hide();
  218. this.$container.find('.fixed-table-header').css('border-bottom', 'none');
  219. this.$container.find('.fixed-table-container').css('padding-top', 0);
  220. this.$loading.css('top', 0);
  221. }
  222. this.$selectAll = this.$header.find('[name="btSelectAll"]');
  223. this.$selectAll.off('click').on('click', function() {
  224. var checked = $(this).prop('checked');
  225. that[checked ? 'checkAll' : 'uncheckAll']();
  226. });
  227. };
  228. BootstrapTable.prototype.initData = function(data, append) {
  229. if (append) {
  230. this.data = this.data.concat(data);
  231. } else {
  232. this.data = data || this.options.data;
  233. }
  234. this.initSort();
  235. };
  236. BootstrapTable.prototype.initSort = function() {
  237. var name = this.options.sortName,
  238. order = this.options.sortOrder === 'desc' ? -1 : 1,
  239. index = $.inArray(this.options.sortName, this.header.fields);
  240. if (index !== -1) {
  241. var sorter = this.header.sorters[index];
  242. this.data.sort(function(a, b) {
  243. if (typeof sorter === 'function') {
  244. return order * sorter(a[name], b[name]);
  245. }
  246. if (typeof sorter === 'string') {
  247. return order * eval(sorter + '(a[name], b[name])'); // eval ?
  248. }
  249. if (a[name] === b[name]) {
  250. return 0;
  251. }
  252. if (a[name] < b[name]) {
  253. return order * -1;
  254. }
  255. return order;
  256. });
  257. }
  258. };
  259. BootstrapTable.prototype.onSort = function(event) {
  260. var $this = $(event.currentTarget);
  261. this.$header.find('span.order').remove();
  262. this.options.sortName = $this.data('field');
  263. this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';
  264. this.options.onSort(this.options.sortName, this.options.sortOrder);
  265. $this.data('order', this.options.sortOrder);
  266. $this.find('.th-inner').append(this.getCaretHtml());
  267. if (this.options.sidePagination === 'server') {
  268. this.initServer();
  269. return;
  270. }
  271. this.initSort();
  272. this.initBody();
  273. };
  274. BootstrapTable.prototype.initToolbar = function() {
  275. var that = this,
  276. html = [],
  277. timeoutId = 0,
  278. $keepOpen,
  279. $search;
  280. this.$toolbar = this.$container.find('.fixed-table-toolbar').html('');
  281. if (typeof this.options.toolbar === 'string') {
  282. $('<div class="bars pull-left"></div>')
  283. .appendTo(this.$toolbar)
  284. .append($(this.options.toolbar));
  285. }
  286. if (this.options.showColumns) {
  287. html = [];
  288. html.push('<div class="columns pull-right keep-open">',
  289. '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
  290. '<i class="glyphicon glyphicon-th icon-th"></i>',
  291. ' <span class="caret"></span>',
  292. '</button>',
  293. '<ul class="dropdown-menu" role="menu">');
  294. $.each(this.options.columns, function(i, column) {
  295. if (column.radio || column.checkbox) {
  296. return;
  297. }
  298. var checked = column.visible ? ' checked="checked"' : '';
  299. html.push(sprintf('<li>' +
  300. '<label><input type="checkbox" value="%s"%s> %s</label>' +
  301. '</li>', i, checked, column.title));
  302. });
  303. html.push('</ul>',
  304. '</div>');
  305. this.$toolbar.append(html.join(''));
  306. $keepOpen = this.$toolbar.find('.keep-open label');
  307. $keepOpen.off('click').on('click', function(event) {
  308. event.stopPropagation();
  309. var $this = $(this).find('input');
  310. that.options.columns[$this.val()].visible = $this.prop('checked');
  311. that.initHeader();
  312. that.initBody();
  313. });
  314. }
  315. if (this.options.search) {
  316. html = [];
  317. html.push(
  318. '<div class="pull-right search">',
  319. sprintf('<input class="form-control" type="text" placeholder="%s">',
  320. this.options.formatSearch()),
  321. '</div>');
  322. this.$toolbar.append(html.join(''));
  323. $search = this.$toolbar.find('.search input');
  324. $search.off('keyup').on('keyup', function(event) {
  325. clearTimeout(timeoutId); // doesn't matter if it's 0
  326. timeoutId = setTimeout($.proxy(that.onSearch, that), 500, event); // 500ms
  327. });
  328. }
  329. };
  330. BootstrapTable.prototype.onSearch = function(event) {
  331. var that = this,
  332. text = $(event.currentTarget).val();
  333. if (text === this.searchText) {
  334. return;
  335. }
  336. this.searchText = text;
  337. if (this.options.sidePagination !== 'server') {
  338. this.searchData = $.grep(this.data, function(item) {
  339. for (var key in item) {
  340. if (typeof item[key] === 'string' && item[key].indexOf(that.searchText) !== -1) {
  341. return true;
  342. }
  343. }
  344. return false;
  345. });
  346. }
  347. this.options.pageNumber = 1;
  348. this.updatePagination();
  349. };
  350. BootstrapTable.prototype.initPagination = function() {
  351. this.$pagination = this.$container.find('.fixed-table-pagination');
  352. if (!this.options.pagination) {
  353. return;
  354. }
  355. var that = this,
  356. html = [],
  357. i, from, to,
  358. $pageList,
  359. $first, $pre,
  360. $next, $last,
  361. $number,
  362. data = this.searchText ? this.searchData : this.data;
  363. if (this.options.sidePagination !== 'server') {
  364. this.options.totalRows = data.length;
  365. }
  366. this.totalPages = 0;
  367. if (this.options.totalRows) {
  368. this.totalPages = ~~((this.options.totalRows - 1) / this.options.pageSize) + 1;
  369. }
  370. if (this.totalPages > 0 && this.options.pageNumber > this.totalPages) {
  371. this.options.pageNumber = this.totalPages;
  372. }
  373. this.pageFrom = (this.options.pageNumber - 1) * this.options.pageSize + 1;
  374. this.pageTo = this.options.pageNumber * this.options.pageSize;
  375. if (this.pageTo > this.options.totalRows) {
  376. this.pageTo = this.options.totalRows;
  377. }
  378. html.push(
  379. '<div class="pull-left pagination-detail">',
  380. '<span class="pagination-info">',
  381. this.options.formatShowingRows(this.pageFrom, this.pageTo, this.options.totalRows),
  382. '</span>');
  383. html.push('<span class="page-list">');
  384. var pageNumber = [
  385. '<span class="btn-group dropup">',
  386. '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
  387. '<span class="page-size">',
  388. this.options.pageSize,
  389. '</span>',
  390. ' <span class="caret"></span>',
  391. '</button>',
  392. '<ul class="dropdown-menu" role="menu">'];
  393. $.each(this.options.pageList, function(i, page) {
  394. var active = page === that.options.pageSize ? ' class="active"' : '';
  395. pageNumber.push(sprintf('<li%s><a href="javascript:void(0)">%s</a></li>', active, page));
  396. });
  397. pageNumber.push('</ul></span>');
  398. html.push(this.options.formatRecordsPerPage(pageNumber.join('')));
  399. html.push('</span>');
  400. html.push('</div>',
  401. '<div class="pull-right">',
  402. '<ul class="pagination">',
  403. '<li class="page-first"><a href="javascript:void(0)">&lt;&lt;</a></li>',
  404. '<li class="page-pre"><a href="javascript:void(0)">&lt;</a></li>');
  405. if (this.totalPages < 5) {
  406. from = 1;
  407. to = this.totalPages;
  408. } else {
  409. from = this.options.pageNumber - 2;
  410. to = from + 4;
  411. if (from < 1) {
  412. from = 1;
  413. to = 5;
  414. }
  415. if (to > this.totalPages) {
  416. to = this.totalPages;
  417. from = to - 4;
  418. }
  419. }
  420. for (i = from; i <= to; i++) {
  421. html.push('<li class="page-number' + (i === this.options.pageNumber ? ' active' : '') + '">',
  422. '<a href="javascript:void(0)">', i ,'</a>',
  423. '</li>');
  424. }
  425. html.push(
  426. '<li class="page-next"><a href="javascript:void(0)">&gt;</a></li>',
  427. '<li class="page-last"><a href="javascript:void(0)">&gt;&gt;</a></li>',
  428. '</ul>',
  429. '</div>');
  430. this.$pagination.html(html.join(''));
  431. $pageList = this.$pagination.find('.page-list a');
  432. $first = this.$pagination.find('.page-first');
  433. $pre = this.$pagination.find('.page-pre');
  434. $next = this.$pagination.find('.page-next');
  435. $last = this.$pagination.find('.page-last');
  436. $number = this.$pagination.find('.page-number');
  437. if (this.options.pageNumber <= 1) {
  438. $first.addClass('disabled');
  439. $pre.addClass('disabled');
  440. }
  441. if (this.options.pageNumber >= this.totalPages) {
  442. $next.addClass('disabled');
  443. $last.addClass('disabled');
  444. }
  445. $pageList.off('click').on('click', $.proxy(this.onPageListChange, this));
  446. $first.off('click').on('click', $.proxy(this.onPageFirst, this));
  447. $pre.off('click').on('click', $.proxy(this.onPagePre, this));
  448. $next.off('click').on('click', $.proxy(this.onPageNext, this));
  449. $last.off('click').on('click', $.proxy(this.onPageLast, this));
  450. $number.off('click').on('click', $.proxy(this.onPageNumber, this));
  451. };
  452. BootstrapTable.prototype.updatePagination = function() {
  453. this.resetRows();
  454. this.initPagination();
  455. if (this.options.sidePagination === 'server') {
  456. this.initServer();
  457. } else {
  458. this.initBody();
  459. }
  460. };
  461. BootstrapTable.prototype.onPageListChange = function(event) {
  462. var $this = $(event.currentTarget);
  463. $this.parent().addClass('active').siblings().removeClass('active');
  464. this.options.pageSize = +$this.text();
  465. this.$toolbar.find('.page-size').text(this.options.pageSize);
  466. this.updatePagination();
  467. };
  468. BootstrapTable.prototype.onPageFirst = function() {
  469. this.options.pageNumber = 1;
  470. this.updatePagination();
  471. };
  472. BootstrapTable.prototype.onPagePre = function() {
  473. this.options.pageNumber--;
  474. this.updatePagination();
  475. };
  476. BootstrapTable.prototype.onPageNext = function() {
  477. this.options.pageNumber++;
  478. this.updatePagination();
  479. };
  480. BootstrapTable.prototype.onPageLast = function() {
  481. this.options.pageNumber = this.totalPages;
  482. this.updatePagination();
  483. };
  484. BootstrapTable.prototype.onPageNumber = function(event) {
  485. if (this.options.pageNumber === +$(event.currentTarget).text()) {
  486. return;
  487. }
  488. this.options.pageNumber = +$(event.currentTarget).text();
  489. this.updatePagination();
  490. };
  491. BootstrapTable.prototype.initBody = function() {
  492. var that = this,
  493. html = [],
  494. data = this.searchText ? this.searchData : this.data;
  495. this.$body = this.$el.find('tbody');
  496. if (!this.$body.length) {
  497. this.$body = $('<tbody></tbody>').appendTo(this.$el);
  498. }
  499. if (this.options.sidePagination === 'server') {
  500. data = this.data;
  501. }
  502. if (!this.options.pagination || this.options.sidePagination === 'server') {
  503. this.pageFrom = 1;
  504. this.pageTo = data.length;
  505. }
  506. for (var i = this.pageFrom - 1; i < this.pageTo; i++) {
  507. var item = data[i],
  508. style = {},
  509. csses = [];
  510. if (typeof this.options.rowStyle === 'function') {
  511. style = this.options.rowStyle(item, i);
  512. } else if (typeof this.options.rowStyle === 'string') {
  513. style = eval(this.options.rowStyle + '(item, i)');
  514. }
  515. if (style && style.css) {
  516. for (var key in style.css) {
  517. csses.push(key + ': ' + style.css[key]);
  518. }
  519. }
  520. html.push('<tr',
  521. sprintf(' class="%s"', style.classes),
  522. sprintf(' data-index="%s"', i),
  523. '>'
  524. );
  525. if (this.options.cardView) {
  526. html.push(sprintf('<td colspan="%s">', this.header.fields.length));
  527. }
  528. $.each(this.header.fields, function(j, field) {
  529. var text = '',
  530. value = item[field],
  531. type = '',
  532. style = sprintf('style="%s"', csses.concat(that.header.styles[j]).join('; '));
  533. if (typeof that.header.formatters[j] === 'function') {
  534. value = that.header.formatters[j](value, item, i);
  535. } else if (typeof that.header.formatters[j] === 'string') {
  536. value = eval(that.header.formatters[j] + '(value, item, i)'); // eval ?
  537. }
  538. if (that.options.columns[j].checkbox || that.options.columns[j].radio) {
  539. type = that.options.columns[j].checkbox ? 'checkbox' : type;
  540. type = that.options.columns[j].radio ? 'radio' : type;
  541. text = ['<td>',
  542. '<input class="checkbox"' +
  543. sprintf(' data-index="%s"', i) +
  544. sprintf(' name="%s"', that.options.selectItemName) +
  545. sprintf(' type="%s"', type) +
  546. sprintf(' value="%s"', item[that.options.idField]) +
  547. sprintf(' checked="%s"', value ? 'checked' : undefined) + ' />',
  548. '</td>'].join('');
  549. } else {
  550. value = typeof value === 'undefined' ? that.options.undefinedText : value;
  551. text = that.options.cardView ?
  552. ['<div class="card-view">',
  553. sprintf('<span class="title" %s>%s</span>', style,
  554. getPropertyFromOther(that.options.columns, 'field', 'title', field)),
  555. sprintf('<span class="value">%s</span>', value),
  556. '</div>'].join('') :
  557. [sprintf('<td %s>', style),
  558. value,
  559. '</td>'].join('');
  560. }
  561. html.push(text);
  562. });
  563. if (this.options.cardView) {
  564. html.push('</td>');
  565. }
  566. html.push('</tr>');
  567. }
  568. // show no records
  569. if (!html.length) {
  570. html.push('<tr class="no-records-found">',
  571. sprintf('<td colspan="%s">%s</td>', this.header.fields.length, this.options.formatNoMatches()),
  572. '</tr>');
  573. }
  574. this.$body.html(html.join(''));
  575. this.$container.find('.fixed-table-body').scrollTop(0);
  576. this.$body.find('tr').off('click').on('click', function() {
  577. that.options.onClickRow(that.data[$(this).data('index')]);
  578. if (that.options.clickToSelect) {
  579. $(this).find(sprintf('[name="%s"]', that.options.selectItemName)).trigger('click');
  580. }
  581. });
  582. this.$selectItem = this.$body.find(sprintf('[name="%s"]', this.options.selectItemName));
  583. this.$selectItem.off('click').on('click', function(event) {
  584. event.stopImmediatePropagation();
  585. var checkAll = that.$selectItem.length === that.$selectItem.filter(':checked').length,
  586. checked = $(this).prop('checked'),
  587. row = that.data[$(this).data('index')];
  588. that.$selectAll.prop('checked', checkAll);
  589. row[that.header.stateField] = checked;
  590. that.options[checked ? 'onCheck' : 'onUncheck'](row);
  591. if (that.options.singleSelect) {
  592. that.$selectItem.filter(':checked').not(this).each(function() {
  593. $(this).prop('checked', false);
  594. that.data[$(this).data('index')][that.header.stateField] = false;
  595. });
  596. }
  597. // $(this).parents('tr')[checked ? 'addClass' : 'removeClass']('selected');
  598. });
  599. this.resetView();
  600. };
  601. BootstrapTable.prototype.initServer = function() {
  602. var that = this,
  603. data = {};
  604. if (!this.options.url) {
  605. return;
  606. }
  607. this.$loading.show();
  608. if (typeof this.options.queryParams === 'function') {
  609. data = this.options.queryParams({
  610. pageSize: this.options.pageSize,
  611. pageNumber: this.options.pageNumber,
  612. searchText: this.searchText,
  613. sortName: this.options.sortName,
  614. sortOrder: this.options.sortOrder
  615. });
  616. } else if (typeof this.options.queryParams === 'string') {
  617. data = eval([this.options.queryParams,
  618. '({',
  619. 'pageSize: this.options.pageSize,',
  620. 'pageNumber: this.options.pageNumber,',
  621. 'searchText: this.searchText,',
  622. 'sortName: this.options.sortName,',
  623. 'sortOrder: this.options.sortOrder',
  624. '})'].join(''));
  625. }
  626. $.ajax({
  627. type: this.options.method,
  628. url: this.options.url,
  629. data: data,
  630. contentType: this.options.contentType,
  631. dataType: 'json',
  632. success: function(res) {
  633. var data = res;
  634. res = that.options.onBeforeLoad(res);
  635. if (that.options.sidePagination === 'server') {
  636. that.options.totalRows = res.total;
  637. data = res.rows;
  638. }
  639. that.load(data);
  640. that.options.onLoadSuccess(data);
  641. },
  642. error: function(res) {
  643. that.options.onLoadError(res.status);
  644. },
  645. complete: function() {
  646. that.$loading.hide();
  647. }
  648. });
  649. };
  650. BootstrapTable.prototype.getCaretHtml = function() {
  651. return ['<span class="order' + (this.options.sortOrder === 'desc' ? '' : ' dropup') + '">',
  652. '<span class="caret" style="margin: 10px 5px;"></span>',
  653. '</span>'].join('');
  654. };
  655. BootstrapTable.prototype.updateRows = function(checked) {
  656. var that = this;
  657. this.$selectItem.each(function() {
  658. that.data[$(this).data('index')][that.header.stateField] = checked;
  659. });
  660. };
  661. BootstrapTable.prototype.resetRows = function() {
  662. var that = this;
  663. $.each(this.data, function(i, row) {
  664. that.$selectAll.prop('checked', false);
  665. that.$selectItem.prop('checked', false);
  666. row[that.header.stateField] = false;
  667. });
  668. };
  669. // PUBLIC FUNCTION DEFINITION
  670. // =======================
  671. BootstrapTable.prototype.resetView = function() {
  672. var that = this,
  673. header = this.header;
  674. this.$selectAll.prop('checked', this.$selectItem.length > 0 &&
  675. this.$selectItem.length === this.$selectItem.filter(':checked').length);
  676. if (this.options.height) {
  677. var toolbarHeight = +this.$toolbar.children().outerHeight(true),
  678. paginationHeight = +this.$pagination.children().outerHeight(true),
  679. height = this.options.height - toolbarHeight - paginationHeight;
  680. this.$container.find('.fixed-table-container').css('height', height + 'px');
  681. }
  682. this.$header.find('.th-inner').each(function(i) {
  683. var width = $(this).parent().width();
  684. $(this).attr('style', header.styles[i])
  685. .css('position', 'absolute')
  686. .css('width', width + 'px'); // padding: 8px
  687. // fix th width display error
  688. if (that.options.bootstrapVersion === 3) {
  689. that.$body.find('tr:eq(0) td').eq(i).css('width', width + 'px');
  690. }
  691. });
  692. };
  693. BootstrapTable.prototype.load = function(data) {
  694. this.initData(data);
  695. this.initPagination();
  696. this.initBody();
  697. };
  698. BootstrapTable.prototype.append = function(data) {
  699. this.initData(data, true);
  700. this.initBody();
  701. };
  702. BootstrapTable.prototype.mergeCells = function(options) {
  703. var row = options.index,
  704. col = $.inArray(options.field, this.header.fields),
  705. rowspan = options.rowspan || 1,
  706. colspan = options.colspan || 1,
  707. i, j,
  708. $tr = this.$body.find('tr'),
  709. $td = $tr.eq(row).find('td').eq(col);
  710. if (row < 0 || col < 0 || row >= this.data.length) {
  711. return;
  712. }
  713. for (i = row; i < row + rowspan; i++) {
  714. for (j = col; j < col + colspan; j++) {
  715. $tr.eq(i).find('td').eq(j).hide();
  716. }
  717. }
  718. $td.attr('rowspan', rowspan).attr('colspan', colspan).show();
  719. };
  720. BootstrapTable.prototype.getSelections = function() {
  721. var that = this;
  722. return $.grep(this.data, function(row) {
  723. return row[that.header.stateField];
  724. });
  725. };
  726. BootstrapTable.prototype.checkAll = function() {
  727. this.$selectAll.prop('checked', true);
  728. this.$selectItem.prop('checked', true);
  729. this.updateRows(true);
  730. this.options.onCheckAll();
  731. };
  732. BootstrapTable.prototype.uncheckAll = function() {
  733. this.$selectAll.prop('checked', false);
  734. this.$selectItem.prop('checked', false);
  735. this.updateRows(false);
  736. this.options.onUncheckAll();
  737. };
  738. BootstrapTable.prototype.destroy = function() {
  739. var $toolbar = $(this.options.toolbar).clone(true, true);
  740. this.$container.next().remove();
  741. this.$container.replaceWith(this.$el_);
  742. $toolbar.insertBefore(this.$el_);
  743. return this.$el_;
  744. };
  745. BootstrapTable.prototype.showLoading = function() {
  746. this.$loading.show();
  747. };
  748. BootstrapTable.prototype.hideLoading = function() {
  749. this.$loading.hide();
  750. };
  751. BootstrapTable.prototype.refresh = function() {
  752. this.initServer();
  753. };
  754. // BOOTSTRAP TABLE PLUGIN DEFINITION
  755. // =======================
  756. $.fn.bootstrapTable = function(option, _relatedTarget) {
  757. var allowedMethods = [
  758. 'getSelections',
  759. 'load', 'append', 'mergeCells',
  760. 'checkAll', 'uncheckAll',
  761. 'destroy', 'resetView',
  762. 'showLoading', 'hideLoading',
  763. 'refresh'
  764. ],
  765. value;
  766. this.each(function() {
  767. var $this = $(this),
  768. data = $this.data('bootstrap.table'),
  769. options = $.extend({}, BootstrapTable.DEFAULTS, $this.data(), typeof option === 'object' && option);
  770. if (!data) {
  771. $this.data('bootstrap.table', (data = new BootstrapTable(this, options)));
  772. }
  773. if (typeof option === 'string') {
  774. if ($.inArray(option, allowedMethods) < 0) {
  775. throw "Unknown method: " + option;
  776. }
  777. value = data[option](_relatedTarget);
  778. }
  779. });
  780. return value ? value : this;
  781. };
  782. $.fn.bootstrapTable.Constructor = BootstrapTable;
  783. $.fn.bootstrapTable.defaults = BootstrapTable.DEFAULTS;
  784. $.fn.bootstrapTable.columnDefaults = BootstrapTable.COLUMN_DEFAULTS;
  785. // BOOTSTRAP TABLE INIT
  786. // =======================
  787. $(function() {
  788. $('[data-toggle="table"]').bootstrapTable();
  789. });
  790. }(jQuery);