上一个项目使用了一个超级表格,现在共享出来,希望对大家有所参考.
a, 此表格可以实现增加,删除,上移,下移,修改等很多的操作,并且,可以设置每一列的编辑方式. 【程序编程相关:开源的 BugTracker.net 错】 【推荐阅读:如何写系统分析书】 c, 编辑过程中,可以使用tab键进入下一个单元格进行编辑,也可以之间使用enter键结束编辑 【扩展信息:10九条帮助你大幅提高效益的准则】 b, 目前含有两种编辑方式: 1,文本框编辑 2,下拉框编辑 (需要提供两个数组,一个是text,一个是value) d, 提供设置图标的功能 e, 把下面代码拷贝到htm文件中运行查看效果,代码量很大 f, 嘿嘿,一定要看看效果哦 :) <html><head><meta http-equiv="content-type" content="text/html; charset=gb2312"><style type="text/css">.divclass{height:250px;width:100%;overflow:auto;}td{height:22px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;border-right:1px solid black;background-color:#999999}table{border-top:1px solid black;border-left:1px solid black;font-size:13px;}input{border:1px solid black;}.trodd{font-family: "宋体";font-size: 12px;background-color: #ffffff;}.treven{font-family: "宋体";font-size: 12px;background-color: #cccccc;}</style><script language="javascript">/*****************************可以把下面这部分代码提到一个js文件中***************************//*********************************** powertableedit.js *********************************//**************************************************************************************** * created by lxcjie 2004.3.1 * * 用法: * 1,首先创建表格对象: var pt = new powertableedit("table1"); * 其中,"table1"为表格的id * * 2,设置表格的编辑方式,调用pt对象的setcol方法,此方法有三个参数: * * setcol(colnum,colsty,sda) * * > colnum:为准备编辑的列编号,第一列编号为0 * > colsty:为准备编辑的方式,txt为文本编辑方式,sel为下拉编辑方式 * > sda:如果选择的编辑方式为下拉编辑方式,则此参数有效,代表下拉框中的预置数据,是数组类型 * * 3, 在按钮中调用相应的方法(注意:上移行与下移行按钮的id必须为moveup与movedown):如: * * <!--增加行--> * <input onclick=add_row(maintab) type=button value=ins_row> * <!--删除行--> * <input onclick=del_row(maintab) type=button value=del_row> * <!--重置表格--> * <input onclick=res_tab() type=button value=restore> * * <!--上移行--> * <input id=moveup onclick=move_up(maintab) type=button value=up> * <!--下移行--> * <input id=movedown onclick=move_down(maintab) type=button value=down> * 4, 如果想取消编辑功能,调用方法seteditable(false) * 5, 增加一行时,可以先调用selcelldata方法,传入一个数组,来设置增加一行时没格单元格的数据 * * 5,例如: * var arr = new array(); * arr[0] = "a"; * arr[1] = "b"; * arr[2] = "c"; * * var arr1 = new array(); * arr1[0] = "1"; * arr1[1] = "2"; * arr1[2] = "3"; * * //页面table的id为table1 * var pt = new powertable("table1"); * * //表格的第一列为文本编辑方式 * pt.setcol(0,´txt´); * //表格的第二列为下拉框编辑方式,指定数据为数组arr * pt.setcol(2,´sel´,arr); * //如果不想此表格有编辑功能 pt.seteditable(false) * * //增加一行时: * var arrda = new array(); * arrda[0] = "九"; * arrda[1] = "tomcat"; * arrda[2] = "数据四"; * arrda[3] = "ellise"; * arrda[4] = "aaaa"; * arrda[5] = "2.112.521"; * arrda[6] = "美国"; * pt.setcelldata(arrda); * * //然后调用add_row(maintab)方法.... 下一页