在ASP.NET中應用Excel：(8)為HTML表格增加編輯功能

我們可以為HTML表格增加編輯功能，具體表現為：當使用者單擊某個儲存格(術語：啟用)，該儲存格位置上出現編輯框，背景也與其它未啟用的儲存格不同，以示區別，當使用者完成編輯後，儲存格內容被更新。如果使用者使用方向鍵，則變化儲存格的啟用狀態。整個情況類似於Excel中的操作。

要實現上述目的，我們首先要處理儲存格的在啟用事件(onactivate)和去啟用事件(ondeactivate)，具體實現如下：

// 儲存格的在啟用事件function onCellActivate (){    var parentTbl = this.parentElement.parentElement; // 儲存格的父容器，在HTML元素中，儲存格是<TD>，其父就是<TR>，<TR>的父就是<TABLE>        // 清除前一個被啟用儲存格狀態    if ( parentTbl.activeCell != null )  // 前一個在啟用的儲存格存在？    {        if ( parentTbl.activeCell != this ) // 與當前相同是不是同一個？        {            parentTbl.activeCell.style.backgroundColor = ''; // 不是同一個，則清除背景            parentTbl.activeCell.innerHTML = parentTbl.activeCell.dataField.length > 0 ? parentTbl.activeCell.value2 : ' '; // 恢複顯示內容        }    }        if ( parentTbl.activeCell != this ) // 如果目前的儲存格和前一個被啟用的儲存格不是同一個    {        parentTbl.activeCell = this; // 設定目前的儲存格為被啟用的儲存格        // 插入編輯框        this.innerHTML = '<INPUT type="text" value="' + this.dataField +                         '" style="border-top:none;border-left:none;border-right:none;border-bottom:1px dashed black;background-color:transparent;font-weight: bold; color: black;" ' +                        ' onkeydown="return onTextBoxKeydown();" ' +                        ' onchange="return onTextBoxChange();" ></INPUT>';                                var textBox = this.children[0]; // 取得對象                textBox.width = this.offsetWidth; // 設定寬度                textBox.align = 'right'; // 對齊，不起作用        textBox.setActive();        textBox.focus();                this.style.backgroundColor = '#CCCCFF'; // 設定顯眼的背景，表示處於啟用狀態    }}// 儲存格的去啟用事件// 當儲存格被啟用，編輯框出現，儲存格就會失去啟用，此事件就會激發function onCellDeactivate (){    var parentTbl = this.parentElement.parentElement; // 擷取Table        if ( parentTbl.activeCell != this ) // 如果被啟用儲存格不是目前的儲存格？    {        this.innerHTML = this.dataField.length > 0 ? this.value2 : ' '; // 恢複顯示內容    }}

當然，HTML不像視窗程序，可以在設計時就掛接事件，因此，我們需要在頁面載入完成後就為除行列標題之外的儲存格掛接事件，進行初始化，同時可以進行還有跨行的儲存格合并：

document.onreadystatechange = function() // 在頁面載入完成後，初始化TABLE{    if ( this.readyState == 'complete' )    {        initTable(); // 初始化    }}function initTable(){    for(var idx in document.worksheet ) // 遍曆所有表    {        var tbl = $get(document.worksheet[idx].table); // 擷取TABLE對象                for( var i = tbl.cells.length - 1; i > 1; i-- ) // 從後往前遍曆所有儲存格        {            var ctrl = tbl.cells[i]; // 儲存格對象                        if ( ctrl.cellIndex > 0 && ctrl.parentElement.rowIndex > 0) // 第一行和第一列不處理            {                ctrl.onactivate = onCellActivate;       // 儲存格的在啟用事件                ctrl.ondeactivate = onCellDeactivate;   // 儲存格的去啟用事件                                if ( ctrl._rowspan && ctrl._rowspan > 1 && ctrl.parentElement.rowIndex + 1 < tbl.rows.length ) // 如果需要合併儲存格，則合并之                {                    for( var n = 1; n < ctrl._rowspan; n++ ) // 合并                    {                        if ( ctrl.cellIndex < tbl.rows[ctrl.parentElement.rowIndex + 1].cells.length )                            tbl.rows[ctrl.parentElement.rowIndex + 1].deleteCell(ctrl.cellIndex);                    }                                        ctrl.rowSpan = ctrl._rowspan; // 設定跨度                }            }        }    }}

注意到document.worksheet對象沒有？這個對象在產生表格時添加並填充，包括所有的工作表名字和表格id。其格式如下：

document.worksheet = { 'table': null, // HTML table的id ,                       'name': '' // 工作表名字                      };

要使方向鍵起作用，需要為編輯框添加按鍵事件處理：

// 編輯框的按鍵事件function onTextBoxKeydown(){    var sender = event.srcElement, // 事件屬性        code = event.keyCode;            if ( sender.parentElement &&         sender.parentElement.tagName == 'TD')     {        var tbl = sender.parentElement.parentElement.parentElement, // 表格對象            col = sender.parentElement.cellIndex,                   // 列號            row = sender.parentElement.parentElement.rowIndex;      // 行號                     switch(code) // 處理按鍵代碼        {        case 37: // left            {                sender.onchange(); // 手動激發改動事件和在啟用事件                if ( col > 1 ) // 第一列是標題，不需要啟用                    tbl.rows[row].cells[col - 1].onactivate();            }            break;        case 38: // top            {                sender.onchange();                if ( row > 1 )                    tbl.rows[row - 1].cells[col].onactivate();            }            break;        case 39: // right            {                sender.onchange();                if ( col < tbl.rows[row].cells.length - 1 )                    tbl.rows[row].cells[col + 1].onactivate();            }            break;        case 13:        case 40: // down            {                sender.onchange();                if ( row < tbl.rows.length - 1 )                    tbl.rows[row + 1].cells[col].onactivate();                                return false;            }            break;        }// switch    }            return true;}

改動編輯框的內容後，還需要更新儲存格內容和持有的資料，這需要處理onchange事件：

// 編輯框的改變事件function onTextBoxChange(){    var src = event.srcElement; // 事件屬性        if ( src.parentElement &&         src.parentElement.tagName == 'TD' )     {        var val = src.value.trim(); // 去掉空格                if ( val != src.parentElement.dataField ) // 內容有變化？        {   // 更新資料域            src.parentElement.dataField = val;            src.parentElement.value2 = val;            src.parentElement.hasFormula = /=.*/.test(val); // 使用Regex判斷是否是公式        }    }}

好了，現在我們的HTML表格具有類似於Excel的編輯功能了。