header.js 7.0 KB

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