ASP.NET中应用Excel:(9)实现表格的自动增长

当用户编辑Excel工作表的时候,如果在正编辑的单元格上按回车或下键头的时候,编辑焦点会自动向下滚动。当然Excel本身已经具有256X65535的空间,因此这不是什么新鲜事。如果要在我们的HTML表格上实现这样的功能,那就更像Excel了,而且这么简单的功能,没有理由不来个锦上添花。设想一下,当用户使用我们的表格编辑数据,来到最后一行,输入,一按回车,表格自动增加了一行,来到最后一列,再按右键头,表格自动增加了一列,这样的功能是不是很酷?

由于HTML表格是半静态的,需要我们动态添加新的行和列。

由于表示当前单元格处于编辑状态的<INPUT TYPE=Text>元素就是当前输入焦点,因此我们继续在该元素的onkeydown事件上做文章:

[jscript] view plaincopy
  1. function onTextBoxKeydown()  
  2. {  
  3.         ....  
  4.         switch(code)  
  5.         {  
  6.         case 39: // right  
  7.             {  
  8.                 ....  
  9.   
  10.                 // 向右增加列,留做课后作业  
  11.               }  
  12.             break;  
  13.         case 13: // carriage return  
  14.         case 40: // down  
  15.             {  
  16.                 sender.onchange();  
  17.                 if ( row < tbl.rows.length - 1 )  
  18.                     tbl.rows[row + 1].cells[col].onactivate();  
  19.                 else // 添加新行  
  20.                   {  
  21.                     var newrow = tbl.insertRow(-1); // 添加到最后  
  22.   
  23.                        // 添加与上一行相同的列数  
  24.                        // 注意:未考虑上一行存在合并单元格的情况  
  25.                        for(var i = 0; i < tbl.rows[row].cells.length; i++ )   
  26.                     {  
  27.                         var cell = newrow.insertCell(i); // 添加新单元格  
  28.   
  29.                             // 拷贝上一层的样式  
  30.                             cell.style.backgroundColor = tbl.rows[row].cells[i].style.backgroundColor;  
  31.                         cell.style.posWidth = tbl.rows[row].cells[i].style.posWidth;  
  32.                         cell.style.posHeight = tbl.rows[row].cells[i].style.posHeight;  
  33.                         cell.style.borderLeft = '1px solid black';  
  34.                         cell.style.borderBottom = '1px solid black';  
  35.   
  36.                         if ( i == 0 ) // 第一列是行号  
  37.                             {  
  38.                             cell.align = 'center'// 居中  
  39.                                 cell.innerHTML = row + 1; // 显示行号  
  40.                             }  
  41.                         else  
  42.                         {   // 设置数据域  
  43.                                 cell.hasFormula = false;  
  44.                             cell.formula = '';  
  45.                             cell.dataField = '';  
  46.                             cell.innerHTML = ' ';  
  47.                             cell.onactivate = onCellActivate;  
  48.                             cell.ondeactivate = onCellDeactivate;  
  49.   
  50.                             if ( i == tbl.rows[row].cells.length - 1) // 如果是最后一列,添加右边框  
  51.                                  {  
  52.                                 cell.style.borderRight = '1px solid black';  
  53.                             }  
  54.                         }  
  55.                     }  
  56.                 }  
  57.   
  58.                 return false;  
  59.             }  
  60.   
  61.             break;  
  62.             ....  

好一点实现应该记录所有行中的最大列数,当添加新行时,其列数应该等于最大列数(还有行标号的列)。

阅读更多
个人分类: asp.net
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭