bootstrap-table-template.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /**
  2. * 将BootstrapTable的行使用自定义的模板来渲染
  3. *
  4. * @author: karson
  5. * @version: v0.0.1
  6. *
  7. * @update 2017-06-24 <http://github.com/karsonzhang/fastadmin>
  8. */
  9. !function ($) {
  10. 'use strict';
  11. $.extend($.fn.bootstrapTable.defaults, {
  12. //是否启用模板渲染
  13. templateView: false,
  14. //数据格式化的模板ID或格式函数
  15. templateFormatter: "itemtpl",
  16. //添加的父类的class
  17. templateParentClass: "row row-flex",
  18. //向table添加的class
  19. templateTableClass: "table-template",
  20. });
  21. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  22. _initContainer = BootstrapTable.prototype.initContainer,
  23. _initBody = BootstrapTable.prototype.initBody,
  24. _initRow = BootstrapTable.prototype.initRow;
  25. BootstrapTable.prototype.initContainer = function () {
  26. _initContainer.apply(this, Array.prototype.slice.apply(arguments));
  27. var that = this;
  28. if (!that.options.templateView) {
  29. return;
  30. }
  31. that.options.cardView = true;
  32. };
  33. BootstrapTable.prototype.initBody = function () {
  34. var that = this;
  35. $.extend(that.options, {
  36. showHeader: !that.options.templateView ? $.fn.bootstrapTable.defaults.showHeader : false,
  37. showFooter: !that.options.templateView ? $.fn.bootstrapTable.defaults.showFooter : false,
  38. });
  39. $(that.$el).toggleClass(that.options.templateTableClass, that.options.templateView);
  40. _initBody.apply(this, Array.prototype.slice.apply(arguments));
  41. if (!that.options.templateView) {
  42. return;
  43. } else {
  44. //由于Bootstrap是基于Table的,添加一个父类容器
  45. $("> *:not(.no-records-found)", that.$body).wrapAll($("<div />").addClass(that.options.templateParentClass));
  46. }
  47. };
  48. BootstrapTable.prototype.initRow = function (item, i, data, parentDom) {
  49. var that = this;
  50. //如果未启用则使用原生的initRow方法
  51. if (!that.options.templateView) {
  52. return _initRow.apply(that, Array.prototype.slice.apply(arguments));
  53. }
  54. var $content = '';
  55. if (typeof that.options.templateFormatter === 'function') {
  56. $content = that.options.templateFormatter.call(that, item, i, data);
  57. } else {
  58. var Template = require('template');
  59. $content = Template(that.options.templateFormatter, {item: item, i: i, data: data});
  60. }
  61. return $content;
  62. };
  63. }(jQuery);