Grid.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. let defaultName = '_def_';
  2. export default class Grid {
  3. constructor(Dcat) {
  4. Dcat.grid = this;
  5. this.selectors = {};
  6. }
  7. // 添加行选择器对象
  8. addSelector(selector, name) {
  9. this.selectors[name || defaultName] = selector
  10. }
  11. // 获取行选择器选中的ID字符串
  12. selected(name) {
  13. return this.selectors[name || defaultName].getSelectedKeys()
  14. }
  15. // 获取行选择器选中的行
  16. selectedRows(name) {
  17. return this.selectors[name || defaultName].getSelectedRows()
  18. }
  19. async(options) {
  20. return new AsyncGrid(options);
  21. }
  22. }
  23. class AsyncGrid {
  24. constructor(options) {
  25. options = $.extend({
  26. selector: null,
  27. bodySelector: '.async-body',
  28. tableSelector: '.async-table',
  29. queryName: null,
  30. url: null,
  31. loadingStyle: 'height:240px;',
  32. }, options);
  33. var self = this,
  34. $box = $(options.selector),
  35. $body = $box.find(options.bodySelector);
  36. self.options = options;
  37. self.$box = $box;
  38. self.$body = $body;
  39. self.loading = false;
  40. }
  41. render(url) {
  42. let self = this, options = self.options;
  43. url = url || options.url;
  44. if (self.loading || url.indexOf('javascript:') !== -1) {
  45. return;
  46. }
  47. self.loading = true;
  48. let $box = self.$box,
  49. $body = self.$body,
  50. reqName = options.queryName,
  51. tableSelector = options.tableSelector;
  52. // loading效果
  53. let loadingOptions = {background: 'transparent'}
  54. if ($body.find(`${tableSelector} tbody tr`).length <= 2) {
  55. loadingOptions['style'] = options.loadingStyle;
  56. }
  57. $body.find(tableSelector).loading(loadingOptions);
  58. Dcat.NP.start();
  59. if (url.indexOf('?') === -1) {
  60. url += '?';
  61. }
  62. if (url.indexOf(reqName) === -1) {
  63. url += '&'+reqName+'=1';
  64. }
  65. history.pushState({}, '', url.replace(reqName+'=1', ''));
  66. $box.data('current', url);
  67. Dcat.helpers.asyncRender(url, function (html) {
  68. self.loading = false;
  69. Dcat.NP.done();
  70. $body.html(html);
  71. let refresh = function () {
  72. self.render($box.data('current'));
  73. };
  74. // 表格渲染事件
  75. $body.off('grid:render').on('grid:render', refresh);
  76. $body.find('table').on('grid:render', refresh);
  77. // 刷新按钮
  78. $box.find('.grid-refresh').off('click').on('click', function () {
  79. refresh();
  80. return false;
  81. });
  82. // 分页
  83. $box.find('.pagination .page-link').on('click', loadLink);
  84. // 页选择器
  85. $box.find('.per-pages-selector .dropdown-item a').on('click', loadLink);
  86. // 表头url
  87. $box.find('.grid-column-header a').on('click', loadLink);
  88. // 快捷搜索、表头搜索以及过滤器筛选
  89. $box.find('form').off('submit').on('submit', function () {
  90. var action = $(this).attr('action');
  91. if ($(this).attr('method') === 'post') {
  92. return;
  93. }
  94. if (action.indexOf('?') === -1) {
  95. action += '?';
  96. }
  97. self.render(action+'&'+$(this).serialize());
  98. return false;
  99. });
  100. $box.find('.filter-box .reset').on('click', loadLink);
  101. // 规格选择器
  102. $box.find('.grid-selector a').on('click', loadLink);
  103. });
  104. function loadLink() {
  105. self.render($(this).attr('href'));
  106. return false;
  107. }
  108. }
  109. }