JS操作GRIDVIEW多行编辑及新增行与保存，外加ACCESS数据库多行插入（事务）

想实现的功能是，对gridview进行多行编辑，当操作最后一行时，自动新增下一行，保存时对整个Gridview一次保存。

需要用到AJAX及JS。

首先，前台用input控件或者textbox控件都可以，为了实现录入，在这些控件里加上当值改变时触发的事件（onchange="add_row(this);" ）：

<asp:LinkButton ID="btnSave" runat="server" class="edit"  OnClientClick="SaveData();">保存</asp:LinkButton>

 <asp:GridView ID="GridView1" runat="server" CssClass="comTable1" AutoGenerateColumns="false" HeaderStyle-CssClass="InfoListTit" HeaderStyle-Height="20px">
                <Columns>
                <asp:TemplateField>
                <ItemTemplate>
                <asp:CheckBox runat="server" ID="cbk" />
                </ItemTemplate>
                </asp:TemplateField>              
                <asp:TemplateField HeaderText="测试标题">
                <ItemTemplate>                 
                <input  runat="server" ID="id" 　value='<%# Eval("id")%>' style="display:none" />　/*放ID，设置不可见*/
                <input runat="server" ID="title" value='<%# Eval("title")%>' onchange="add_row(this);" />
                </ItemTemplate>
                </asp:TemplateField>
                 <asp:TemplateField HeaderText="测试内容">
                <ItemTemplate>
                <input runat="server" ID="content" value='<%# Eval(Server.HtmlEncode("content"))%>' onchange="add_row(this);"/>
                </ItemTemplate>
                </asp:TemplateField>
                </Columns>
                </asp:GridView>

然后，在后台绑定gridview时，新增一行空白行，做为数据源赋给gridview，这样前台页面无论有没有值都会有一行出现。

代码如下：

 

dt = lib.GetNewsList(sWhere, sOrder, iPageId);//（lib.GetNewsList为查询方法，获取所需要的数据）
                DataRow dr = dt.NewRow();
                dr["newsid"] = lib.GetMaxID();　//（lib.GetMaxID()　为获取ID最大值方法，这样新增空白行默认有ID，其它为空白）
                dt.Rows.Add(dr);   
  GridView1.DataSource = dt;
  GridView1.DataBind();     

这下绑定好了，在前台加一控件，<input type="hidden" id="hdid" value="0" runat="server" />，来保存ID的最大值（此功能为当用户连续新增行时，确保ID不重复），来看下 JS　add_row（）：

function add_row(obj) {
            var CurrentRow = event.srcElement.parentNode.parentNode.rowIndex;　//获取当前行号
            var _tab = document.getElementById("GridView1");　　//获取gridview1
            var count = _tab.rows.length;　//获取行数
            var newid = obj.id.split('_');//把对像进行分割，以便得到想要的数据
            if (document.getElementById("hdid").value == 0) {
                document.getElementById("hdid").value = parseInt(basic_intro_aspx.GetMaxID().value) + 1;//默认为0，如果是默认值的话，那么用ajax方法GetMaxID（）来获取最大值，因为刚后台绑定时已绑定最大值，所以此处加１
            }
            else {
                document.getElementById("hdid").value = parseInt(document.getElementById("hdid").value) + 1;//若不是默认值的话，那么把得到的控件值加１再赋给此控件
            }
            var maxid = document.getElementById("hdid").value;//ID值设为控件的值。
              if (CurrentRow == count-1) {　　　//判断当前行是否为最后一行（因为有表头，所以count-1）
                var row = _tab.insertRow();　　　//插入新行
                var _col1 = row.insertCell();　　//插入第一个单元格
                _col1.innerHTML = "<input id='"+newid[0]+"_cbk_"+count+"' type='checkbox'/>";　//设置第一个单元格内容
                var _col2 = row.insertCell(); //插入第二个单元格
                _col2.innerHTML = "<input id='"+newid[0]+"_id_"+count+"' value='"+maxid+"' style='display:none'> <input id='" + newid[0] + "_title_" + count + "'  onchange='add_row(this);'>";  //设置第二个单元格内容，并且把最大的ID值赋给控件 ，并且在控件里加上add_row()事件。            
                var _col3 = row.insertCell();
                _col3.innerHTML = "<input id='" + newid[0] + "_newscontent_" + count + "' onchange='add_row(this);'>";
            }
        }   

现在功能已实现，然后开始保存数据：

   

function SaveData() {
            var gridView = document.getElementById("GridView1");            
            var id = new Array();　//定义三个数组，分别保存id,title,content
            var title = new Array();
            var content = new Array();
            for (var i = 1; i < gridView.rows.length; i++) {
                id[i - 1] = gridView.rows(i).childNodes[1].getElementsByTagName('input')[0].value;//循环获取id的值　
                title[i - 1] = gridView.rows(i).childNodes[1].getElementsByTagName('input')[1].value;//循环获取title的值
                content[i - 1] = HTMLEncode(gridView.rows(i).childNodes[2].getElementsByTagName('input')[0].value);//循环获取content的值
            }
            result = basic_intro_aspx.SaveData(id,title, content).value;//ajax方法，保存数据。
            if (result) {
                alert("保存成功！");                
            }
            return false;
        }

再者ACCESS不支持多行保存，因此用事务进行处理，执行方法如下：

 

public bool ExecuteTransaction(string [] sSql)
        {
            comm.Transaction = conn.BeginTransaction();
            try
            {
                for (int i = 0; i < sSql.Length; i++)
                {
                    string strsql = sSql[i].ToString();
                    if (strsql.Trim().Length > 1)
                    {
                        comm.CommandText = strsql;
                        comm.ExecuteNonQuery();
                    }
                }
                comm.Transaction.Commit();  //提交事务
                return true;
            }
            catch(Exception)
            {
                comm.Transaction.Rollback();
                return false;
            }           
        }

OVER