设计可编辑行

课后整理 2021-2-25

编辑数据是指在查询数据视图中,当单击某行的“修改“按钮时,可以在表格行中立即修改当前行的数据,演示效果如图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; //返回当前行修改前的默认值 }