header.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. window.sort=require('../utilities/sort');
  2. window.Header = function getHeader(object) {
  3. this.object = object;
  4. this._header = object.el || '#header';
  5. this._column = object.column;
  6. this._data = object.data;
  7. this._restorationColumn = object.restorationColumn;
  8. this._fixedTop = object.fixedTop || 0;
  9. let _this = this;
  10. let _parentNode = $(_this._header);
  11. let sortType = {};
  12. let columnArr = [];
  13. // form fixed
  14. let _headerParent = $(_this._header+"Parent");
  15. let _parentNodeTemp = _parentNode.clone();
  16. function fixed() {
  17. let _parentNode_top = _parentNode.offset().top;
  18. let height = _parentNode.height();
  19. _parentNodeTemp.css('position',"fixed");
  20. _parentNodeTemp.css('top',_this._fixedTop+"px");
  21. _parentNodeTemp.css('z-index',"1030");
  22. _parentNodeTemp.css('width',_headerParent.width()+"px");
  23. _parentNodeTemp.height(height);
  24. _parentNodeTemp.attr('id',_this._header+"Temp");
  25. $(_this._header+"Roll").append(_parentNodeTemp);
  26. $(window).scroll(function(){
  27. let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  28. if (scrollTop > _parentNode_top) {
  29. $(_this._header+"Roll").removeClass('d-none');
  30. } else {
  31. $(_this._header+"Roll").addClass('d-none');
  32. }
  33. });
  34. }
  35. /**
  36. * column :{customization : null || bool --是否自定义
  37. * dom : null || element --自定义元素
  38. * style : null || string --样式
  39. * name : null || string --字段名,英文
  40. * value : string --列名
  41. * neglect : null || bool --是否忽略排序
  42. * }
  43. * */
  44. function append() {
  45. _this._column.forEach(function (column) {
  46. if (column.customization){
  47. _parentNode.append(column.dom);
  48. }else{
  49. let _td = "<th id='sort_"+column.name+"' style='";
  50. if(!column.neglect){
  51. _td += "cursor: pointer;"
  52. }
  53. if (column.style) _td += column.style;
  54. _td += "'>";
  55. if(!column.neglect){
  56. _td += "<span class='fa fa-sort'></span>";
  57. }
  58. _td += column.value;
  59. _td += "</th>";
  60. _parentNode.append(_td);
  61. let column_dom = $('#sort_'+column.name);
  62. let column_dom_temp = column_dom.clone();
  63. column_dom_temp.attr('id','#sort_'+column.name+"_temp");
  64. column_dom_temp.width(column_dom.width());
  65. _parentNodeTemp.append(column_dom_temp);
  66. if (!column.neglect){
  67. let rule=function () {
  68. if (!sortType[column.name]){
  69. sortType[column.name] = 'asc';
  70. columnArr.push(column.name);
  71. column_dom.removeClass('fa-sort').addClass('fa-sort-asc');
  72. column_dom_temp.removeClass('fa-sort').addClass('fa-sort-asc');
  73. let columnArrTemp = [];
  74. columnArrTemp.push.apply(columnArrTemp,columnArr);
  75. window.sort.sort(_this._data,columnArrTemp,sortType);
  76. return ;
  77. }
  78. if (sortType[column.name] === 'asc'){
  79. sortType[column.name] = 'desc';
  80. column_dom.removeClass('fa-sort-asc').addClass('fa-sort-desc');
  81. column_dom_temp.removeClass('fa-sort-asc').addClass('fa-sort-desc');
  82. let columnArrTemp = [];
  83. columnArrTemp.push.apply(columnArrTemp,columnArr);
  84. window.sort.sort(_this._data,columnArrTemp,sortType);
  85. return ;
  86. }
  87. if (sortType[column.name] === 'desc'){
  88. delete sortType[column.name];
  89. columnArr.some(function (name, index) {
  90. if (name === column.name){
  91. columnArr.splice(index,1);
  92. return true;
  93. }
  94. });
  95. column_dom.removeClass('fa-sort-desc').addClass('fa-sort');
  96. column_dom_temp.removeClass('fa-sort-desc').addClass('fa-sort');
  97. if (columnArr.length === 0){
  98. //希尔排序
  99. let arr = [];
  100. arr.push.apply(arr,_this._data);
  101. let len = arr.length;
  102. for(let gap = Math.floor(len / 2); gap > 0; gap = Math.floor(gap / 2)) {
  103. for(let i = gap; i < len; i++) {
  104. let j = i;
  105. let current = arr[i];
  106. while(j - gap >= 0 && current[_this._restorationColumn] < arr[j - gap][_this._restorationColumn]) {
  107. arr[j] = arr[j - gap];
  108. j = j - gap;
  109. }
  110. arr[j] = current;
  111. }
  112. }
  113. //插入排序
  114. /*let preIndex, current;
  115. for(let i = 1; i < len; i++) {
  116. preIndex = i - 1;
  117. current = arr[i];
  118. while(preIndex >= 0 && arr[preIndex][_this._restorationColumn] > current[_this._restorationColumn]) {
  119. arr[preIndex + 1] = arr[preIndex];
  120. preIndex--;
  121. }
  122. arr[preIndex + 1] = current;
  123. }*/
  124. _this._data.length = 0;
  125. _this._data.push.apply(_this._data,arr);
  126. return;
  127. }
  128. let columnArrTemp = [];
  129. columnArrTemp.push.apply(columnArrTemp,columnArr);
  130. window.sort.sort(_this._data,columnArrTemp,sortType);
  131. return ;
  132. }
  133. };
  134. column_dom.on('click',rule);
  135. column_dom_temp.on('click',rule);
  136. }
  137. }
  138. });
  139. }
  140. this.init = function() {
  141. append();
  142. fixed();
  143. }
  144. };