编辑数据是指在查询数据视图中,当单击某行的“修改“按钮时,可以在表格行中立即修改当前行的数据,演示效果如图1所示。

图1 编辑数据
rowtoForm()函数的功能就是当用户单击查询数据视图中的“修改“按钮时,能够自动获取当前行的每一个单元格的数据,并根据每列数据类型,分别使用文本框、文本区域和下拉菜单等不同类型的表单域嵌入这些单元格中,然后把单元格中的数据再传递给这些表单域。
本函数的难点是如何判断每列数据的类型,以及如何实现数据的传递,并能够把不同分类编号显示为类名的形式,如图1所示。详细代码如下。
//===================================
//在表格行内单元格转换为可编辑的表单域
//参数
//paraobj {
//row:当前行对象,DOM对象
//table:当前显示数据对应的数据表,字符串
//}
//返回值:返回原表格行单元格的值
var rowtoForm = function(paraobj){
var _paraobj = paraobj; //保存参数
var paraobj = {};
for(var name in _paraobj){
paraobj[name] = _paraobj[name];
}
if(!paraobj.row){ //处理参数值
alert("没有指明当前行!");
return false;
}else
var row = paraobj.row;
if(!paraobj.table){
alert("没有指明当前表格显示数据对应的数据表!");
return false;
} else
var table = paraobj.table;
if(row.firstChild.firstChild) //获取行的第一个单元格的编号值
var id = parseInt(row.firstChild.firstChild.data);
var childnodes = row.childNodes; //获取当前行所有单元格
var rowoldvalue = {}; //声明并初始化变量,用来保存行旧值
for(var j=0; j<childnodes.length; j++){ //遍历所有单元格
var cell = childnodes[j]; //获取单元格
cell.style.padding = "0"; //清除单元格的补白
var classname = cell.className; //获取单元格的类名
if(!classname) //如果不存在类名,则跳过
continue;
rowoldvalue[classname] = cell.innerHTML; //保存单元格原来的值
var type = fieldobj[classname][2]; //单元格的字段类型
if( type == "no") //如果不允许编辑,则跳过
continue;
if(type == "text"){ //文本框编辑
var formfield = document.createElement("input");
if(cell.firstChild) //检测是否存在文本结点
formfield.value = cell.firstChild.data;
else{
if(classname == "price"){
formfield.value = "0.00";
}else
formfield.value = "";
}
cell.innerHTML = ""; //清空单元格
cell.appendChild(formfield); //嵌入文本框
}
else if(type == "textarea"){ //文本区域编辑
var formfield = document.createElement("textarea");
if(cell.firstChild){ //检测是否存在文本结点
var temp = cell.innerHTML;
//如果把表格中的换行标签替换为换行符
temp = temp.replace(/\
/gi, "\n\r").replace(/\
/gi, "\n\r")
formfield.value = temp;
}else
formfield.value = "";
cell.innerHTML = ""; //清除单元格以前的值
cell.appendChild(formfield); //嵌入文本区域
}
else if(type == "select"){ //下拉列表框编辑
var formfield = document.createElement("select"); //创建option选项
if(classname == "class"){ //分类字段
if(tableobj[table][5] == "data"){ //主数据表
var sql = "select * from "+ tableobj[table][2] +" where upperid = "+ tableobj[table][0] ;
var rs = requeryrs(sql);
while(!rs.eof){ //生成下拉菜单选项
var option = document.createElement("option");
option.value = rs("id");
if(cell.firstChild){
if(cell.firstChild.data == rs("title"))
option.selected = true;
}
else if(paraobj.id && (paraobj.id == parseFloat(rs("id"))))
option.selected = true;
option.innerHTML = rs("title");
formfield.appendChild(option);
rs.moveNext;
}
closers(rs); //清除记录集
}
else if(tableobj[table][5] == "detail"){ //明细表,需要从明细表对应的主表中找到该记录的
//分类编号
if(paraobj.id){ //如果存在从主表传递过来的id编号
//在明细表对应主表中查询指定编号的记录
var sql = "select * from "+ tableobj[table][8] +" where id = "+ paraobj.id ;
var temprs = requeryrs(sql);
var classid = parseFloat(temprs("class")); //获取该记录的分类号
closers(temprs);
//在三级分类表中过滤同类分类项
sql = "select * from class3 where upperid = "+ classid;
}
else {//如果不存在paraobj.id,说明不是通过单击明细栏中的“查看”或“添加”
//按钮打开的明细表
//在当前表中重新获取当前记录
var sql = "select * from "+ table +" where id = "+ id ;
var temprs = requeryrs(sql);
var classid = parseFloat(temprs("class")); //获取当前记录的分类号
closers(temprs);
//在class3表中找到对应分类号的记录
var sql = "select * from class3 where id = "+ classid ;
var temprs = requeryrs(sql);
//获取该记录的upperid,找到同类选项的上级编号
var classid = parseFloat(temprs("upperid"));
closers(temprs);
sql = "select * from class3 where upperid = "+ classid;
}
var rs = requeryrs(sql);
while(!rs.eof){ //生成下拉菜单选项
var option = document.createElement("option");
option.value = rs("id");
if(cell.firstChild){
if(cell.firstChild.data == String(rs("title")))
option.selected = true;
else if(paraobj.id && (paraobj.id == parseFloat(rs("id"))))
option.selected = true;
}
option.innerHTML = rs("title");
formfield.appendChild(option);
rs.moveNext;
}
}
}
else if(classname == "upperid"){ //upperid字段
if(tableobj[table][5] == "detail"){ //明细表
//在当前表中重新获取当前记录
var sql = "select * from "+ table +" where id = "+ id ;
var temprs = requeryrs(sql);
var classid = parseFloat(temprs("class")); //获取当前记录的分类号
closers(temprs);
//在class3表中找到对应分类号的记录
var sql = "select * from " + table + " where class = "+ classid ;
var rs = requeryrs(sql);
while(!rs.eof){ //生成下拉菜单选项
var option = document.createElement("option");
option.value = rs("id");
if(cell.firstChild){
if(cell.firstChild.data == parseFloat(rs("upperid")))
option.selected = true;
}else if(paraobj.id && (paraobj.id == parseFloat(rs("id"))))
option.selected = true;
option.innerHTML = rs("upperid");
formfield.appendChild(option);
rs.moveNext;
}
}
if(tableobj[table][5] == "class"){ //分类表
var datatable = tableobj[table][8];
if(cell.firstChild){ //获取当前记录的upperid值
var uppertitle = cell.firstChild.data;
//清除两侧空格
uppertitle = uppertitle.replace(/^(\s| )+/g,"").replace(/(\s| )+$/g,"");
var sql = "select * from "+ datatable + " where title = '" + uppertitle + "'";
var temprs = requeryrs(sql);
if(!temprs.eof){
if(datatable == "class1"){
var upperid = parseFloat(temprs("id"));
sql = "select * from "+ datatable;
}else{
var upperid = parseFloat(temprs("upperid"));
sql = "select * from "+ datatable + " where upperid = " + parseFloat(up perid);
}
}else{
sql = "select * from "+ datatable;
}
}
else if(paraobj.id){
//在明细表对应主表中查询指定编号的记录
var sql = "select * from "+ tableobj[table][8] +" where id = "+ paraobj.id ;
var temprs = requeryrs(sql);
var upperid = parseFloat(temprs("upperid")); //获取该记录的分类号
closers(temprs);
//在三级分类表中过滤同类分类项
sql = "select * from " + datatable + " where upperid = "+ upperid;
}else{
sql = "select * from "+ datatable;
}
var rs = requeryrs(sql);
while(!rs.eof){ //生成下拉菜单选项
var option = document.createElement("option");
option.value = rs("id");
if(cell.firstChild){
if(cell.firstChild.data == String(rs("title")))
option.selected = true;
}else if(paraobj.id && (paraobj.id == parseFloat(rs("id"))))
option.selected = true;
option.innerHTML = rs("title");
formfield.appendChild(option);
rs.moveNext;
}
}
closers(rs); //清除记录集
}
cell.innerHTML = ""; //清除单元格以前的值
cell.appendChild(formfield); //嵌入下拉菜单
}
}
$('textarea').elastic(); //为文本区域绑定外部自动伸缩插件
return rowoldvalue; //返回当前行修改前的默认值
}