ASP. NET 에 Excel: (8) 을 사용 하여 HTML 표 에 편집 기능 을 추가 합 니 다.

저 희 는 HTML 표 에 편집 기능 을 추가 할 수 있 습 니 다. 구체 적 으로 보면 사용자 가 특정한 셀 (용어: 활성화) 을 누 르 면 이 셀 의 위치 에 편집 상자 가 나타 나 고 배경 도 다른 활성화 되 지 않 은 셀 과 다 르 기 때문에 사용자 가 편집 을 마 친 후에 셀 의 내용 이 업 데 이 트 됩 니 다.사용자 가 방향 키 를 사용 하면 셀 의 활성화 상 태 를 변경 합 니 다.전체 상황 은 엑셀 의 조작 과 유사 하 다.
상기 목적 을 실현 하려 면 먼저 셀 의 활성화 이벤트 (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); //               

        }

    }

}

자, 이제 우리 HTML 표 는 엑셀 과 유사 한 편집 기능 을 가지 고 있 습 니 다.