数据模块的编辑问题

实现技术：ajax

任务：对显示在页面上的不同数据源形成的模块编辑，能够进行添加，删除，修改等操作。

现在的数据模块是在页面上以表格的形式显示的，实现过程是在显示数据的页面上添加四个图标的onclick事件，分别为可编辑，添加一行，删除一行，保存修改。首先是在每行中加一列复选框，根椐选中的行进行数据的编辑，删除，修改，保存，实现的可编辑和删除的js方法如下：

            if(chkOrder.checked )
       {
                        SetRowCanEdit_base(table.rows[i]);
                }
         }
    }
}
//设置单元格可编辑

function SetCellCanEdit_base(element)
{
var textBox = document.createElement("input");
textBox.type = "text";
textBox.className="EditCell_TextBox";           //使用时,要根据具体的css来定
     if(element.getElementsByTagName('input').length >0)
             textBox.value =element.childNodes[0].value;
      else
              textBox.value = element.innerHTML;

textBox.onblur = function()
{
    element.setAttribute("value",textBox.value);
    element.innerHTML = this.value;
}
element.innerHTML = "";       //清空单元格式
element.appendChild(textBox);
textBox.focus();
textBox.select();
}
//删除行
function DeleteRow_base(table, id){
for(var i=table.rows.length - 1; i>0;i--){
   var chkOrder = table.rows[i].cells[0].firstChild;
   if(chkOrder){
    if(chkOrder.type = "CHECKBOX"){
     if(chkOrder.checked){
      //执行删除
     // table.deleteRow(i);
   deleterow(i,id);//需要获取行号和id参数，通过此函数操作数据库，进行行的删除。
   alert(i+id);
     }
    }
   }
}
}
function DeleteRow_sql(table, id){
for(var i=table.rows.length - 1; i>0;i--){
   var chkOrder = table.rows[i].cells[0].firstChild;
   if(chkOrder){
    if(chkOrder.type = "CHECKBOX"){
     if(chkOrder.checked){
      //执行删除
     // table.deleteRow(i);
   deletesqlrow(i,id);
     }
    }
   }
}
}
function CancelEditRow(checkbox)//对checkbox的onchange事件添加该函数，当checkbox取消时使得行处于不可编辑状态。
{
     if(!checkbox.checked)
{
   var row = checkbox.parentNode.parentNode;
   for(var i = 1; i < row.cells.length ; i ++)
   {
    row.cells[i].onclick="";
   }
}
}

//添加行
function AddRow_base(table){
var newRow = table.insertRow(table.rows.length);
newRow.setAttribute("newRow","true");
var td;

td =newRow.insertCell();
td.innerHTML="<input type=\"checkbox\" checked=\"checked\" onchange=\"javascript:CancelEditRow(this);\" />";

    for (var i = 1; i < table.rows[0].cells.length; i++) {
        td =newRow.insertCell();
  td.innerHTML="newrow";+
}

SetRowCanEdit(newRow);
return newRow;
}

当对数据库中的数据进行修改后，需要进行保存。由于数据模块的获取是通过两种方式得到的，所以需要不同的保存方式。

下面是通过下拉列表形式得到的数据模块的保存函数sava_baserow.js

********************************************************************************

var xmlHttp_modifyrow;
var applicationRoot = "/MIS_Frame_0.20/jsp/";

function createXMLHttpRequestre_modifyrow()
{
if(window.ActiveXObject)
{
xmlHttp_modifyrow=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttRequest)
{
xmlHttp_modifyrow=new XMLHttpRequest();
}
}

function savebaserow(moduleid)
{   //首先从当前页面上获取需要的参数
     var table=document.getElementById(moduleid+"table");
    var databaseinstance = document.getElementById(moduleid+"databaseinstance").value

    var databasename = document.getElementById(moduleid+"databasename").value
   var tablename = document.getElementById(moduleid+"tablename").value
   var columns = document.getElementById( moduleid+"columns").value;
   var showpageobj = document.getElementById(moduleid + "showpage");
    var showpage ;
     if(showpageobj)
    {
    showpage = document.getElementById(moduleid + "showpage").value;
   }
   else
     {
    showpage=1;
}

//获取当前页页上被选中的行的行号和数据，将它们作为两个字符串传入到jsp中，一个字符串存所有选中的行的行号，另一个存所有选中行的数据，并将它们用分隔符区分下。
      var rowindex="";
   var fieldvalue="";
   var newfieldvalue="";
    for(var i=1; i <table.rows.length ; i ++)
{
    var chkOrder = table.rows[i].cells[0].firstChild;
    if(chkOrder)
       {

            if(chkOrder.checked )
       {
           if(!table.rows[i].getAttribute("newRow"))
        {
       rowindex+=i;
       rowindex+="#";

       for (var j = 1; j < table.rows[0].cells.length-1; j++)
        {
          fieldvalue+=table.rows[i].cells[j].innerHTML;
          fieldvalue+=",";
         }
        fieldvalue = fieldvalue + table.rows[i].cells[j].innerHTML + "#"
        }
        else
        {
       for (var j = 1; j < table.rows[0].cells.length-1; j++)
        {
          newfieldvalue+=table.rows[i].cells[j].innerHTML;
          newfieldvalue+=",";
         }
        newfieldvalue = newfieldvalue + table.rows[i].cells[j].innerHTML + "#"

      }
                }
         }
    }

//如果判断行号不为空，则调用的是保存数据的页面（在原有数据的基础上修改而不是新增行的修改，因为新增行时没用到行号这个参数）
    if(rowindex!="")
{
  createXMLHttpRequestre_modifyrow();
   xmlHttp_modifyrow.onreadystatechange = new   Function("handleStateChangere_modifyrow(" + moduleid +")");
  xmlHttp_modifyrow.open("POST",applicationRoot+"modify_baserow.jsp",true);
  xmlHttp_modifyrow.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xmlHttp_modifyrow.send("databaseinstance="+databaseinstance+"&databasename="+databasename+"&tablename="+tablename+"&columns="+columns+"&rowindex="+rowindex+"&fieldvalue="+fieldvalue+"&showpage="+showpage);
//调用新加一行时数据保存的页面
if(newfieldvalue != "")
{
  createXMLHttpRequestre_modifyrow();
  xmlHttp_modifyrow.onreadystatechange = new   Function("handleStateChangere_modifyrow(" + moduleid +")");
  xmlHttp_modifyrow.open("POST",applicationRoot+"insert_baserow.jsp",true);
  xmlHttp_modifyrow.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xmlHttp_modifyrow.send("databaseinstance="+databaseinstance+"&databasename="+databasename+"&tablename="+tablename+"&columns="+columns + "&newfieldvalue="+newfieldvalue);
}

posted on 2008-12-30 15:30 姝晖阅读(218) 评论(0) 收藏举报

刷新页面返回顶部

导航

数据模块的编辑问题