tableeditor.js

极限网络智能办公系统—MYOA26—100％—源程序。

///////////////////////////////////////////////////////////////
// Table Editing Class
// Author:  Billy Cook ([e-mail])
// Date:    2002-05-07
// Purpose: Provide methods to edit a table.  Only
//          works in Internet Explorer version 5.5
//          and above for now.
//

function tableEditor(docID, pntCell) {

   this.docID = docID;        // ID of editable portion of document
   this.pntCell = pntCell;    // TD contentarea is contained in if any
   this.tableCell = null;     // cell currently selected
   this.tableElem = null;     // table currently selected
   this.cellResizeObj = null; // object that user clicks on to resize cell
   this.cellWidth = null;     // selected cell's current width
   this.cellHeight = null;    // selected cell's current height
   this.cellX = null;         // x coord of selected cell's bottom right 
   this.cellY = null;         // y coord of selected cell's bottom right
   this.moveable = null;      // moveable div

   // define methods only once
   if (typeof(_tableEditor_prototype_called) == 'undefined') {
      _tableEditor_prototype_called = true;

      // public methods
      tableEditor.prototype.mergeDown = mergeDown;
      tableEditor.prototype.unMergeDown = unMergeDown;
      tableEditor.prototype.mergeRight = mergeRight;
      tableEditor.prototype.splitCell = splitCell;
      tableEditor.prototype.addCell = addCell;
      tableEditor.prototype.removeCell = removeCell;
      tableEditor.prototype.processRow = processRow;
      tableEditor.prototype.processColumn = processColumn;
      tableEditor.prototype.buildTable = buildTable;
      tableEditor.prototype.setTableElements = setTableElements;
      tableEditor.prototype.unSetTableElements = unSetTableElements;
      tableEditor.prototype.setDrag = setDrag;
      tableEditor.prototype.stopCellResize = stopCellResize;
      tableEditor.prototype.markCellResize = markCellResize;
      tableEditor.prototype.resizeCell = resizeCell;
      tableEditor.prototype.changePos = changePos;
      tableEditor.prototype.resizeColumn = resizeColumn;
      tableEditor.prototype.resizeRow = resizeRow;
      tableEditor.prototype.repositionArrows = repositionArrows;
      tableEditor.prototype.explore = explore;

      // private methods
      tableEditor.prototype.__addOrRemoveCols = __addOrRemoveCols;
      tableEditor.prototype.__findParentTable = __findParentTable;
      tableEditor.prototype.__hideArrows = __hideArrows;
      tableEditor.prototype.__showArrows = __showArrows;
      tableEditor.prototype.__resizeColumn = __resizeColumn;
   }

   // create divs for editing cell width and height
   document.body.innerHTML += ' <div id="rArrow" title="Drag to modify cell width." style="position:absolute; visibility:hidden; cursor: E-resize; z-index: 1" onmousedown="tEdit.markCellResize(this)" onmouseup="tEdit.stopCellResize(false)" ondragstart="handleDrag(0)"> <table border="0" cellpadding="0" cellspacing="0" width="7" height="7"> <tr><td bgcolor="#000000"></td></tr> </table> </div> <div id="dArrow" title="Drag to modify cell height." style="position:absolute; visibility:hidden; cursor: S-resize; z-index: 1" onmousedown="tEdit.markCellResize(this)" onmouseup="tEdit.stopCellResize(false)" ondragstart="handleDrag(0)"> <table border="0" cellpadding="0" cellspacing="0" width="7" height="7"> <tr><td bgcolor="#000000"></td></tr> </table> </div>';



   ////////////////////////////////////////////////////////////////
   //  method: setTableElements
   //    args: none
   // purpose: look to see if the cursor is inside a TD or TABLE and
   //          if so assign the TD to this.tableCell or the TABLE to
   //          this.tableElem
   //
   function setTableElements(){

      // stop resizing cell if already resizing one
      this.stopCellResize(true);
      this.tableCell = null;
      
      cursorPos=document.selection.createRange();

      if (document.selection.type == 'Text') {
         var elt = cursorPos.parentElement(); 
         while (elt) {
            if (elt.tagName == "TD") {
               break;
            }
            elt = elt.parentElement;
         }


         if (elt) {
            // don't select document area
            if (elt.id == this.docID)
               return;

            // don't select parent TD
            if (this.pntCell)
               if (this.pntCell == elt.id)
                  return;

            this.tableCell = elt;

            // set width and height as globals for 
            // resizing
            this.cellWidth = this.tableCell.offsetWidth;
            this.cellHeight = this.tableCell.offsetHeight;
            this.__showArrows();
         }
      } else {
         if (cursorPos.length == 1) {
            if (cursorPos.item(0).tagName == "TABLE") {
               this.tableElem = cursorPos.item(0);
               this.__hideArrows();
               this.tableCell = null;
            }
         }
      }
   }

   ////////////////////////////////////////////////////////////////
   //  method: unSetTableElements
   //    args: none
   // purpose: unset references to currently selected cell or table 
   //          
   function unSetTableElements(){

      this.tableCell = null;
      this.tableElem = null;
      return;
   }

   ////////////////////////////////////////////////////////////////
   //  method: mergeDown
   //    args: none
   // purpose: merge the currently selected cell with the one below it
   //
   function mergeDown() {
      if (!this.tableCell)
         return;
      
      if (!this.tableCell.parentNode.nextSibling) {
         alert("下方无单元格可合并!");
         return;
      }

      var topRowIndex = this.tableCell.parentNode.rowIndex;

      //               [  TD   ] [  TR    ] [  TBODY ] [                   TR                      ] [            TD                 ]
      var bottomCell = this.tableCell.parentNode.parentNode.childNodes[ topRowIndex + this.tableCell.rowSpan ].childNodes[ this.tableCell.cellIndex ];

      if (!bottomCell) {
         alert("下方无单元格可合并!");
         return;
      }

      // don't allow merging rows with different colspans
      if (this.tableCell.colSpan != bottomCell.colSpan) {
         alert("列跨距不同,不能合并单元格!"); 
         return;
      }

      // do the merge
      this.tableCell.innerHTML += bottomCell.innerHTML;
      this.tableCell.rowSpan += bottomCell.rowSpan;
      bottomCell.removeNode(true); 
      this.repositionArrows();
   }

   ////////////////////////////////////////////////////////////////
   //  method: unMergeDown
   //    args: none
   // purpose: merge the currently selected cell with the one below it
   //
   function unMergeDown() {
      if (!this.tableCell)
         return;
      
      if (this.tableCell.rowSpan <= 1) {
         alert("行跨距已经为1");
         return;
      }

      var topRowIndex = this.tableCell.parentNode.rowIndex;

      // add a cell to the beginning of the next row
      this.tableCell.parentNode.parentNode.childNodes[ topRowIndex + this.tableCell.rowSpan - 1 ].appendChild( document.createElement("TD") );

      this.tableCell.rowSpan -= 1;

   }

   ////////////////////////////////////////////////////////////////
   //  method: mergeRight
   //    args: none
   // purpose: merge the currently selected cell with the one to 
   //          the immediate right.  Won't allow user to merge cells
   //          with different rowspans.
   //
   function mergeRight() {
      if (!this.tableCell)
         return;
      if (!this.tableCell.nextSibling)
         return;

      // don't allow user to merge rows with different rowspans
      if (this.tableCell.rowSpan != this.tableCell.nextSibling.rowSpan) {
         alert("行跨距不同,不能合并单元格!");
         return;
      }

      this.tableCell.innerHTML += this.tableCell.nextSibling.innerHTML;
      this.tableCell.colSpan += this.tableCell.nextSibling.colSpan;
      this.tableCell.nextSibling.removeNode(true);
       

      this.repositionArrows();
      this.__hideArrows();
      this.tableCell = null;
   }

   ////////////////////////////////////////////////////////////////
   //  method: splitCell 
   //    args: none
   // purpose: split the currently selected cell back into two cells 
   //          it the cell has a colspan > 1.
   //
   function splitCell() {
      if (!this.tableCell)
         return;
      if (this.tableCell.colSpan < 2) {
         alert("单元格不能被拆分成多列!");
         return;
      }

      this.tableCell.colSpan = this.tableCell.colSpan - 1;
      var newCell = this.tableCell.parentNode.insertBefore( document.createElement("TD"), this.tableCell);
      newCell.rowSpan = this.tableCell.rowSpan;
      this.repositionArrows();
   }

   ////////////////////////////////////////////////////////////////
   //  method: removeCell 
   //    args: none
   // purpose: remove the currently selected cell
   //
   function removeCell() {
      if (!this.tableCell)
         return;

      // can't remove all cells for a row
      if (!this.tableCell.previousSibling && !this.tableCell.nextSibling) {
         alert("不能删除一行中仅有的一个单元格!");
         return;
      }

      this.tableCell.removeNode(false);

      this.repositionArrows();
      this.tableCell = null;
   } 
 
   ////////////////////////////////////////////////////////////////
   //  method: addCell 
   //    args: none
   // purpose: add a cell to the right of the selected cell
   //
   function addCell() {
      if (!this.tableCell)
         return;

      this.tableCell.parentElement.insertBefore(document.createElement("TD"), this.tableCell.nextSibling);
   }

   ////////////////////////////////////////////////////////////////
   //  method: processRow 
   //    args: (string)action = "add" or "remove"
   // purpose: add a row above the row that 
   //          contains the currently selected cell or
   //          remove the row containing the selected cell
   //
   function processRow(action) {
      if (!this.tableCell)
        return;

      // go back to TABLE def and keep track of cell index
      var idx = 0;
      var rowidx = -1;
      var tr = this.tableCell.parentNode;
      var numcells = tr.childNodes.length;
      var action_desc;
     

      while (tr) {
         if (tr.tagName == "TR")
            rowidx++;
         tr = tr.previousSibling;
      }
      // now we should have a row index indicating where the
      // row should be added / removed

      var tbl = this.__findParentTable(this.tableCell);
  
      if (action == "add")
          action_desc="插入";
      else
      	  action_desc="删除";
      	
      if (!tbl) {
         alert("不能" + action_desc + "行");
         return;
      }
     
      if (action == "add") {
         var r = tbl.insertRow(rowidx);
         for (var i = 0; i < numcells; i++) {
            var c = r.appendChild( document.createElement("TD") );
            if (this.tableCell.parentNode.childNodes[i].colSpan)
               c.colSpan = this.tableCell.parentNode.childNodes[i].colSpan;
         }
      } else {
         tbl.deleteRow(rowidx);
         this.stopCellResize(true);
         this.tableCell = null;
      }
   }

   ////////////////////////////////////////////////////////////////
   //  method: processColumn
   //    args: (string)action = "add" or "remove"
   // purpose: add a column to the right column containing
   //          the selected cell
   //
   function processColumn(action) {
      if (!this.tableCell)
        return;

      // store cell index in a var because the cell will be
      // deleted when processing the first row
      var cellidx = this.tableCell.cellIndex;
      var action_desc;
      var tbl = this.__findParentTable(this.tableCell);
  
      if (action == "add")
          action_desc="插入";
      else
      	  action_desc="删除";
      if (!tbl) {
         alert("不能" + action_desc + "列");
         return;
      }
         
      // now we have the table containing the cell
      this.__addOrRemoveCols(tbl, cellidx, action);

      // clear out global this.tableCell value for remove
      if (action == 'remove') {
         this.stopCellResize(true);
         this.tableCell = null;
      } else {
         this.repositionArrows();
      }
   }

   ////////////////////////////////////////////////////////////////
   //  method: __addOrRemoveCols
   //    args: (table object)tbl, (int)cellidx, (string)action
   //          tbl = the table containing the selected cell
   //          cellidx = the index of the selected cell in its row
   //          action = "add" or "remove" the column
   //
   // purpose: add or remove the column at the cell index
   //
   function __addOrRemoveCols(tbl, cellidx, action) {
      if (!tbl.childNodes.length)
         return;
      var i;
      for (i = 0; i < tbl.childNodes.length; i++) {
         if (tbl.childNodes[i].tagName == "TR") {
            var cell = tbl.childNodes[i].childNodes[ cellidx ];
            if (!cell)
               break; // can't add cell after cell that doesn't exist