bootstrap-table.js 31 KB

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