crm/public/static/ueditor/_parse/table.js

UE.parse.register("table", function(utils) {
  var me = this,
    root = this.root,
    tables = root.getElementsByTagName("table");
  if (tables.length) {
    var selector = this.selector;
    //追加默认的表格样式
    utils.cssRule(
      "table",
      selector +
        " table.noBorderTable td," +
        selector +
        " table.noBorderTable th," +
        selector +
        " table.noBorderTable caption{border:1px dashed #ddd !important}" +
        selector +
        " table.sortEnabled tr.firstRow th," +
        selector +
        " table.sortEnabled tr.firstRow td{padding-right:20px; background-repeat: no-repeat;" +
        "background-position: center right; background-image:url(" +
        this.rootPath +
        "themes/default/images/sortable.png);}" +
        selector +
        " table.sortEnabled tr.firstRow th:hover," +
        selector +
        " table.sortEnabled tr.firstRow td:hover{background-color: #EEE;}" +
        selector +
        " table{margin-bottom:10px;border-collapse:collapse;display:table;}" +
        selector +
        " td," +
        selector +
        " th{padding: 5px 10px;border: 1px solid #DDD;}" +
        selector +
        " caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}" +
        selector +
        " th{border-top:1px solid #BBB;background:#F7F7F7;}" +
        selector +
        " table tr.firstRow th{border-top:2px solid #BBB;background:#F7F7F7;}" +
        selector +
        " tr.ue-table-interlace-color-single td{ background: #fcfcfc; }" +
        selector +
        " tr.ue-table-interlace-color-double td{ background: #f7faff; }" +
        selector +
        " td p{margin:0;padding:0;width:auto;height:auto;}",
      document
    );
    //填充空的单元格

    utils.each("td th caption".split(" "), function(tag) {
      var cells = root.getElementsByTagName(tag);
      cells.length &&
        utils.each(cells, function(node) {
          if (!node.firstChild) {
            node.innerHTML = " ";
          }
        });
    });

    //表格可排序
    var tables = root.getElementsByTagName("table");
    utils.each(tables, function(table) {
      if (/\bsortEnabled\b/.test(table.className)) {
        utils.on(table, "click", function(e) {
          var target = e.target || e.srcElement,
            cell = findParentByTagName(target, ["td", "th"]);
          var table = findParentByTagName(target, "table"),
            colIndex = utils.indexOf(table.rows[0].cells, cell),
            sortType = table.getAttribute("data-sort-type");
          if (colIndex != -1) {
            sortTable(table, colIndex, me.tableSortCompareFn || sortType);
            updateTable(table);
          }
        });
      }
    });

    //按照标签名查找父节点
    function findParentByTagName(target, tagNames) {
      var i,
        current = target;
      tagNames = utils.isArray(tagNames) ? tagNames : [tagNames];
      while (current) {
        for (i = 0; i < tagNames.length; i++) {
          if (current.tagName == tagNames[i].toUpperCase()) return current;
        }
        current = current.parentNode;
      }
      return null;
    }
    //表格排序
    function sortTable(table, sortByCellIndex, compareFn) {
      var rows = table.rows,
        trArray = [],
        flag = rows[0].cells[0].tagName === "TH",
        lastRowIndex = 0;

      for (var i = 0, len = rows.length; i < len; i++) {
        trArray[i] = rows[i];
      }

      var Fn = {
        reversecurrent: function(td1, td2) {
          return 1;
        },
        orderbyasc: function(td1, td2) {
          var value1 = td1.innerText || td1.textContent,
            value2 = td2.innerText || td2.textContent;
          return value1.localeCompare(value2);
        },
        reversebyasc: function(td1, td2) {
          var value1 = td1.innerHTML,
            value2 = td2.innerHTML;
          return value2.localeCompare(value1);
        },
        orderbynum: function(td1, td2) {
          var value1 = td1[utils.isIE ? "innerText" : "textContent"].match(
            /\d+/
          ),
            value2 = td2[utils.isIE ? "innerText" : "textContent"].match(/\d+/);
          if (value1) value1 = +value1[0];
          if (value2) value2 = +value2[0];
          return (value1 || 0) - (value2 || 0);
        },
        reversebynum: function(td1, td2) {
          var value1 = td1[utils.isIE ? "innerText" : "textContent"].match(
            /\d+/
          ),
            value2 = td2[utils.isIE ? "innerText" : "textContent"].match(/\d+/);
          if (value1) value1 = +value1[0];
          if (value2) value2 = +value2[0];
          return (value2 || 0) - (value1 || 0);
        }
      };

      //对表格设置排序的标记data-sort-type
      table.setAttribute(
        "data-sort-type",
        compareFn && typeof compareFn === "string" && Fn[compareFn]
          ? compareFn
          : ""
      );

      //th不参与排序
      flag && trArray.splice(0, 1);
      trArray = sort(trArray, function(tr1, tr2) {
        var result;
        if (compareFn && typeof compareFn === "function") {
          result = compareFn.call(
            this,
            tr1.cells[sortByCellIndex],
            tr2.cells[sortByCellIndex]
          );
        } else if (compareFn && typeof compareFn === "number") {
          result = 1;
        } else if (
          compareFn &&
          typeof compareFn === "string" &&
          Fn[compareFn]
        ) {
          result = Fn[compareFn].call(
            this,
            tr1.cells[sortByCellIndex],
            tr2.cells[sortByCellIndex]
          );
        } else {
          result = Fn["orderbyasc"].call(
            this,
            tr1.cells[sortByCellIndex],
            tr2.cells[sortByCellIndex]
          );
        }
        return result;
      });
      var fragment = table.ownerDocument.createDocumentFragment();
      for (var j = 0, len = trArray.length; j < len; j++) {
        fragment.appendChild(trArray[j]);
      }
      var tbody = table.getElementsByTagName("tbody")[0];
      if (!lastRowIndex) {
        tbody.appendChild(fragment);
      } else {
        tbody.insertBefore(
          fragment,
          rows[lastRowIndex - range.endRowIndex + range.beginRowIndex - 1]
        );
      }
    }
    //冒泡排序
    function sort(array, compareFn) {
      compareFn =
        compareFn ||
        function(item1, item2) {
          return item1.localeCompare(item2);
        };
      for (var i = 0, len = array.length; i < len; i++) {
        for (var j = i, length = array.length; j < length; j++) {
          if (compareFn(array[i], array[j]) > 0) {
            var t = array[i];
            array[i] = array[j];
            array[j] = t;
          }
        }
      }
      return array;
    }
    //更新表格
    function updateTable(table) {
      //给第一行设置firstRow的样式名称,在排序图标的样式上使用到
      if (!utils.hasClass(table.rows[0], "firstRow")) {
        for (var i = 1; i < table.rows.length; i++) {
          utils.removeClass(table.rows[i], "firstRow");
        }
        utils.addClass(table.rows[0], "firstRow");
      }
    }
  }
});