通用等级认定方案编辑

/*=================================================================== * 建立日期：2004年5月17日 * * 作者：杜保发东南融通系统工程有限公司 * * * 一、设计思想： * * 1) 利用DHTML技术，以表格、行、列、单元格为操作对象， * 把表格看成一个内存表，动态对数据进行存储和操作。 * 2) 通过活动单元格内嵌编辑控件实现对活动单元格的编辑。 * 3) 利用对象的克隆(object.cloneNode)技术， * 可对比表格编辑前后的数据变化，从而仅提交改动过的 * 数据到服务端。 * * * 二、实现功能 * * (a) 支持动态增加、修改以及删除表格行。 * * (b) 支持单元格内嵌任何控件。(如input，select， * textarea及第三方控件，如日历控件，树形控件等)。 * * (c) 支持列排序(只在客户端排序) 。 * * (d) 支持标识选中行，(如第一列的活动行会 * 显示一个小三角形，表示该行为活动行)。 * * (e) 支持Select对象的text与value的处理。 * 即是否同时保存Select的text和value， * 还是仅保存value。 * * (f) 支持单元格默认值的设定(新增行时，自动赋默认值)、 * 空值校验(设置单元格不为空时，会提示必须输入， * 同时焦点定位该单元格)。 * * (g) 支持箭头移动记录： * 按向上箭头，记录上移一行； * 按向下箭头，记录下移一行，如果到记录尾并且可编辑，则增加一行； * Ctrl+Insert，增加一行；Ctrl+Delete，删除一行。 * * (h) 保存时只提交改变过的数据。 * 提交时形成一串字符数据(仅提交修改，删除，新增过的数据)， * 用换行符\n分隔行，制表符(\t)分隔列。 * 第一列为id(新增时为常量newRowId值,其它为数据库表的id)， * 第二列为state(新增为常量insertState值， * 修改为常量updateState值,删除为常量deleteState值)， * 其它列按表格列顺序生成(对于列savable="false"不生成）。 * * 三、操作详解 * * (1)通过document的onload事件，完成把数据到表格的装载。 * 同时，完成以下初始化工作 * a.复制生成一个新表，用于保存初始数据，保存时与目标表作对照， * 可知道那些数据作过修改 * b.生成第一行(标题行)对象，以变取得列数及每列的属性 * * (2)在里可以设置以下全局属性: * a.readonlyable:表格是否可编辑。 * "true"：不可编辑，"false":可编辑，默认 "false"; * 如

...

* * b.keyable:是否可用键盘操作表格; * "true"：可用键盘操作，"false":不可用键盘操作，默认"true"; * 如...

； * 有如下键盘操作： * 上箭头，上移一行； * 下箭头，下移一行，如果到记录尾并且可编辑，则增加一行； * Ctrl+Inert:插入一行; * Ctrl+Delete:删除一行; * * (3)在标题行(介于与之间的行)的 * 每列上可以设置以下属性: * a.property:内嵌编辑控件容器的名称，指span对象的id， * 如果不指定，则当前列不可编辑 * b.required:活动单元格(当前行的当前列)是否必输， * 如果不指定，默认"false"。 * c.defaultvalue:新增时，列的初始值。如果不指定，为空 * d.storable:设置列的存储值与显示值是否不同,在处理代码 * 与名称的时候很有用。如果不指定，默认"false"。 * "true"：存储值与显示值不同， * 必须在数据单元格设置storevalue的值 * 如：name * e.savetext:是否保存显示的文本， * 必须设置storeable="true"才能生效。 * 即是否同时保存存储值与显示值。 * 如果不指定，默认"false"，即只存存储值。 * f.indexed:是否为非数据列，一般用来保存记录指标符及列的顺序 * g.sortable:是否对列进行排序，默认不排序 * h.sorttype:排序的列按什么方式排序， * 必须设置sorttable="true"才能生效。 * 有以下几种排序方式： * "number":按数字排序 * "date":按日期排序 * "caseinsensitive":按不区分大小写字符排序； * 除以上三种外，设置其它值(或不设置) * 都按区分大小写字符排序 * i.display:本列是否显示,用于处理隐藏列，但仍生成串提交。 * "true":显示，"false"：不显示，默认显示 * j.savable:是否保存该列，默认为"true"，为"false"时不生成串提交 * * (4)在数据行(介于与之间的行)的每列上可以设置以下属性: * a.id:用于保存每条记录的id，新增时取常量newRowId的值 * b.storevalue:保存记录的存储值，需要设置标题标对应列的storable为"true" * * (5)必须设置表格的id，同时通过init("tableid")赋给document.onload; * * (6)设置编辑控件的内容，一般一列设置一个包函编辑控件的容器 * * * 四、使用示例 * * * * * * * 通用等级认定方案编辑 * * " * rel="stylesheet" type="text/css"> * * * * * * * * * * * * * * * * * * * * "> * * * * * * *

等级名称	指标	起始值	截止值
"> * *	"> * *

* * * * * * * **===================================================================*/ //当前行对象 var activeRow=null; //当前行的背景色 var activeRowBgColor = "#e0f0ff"; //其它行的背景色 var inactiveRowBgColor = "white"; //编辑控件前缀，每个编辑控件的名字为：编辑控件前缀+包函编辑控件容器span的id var controlPrefix = "edit_"; //第一行，即标题行对象 var firstRow; //表格的列数 var colsCount; //源表格：保存初始数据，提交时与目标表格对比，可取出变化的数据 var sourceTable; //目标表格，也即当前操作的表格 var destTable; //用换行符来分隔行 var rowSeparator = "\n"; //用制表符来分隔列 var colSeparator = "\t"; //新增行的ID var newRowId = "0"; //插入状态的分隔符 var insertState = "insert"; //修改状态的分隔符 var updateState = "update"; //删除状态的分隔符 var deleteState = "delete"; //单元格为空的替代符，如果为空，必须用一个不为空的字符代替， //传到中间层时才能分解相同的列数 var emptySwap = " "; //有效数据列开始计算的序号，有时设置第一列为导航列，因此有效列是从第二列开始 var colInitIndex; //有效数据行开始计算的序号，从标题行的行数开始计算; var rowInitIndex; //排序向上箭头结点对象 var arrowUp; //排序向下箭头结点对象 var arrowDown; //表格是否可编辑 var readonlyable; //键盘是否可操作 var keyable; //选中行的ID var rowId=""; //以下为信息提示 var noTableIdMessage = "没有设置表格的id！"; var requiredInputMessage = "不能为空！"; var reloadMessage = "数据已被修改，确实要取消所有的修改吗？"; //初始化表格 function init(table,bActive) { if (typeof(table) == 'undefined') { alert(noTableIdMessage); return; } if (typeof(bActive) == 'undefined') bActive = true; destTable = document.getElementById(table); //从现有表克隆一个新表，提交时与该新表做数据比较， //可发现哪些数据做过修改 sourceTable = destTable.cloneNode(true); //取得第一行对象 firstRow = destTable.rows(0); //取得表格列数 colsCount = firstRow.cells.length; //取得表格标题行的行数 rowInitIndex = destTable.tHead.rows.length; //取得指标符所在列的序号,一般设置为第一列 colInitIndex = getIndexed(); //初始化表格排序功能 initSortTable(); //初始化键盘操作表格功能 setKeyTable(); //激活键盘操作表格功能 activeKeyTable(); //设置表格是否可编辑 setReadonlyTable(); //处理列是否显示 initDisplayCell(); //激活表格，使表格可操作 if (bActive) activeTable(); } function setKeyTable(value) { if (typeof(value) != 'undefined') { keyable = value; return; } var s = destTable.keyable; if (typeof(s) == 'undefined') { s = "true"; } keyable = (s.toLowerCase() == "false")?false:true; } function setReadonlyTable(value) { if (typeof(value) != 'undefined') { readonlyable = value; return; } var s = destTable.readonlyable; if (typeof(s) == 'undefined') { s = "false"; } readonlyable = (s.toLowerCase() == "false")?false:true; } function activeKeyTable() { document.onkeydown = keyEvent; } function initDisplayCell() { var result=0; var rowsLen = destTable.rows.length; for(var i=0;irowInitIndex && destTable.rows.length>=(index+1)) { destTable.deleteRow(index); setActiveRow(destTable.rows(destTable.rows.length-1)); } } function modifyRow(index) { var _activeRow; if (typeof(index) == 'undefined' || destTable.rows.length<(index+1)) _activeRow = activeRow; else _activeRow = destTable.rows(index); if (_activeRow == null) return ; setActiveRow(_activeRow); } function canSave(bNoControl) { if (activeRow == null || activeRow.rowIndex<1) return true; if (readonlyable) return true; if (typeof(bNoControl) == 'undefined') bNoControl = false; var required; for(var j=colInitIndex;j0) continue; //第一行：id result += (result!=""?rowSeparator+rowid:rowid); //第二行：state result += colSeparator+deleteState; //其它行：数据 for(var k=colInitIndex;k=rowInitIndex;i--) { destTable.deleteRow(i); } for(var j=rowInitIndex;j0) { if (bNew) { row.insertCell(colInitIndex-1).innerText = "4"; row.cells(colInitIndex-1).className="arrow"; } else { row.cells(colInitIndex-1).innerText = "4"; row.cells(colInitIndex-1).className="arrow"; } } } function setRow(row,bTransfor) { if (row==null || row.rowIndex<1) return; if (row == activeRow) return; if (typeof(bTransfor) == 'undefined') bTransfor = true; activeRow=row; if (bTransfor && !readonlyable) { for(var i=colInitIndex;i fTypeCast(getInnerText(n2.cells[c]))) return d ? +1 : -1; return 0; }; } catch(e) { } } function getInnerText(el) { return el.innerText; var str = ""; for (var i=0; i=0;i--) { if (str.charAt(i)!=" ") { rtnStr=str.substring(0,i+1); break; } } return rtnStr; } //========================================== //功能：去掉左右两边的空格 //========================================== function trim(str) { return(ltrim(rtrim(str))); } function keyEvent() { if (!keyable) return; //alert(event.keyCode); switch (event.keyCode) { //case 37: //left arrow //event.keyCode = 9; //tab //break; case 38: //up arrow movePrevRecord(); break; //case 39: //right arrow //event.keyCode = 9; //break; case 40: //down arrow moveNextRecord(); break; case 13: //enter if (readonlyable) //表格不可编辑 { destTable.tBodies[0].ondblclick(); } else { event.keyCode = 9; } break; //case 45://insert //addRow(); //break; //case 46://delete //removeRow(); //break; } //ctrl + insert if (window.event.ctrlKey && window.event.keyCode == 45) { addRow(); return; } //ctrl+delete if (window.event.ctrlKey && window.event.keyCode == 46) { removeRow(); return; } } //移动到上一行 function movePrevRecord() { if (activeRow == null) return; var intCurrRow = activeRow.rowIndex; if (intCurrRow==rowInitIndex) return; //数据的第一行，不可继续上移 if (!canSave()) return; setActiveRow(destTable.rows(intCurrRow-1)); } //移动到下一行 function moveNextRecord() { if (activeRow == null) return; var intTotalRow = destTable.rows.length; var intCurrRow = activeRow.rowIndex; if ( intCurrRow== intTotalRow-1) //最后一行，增加新行 { addRow(); } else { if (!canSave()) return; setActiveRow(destTable.rows(intCurrRow+1)); } } //屏蔽错误 window.onerror = function() {return false;}