bootstrap-table.js 35 KB

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