想实现的功能是,对gridview进行多行编辑,当操作最后一行时,自动新增下一行,保存时对整个Gridview一次保存。
需要用到AJAX及JS。
首先,前台用input控件或者textbox控件都可以,为了实现录入,在这些控件里加上当值改变时触发的事件(οnchange="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")%>' οnchange="add_row(this);" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="测试内容">
<ItemTemplate>
<input runat="server" ID="content" value='<%# Eval(Server.HtmlEncode("content"))%>' οnchange="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()来获取最大值,因为刚后台绑定时已绑定最大值,所以此处加1
}
else {
document.getElementById("hdid").value = parseInt(document.getElementById("hdid").value) + 1;//若不是默认值的话,那么把得到的控件值加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 + "' οnchange='add_row(this);'>"; //设置第二个单元格内容,并且把最大的ID值赋给控件 ,并且在控件里加上add_row()事件。
var _col3 = row.insertCell();
_col3.innerHTML = "<input id='" + newid[0] + "_newscontent_" + count + "' οnchange='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