table.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. UE.parse.register('table', function (utils) {
  2. var me = this,
  3. root = this.root,
  4. tables = root.getElementsByTagName('table');
  5. if (tables.length) {
  6. var selector = this.selector;
  7. //追加默认的表格样式
  8. utils.cssRule('table',
  9. selector + ' table.noBorderTable td,' +
  10. selector + ' table.noBorderTable th,' +
  11. selector + ' table.noBorderTable caption{border:1px dashed #ddd !important}' +
  12. selector + ' table.sortEnabled tr.firstRow th,' + selector + ' table.sortEnabled tr.firstRow td{padding-right:20px; background-repeat: no-repeat;' +
  13. 'background-position: center right; background-image:url(' + this.rootPath + 'themes/default/images/sortable.png);}' +
  14. selector + ' table.sortEnabled tr.firstRow th:hover,' + selector + ' table.sortEnabled tr.firstRow td:hover{background-color: #EEE;}' +
  15. selector + ' table{margin-bottom:10px;border-collapse:collapse;display:table;}' +
  16. selector + ' td,' + selector + ' th{ background:white; padding: 5px 10px;border: 1px solid #DDD;}' +
  17. selector + ' caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +
  18. selector + ' th{border-top:1px solid #BBB;background:#F7F7F7;}' +
  19. selector + ' table tr.firstRow th{border-top:2px solid #BBB;background:#F7F7F7;}' +
  20. selector + ' tr.ue-table-interlace-color-single td{ background: #fcfcfc; }' +
  21. selector + ' tr.ue-table-interlace-color-double td{ background: #f7faff; }' +
  22. selector + ' td p{margin:0;padding:0;}',
  23. document);
  24. //填充空的单元格
  25. utils.each('td th caption'.split(' '), function (tag) {
  26. var cells = root.getElementsByTagName(tag);
  27. cells.length && utils.each(cells, function (node) {
  28. if (!node.firstChild) {
  29. node.innerHTML = ' ';
  30. }
  31. })
  32. });
  33. //表格可排序
  34. var tables = root.getElementsByTagName('table');
  35. utils.each(tables, function (table) {
  36. if (/\bsortEnabled\b/.test(table.className)) {
  37. utils.on(table, 'click', function(e){
  38. var target = e.target || e.srcElement,
  39. cell = findParentByTagName(target, ['td', 'th']);
  40. var table = findParentByTagName(target, 'table'),
  41. colIndex = utils.indexOf(table.rows[0].cells, cell),
  42. sortType = table.getAttribute('data-sort-type');
  43. if(colIndex != -1) {
  44. sortTable(table, colIndex, me.tableSortCompareFn || sortType);
  45. updateTable(table);
  46. }
  47. });
  48. }
  49. });
  50. //按照标签名查找父节点
  51. function findParentByTagName(target, tagNames) {
  52. var i, current = target;
  53. tagNames = utils.isArray(tagNames) ? tagNames:[tagNames];
  54. while(current){
  55. for(i = 0;i < tagNames.length; i++) {
  56. if(current.tagName == tagNames[i].toUpperCase()) return current;
  57. }
  58. current = current.parentNode;
  59. }
  60. return null;
  61. }
  62. //表格排序
  63. function sortTable(table, sortByCellIndex, compareFn) {
  64. var rows = table.rows,
  65. trArray = [],
  66. flag = rows[0].cells[0].tagName === "TH",
  67. lastRowIndex = 0;
  68. for (var i = 0,len = rows.length; i < len; i++) {
  69. trArray[i] = rows[i];
  70. }
  71. var Fn = {
  72. 'reversecurrent': function(td1,td2){
  73. return 1;
  74. },
  75. 'orderbyasc': function(td1,td2){
  76. var value1 = td1.innerText||td1.textContent,
  77. value2 = td2.innerText||td2.textContent;
  78. return value1.localeCompare(value2);
  79. },
  80. 'reversebyasc': function(td1,td2){
  81. var value1 = td1.innerHTML,
  82. value2 = td2.innerHTML;
  83. return value2.localeCompare(value1);
  84. },
  85. 'orderbynum': function(td1,td2){
  86. var value1 = td1[utils.isIE ? 'innerText':'textContent'].match(/\d+/),
  87. value2 = td2[utils.isIE ? 'innerText':'textContent'].match(/\d+/);
  88. if(value1) value1 = +value1[0];
  89. if(value2) value2 = +value2[0];
  90. return (value1||0) - (value2||0);
  91. },
  92. 'reversebynum': function(td1,td2){
  93. var value1 = td1[utils.isIE ? 'innerText':'textContent'].match(/\d+/),
  94. value2 = td2[utils.isIE ? 'innerText':'textContent'].match(/\d+/);
  95. if(value1) value1 = +value1[0];
  96. if(value2) value2 = +value2[0];
  97. return (value2||0) - (value1||0);
  98. }
  99. };
  100. //对表格设置排序的标记data-sort-type
  101. table.setAttribute('data-sort-type', compareFn && typeof compareFn === "string" && Fn[compareFn] ? compareFn:'');
  102. //th不参与排序
  103. flag && trArray.splice(0, 1);
  104. trArray = sort(trArray,function (tr1, tr2) {
  105. var result;
  106. if (compareFn && typeof compareFn === "function") {
  107. result = compareFn.call(this, tr1.cells[sortByCellIndex], tr2.cells[sortByCellIndex]);
  108. } else if (compareFn && typeof compareFn === "number") {
  109. result = 1;
  110. } else if (compareFn && typeof compareFn === "string" && Fn[compareFn]) {
  111. result = Fn[compareFn].call(this, tr1.cells[sortByCellIndex], tr2.cells[sortByCellIndex]);
  112. } else {
  113. result = Fn['orderbyasc'].call(this, tr1.cells[sortByCellIndex], tr2.cells[sortByCellIndex]);
  114. }
  115. return result;
  116. });
  117. var fragment = table.ownerDocument.createDocumentFragment();
  118. for (var j = 0, len = trArray.length; j < len; j++) {
  119. fragment.appendChild(trArray[j]);
  120. }
  121. var tbody = table.getElementsByTagName("tbody")[0];
  122. if(!lastRowIndex){
  123. tbody.appendChild(fragment);
  124. }else{
  125. tbody.insertBefore(fragment,rows[lastRowIndex- range.endRowIndex + range.beginRowIndex - 1])
  126. }
  127. }
  128. //冒泡排序
  129. function sort(array, compareFn){
  130. compareFn = compareFn || function(item1, item2){ return item1.localeCompare(item2);};
  131. for(var i= 0,len = array.length; i<len; i++){
  132. for(var j = i,length = array.length; j<length; j++){
  133. if(compareFn(array[i], array[j]) > 0){
  134. var t = array[i];
  135. array[i] = array[j];
  136. array[j] = t;
  137. }
  138. }
  139. }
  140. return array;
  141. }
  142. //更新表格
  143. function updateTable(table) {
  144. //给第一行设置firstRow的样式名称,在排序图标的样式上使用到
  145. if(!utils.hasClass(table.rows[0], "firstRow")) {
  146. for(var i = 1; i< table.rows.length; i++) {
  147. utils.removeClass(table.rows[i], "firstRow");
  148. }
  149. utils.addClass(table.rows[0], "firstRow");
  150. }
  151. }
  152. }
  153. });