ASP.NET中应用Excel:(9)实现表格的自动增长
2008-06-27 14:14
537 查看
当用户编辑Excel工作表的时候,如果在正编辑的单元格上按回车或下键头的时候,编辑焦点会自动向下滚动。当然Excel本身已经具有256X65535的空间,因此这不是什么新鲜事。如果要在我们的HTML表格上实现这样的功能,那就更像Excel了,而且这么简单的功能,没有理由不来个锦上添花。设想一下,当用户使用我们的表格编辑数据,来到最后一行,输入,一按回车,表格自动增加了一行,来到最后一列,再按右键头,表格自动增加了一列,这样的功能是不是很酷?
由于HTML表格是半静态的,需要我们动态添加新的行和列。
由于表示当前单元格处于编辑状态的<INPUT TYPE=Text>元素就是当前输入焦点,因此我们继续在该元素的onkeydown事件上做文章:
好一点实现应该记录所有行中的最大列数,当添加新行时,其列数应该等于最大列数(还有行标号的列)。
由于HTML表格是半静态的,需要我们动态添加新的行和列。
由于表示当前单元格处于编辑状态的<INPUT TYPE=Text>元素就是当前输入焦点,因此我们继续在该元素的onkeydown事件上做文章:
function onTextBoxKeydown() { .... switch(code) { case 39: // right { .... // 向右增加列,留做课后作业 } break; case 13: // carriage return case 40: // down { sender.onchange(); if ( row < tbl.rows.length - 1 ) tbl.rows[row + 1].cells[col].onactivate(); else // 添加新行 { var newrow = tbl.insertRow(-1); // 添加到最后 // 添加与上一行相同的列数 // 注意:未考虑上一行存在合并单元格的情况 for(var i = 0; i < tbl.rows[row].cells.length; i++ ) { var cell = newrow.insertCell(i); // 添加新单元格 // 拷贝上一层的样式 cell.style.backgroundColor = tbl.rows[row].cells[i].style.backgroundColor; cell.style.posWidth = tbl.rows[row].cells[i].style.posWidth; cell.style.posHeight = tbl.rows[row].cells[i].style.posHeight; cell.style.borderLeft = '1px solid black'; cell.style.borderBottom = '1px solid black'; if ( i == 0 ) // 第一列是行号 { cell.align = 'center'; // 居中 cell.innerHTML = row + 1; // 显示行号 } else { // 设置数据域 cell.hasFormula = false; cell.formula = ''; cell.dataField = ''; cell.innerHTML = ' '; cell.onactivate = onCellActivate; cell.ondeactivate = onCellDeactivate; if ( i == tbl.rows[row].cells.length - 1) // 如果是最后一列,添加右边框 { cell.style.borderRight = '1px solid black'; } } } } return false; } break; ....
好一点实现应该记录所有行中的最大列数,当添加新行时,其列数应该等于最大列数(还有行标号的列)。
相关文章推荐
- ASP.NET中应用Excel:(9)实现表格的自动增长
- 如何应用Asp.Net Mvc内建功能(DefaultModelBinder)实现简单类型、复杂类型、集合类型,以及字典类型的自动绑定
- 在ASP.NET中应用Excel:(8)为HTML表格增加编辑功能
- ASP.NET,Web界面利用Button来实现将telerik:RadGrid表格内数据导出Excel
- 在ASP.NET中应用Excel:(7)表格尺寸的计算
- ASP.NET下将Excel表格中的数据规则的导入数据库思路分析及实现
- 在ASP.NET中应用Excel:(8)为HTML表格增加编辑功能
- ASP.NET中应用Excel:(6)在服务器端生成HTML表格
- 在ASP.NET中应用Excel:(7)表格尺寸的计算
- ASP.NET中应用Excel:(6)在服务器端生成HTML表格
- ASP.NET中应用Excel:(10)在客户端生成HTML表格[修正]
- asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页
- ASP.NET MVC实现Excel文件的上传下载以及Excel数据的保存
- ASP.NET 中 DataGrid 导出到 Excel 的封装实现
- asp.net MVC&JQuery 应用(树型表格 )
- asp.net中长内容自动分页的实现
- asp.net+Ligerui实现grid导出Excel和Word的方法
- asp.net实现将Excel中多个sheet数据导入到SQLSERVER中的方法
- 应用Ajax.net在Asp.net中实现无aspx文件应用