上篇博客通过JQuery实现单击表格进行编辑的功能,本篇博客将继续延伸,将在此功能的基础之上,与数据库交互,实现真正的可编辑。
传统的网页,如果需要更新数据,需要更新整个页面,而Ajax可以通过在后台与服务器进行少量数据交换,使网页实现异步更新,是一种在无需加载整个网页的情况下, 能够更新部分网页的技术。
本篇博客将上传我在项目用到的可以编辑的表格的源代码。继续丰富了上篇博客中的编辑效果,又与数据库进行交互,实现真正的可编辑。
Html页面的代码:
<div class="span9">
<%-- 显示提示信息--%>
<asp:Label ID="Label1" runat="server" Text="说明 :单击模块名称进行修改,回车或单击其它地方确定修改,ESC取消编辑。" ForeColor="Red"></asp:Label>
<%-- 局部更新--%>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%-- 表格 --%>
<table class="table table-striped">
<tr>
<th>模块ID</th>
<th>模块名称</th>
<th>删除</th>
</tr>
<%--绑定到Repeater--%>
<asp:Repeater ID="rptModel" runat="server">
<ItemTemplate>
<tr>
<td><%#Eval("mdlID")%></td>
<td class="modelname"><%#Eval("mdlName")%></td>
<td>
<asp:LinkButton ID="lbtnDelete" runat="server" OnClick="lbtnDelete_Click" OnClientClick="return confirm('是否要真的删除?')" CommandArgument='<%#Eval("mdlID") %>'>删除</asp:LinkButton>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<%--显示错误信息--%>
<div id="test"></div>
<%--添加模块名称--%>
<p>
<asp:Label ID="Label2" runat="server" Text="模块名称"></asp:Label>
<asp:TextBox ID="txtModelName" runat="server"></asp:TextBox>
<asp:Button ID="btnAddModel" UseSubmitBehavior="false" runat="server" Text="添加" CssClass="btn btn-info" OnClick="btnAddModel_Click" />
</p>
</div>
绑定信息代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
//绑定模块信息
ModelInfoMgr modelInfoMgr = new ModelInfoMgr();
DataTable dt = new DataTable();
//查询所有的模块信息
dt = modelInfoMgr.SelectAll();
//绑定
rptModel.DataSource = dt;
rptModel.DataBind();
}
}
重头戏来了,JS代码
$(function () {
$(".modelname").click(function () {//给页面中的modelname的标签加上click事件
var objTD = $(this);
//alert("heheh");
//点击后,内容变成文本框
var oldText = $(this).text(); //保存原来的文本
var input =$( "<input type='text' value='" + oldText + "'/>");//文本框的html代码
objTD.html(input); //td变为文本
//设置文本框的点击事件失效
input.click(function () {
return false;
});
//设置文本框的样式
input.css("border-width", 0); //边框为0
input.css("margin", 0);
input.css("padding", 0);
input.css("color","black");
//input.height(objTD.height);//文本框的高度为当前td的高度
//input.width(objTD.width);
input.trigger("focus").trigger("select");//全选
//文本框失去焦点的时候变为文本
input.blur(function () {
var newText = $(this).val();
var input_blur = $(this);
//objTD.html(newText);
//当原来的名称与修改后的名称不同时才进行数据库提交操作
if (oldText != newText) {
//获取该模块名称对应的ID
var modelID = $.trim(objTD.prev().text());
// AJAX异步更改数据库
var url = "../handler/changeModelName.ashx?modelname=" + encodeURI(encodeURI(newText)) + "&modelID=" + modelID + "&t=" + new Date();
$.get(url, function (data) {
if (data == "false") {
$("#test").text("模块名称修改失败,请检查是否重复");
input_blur.trigger("focus").trigger("select"); //文本框全选
}
else {
$("#test").text("");
objTD.html(newText);
}
});
}
else {
//前后文本一样,将文本宽变成标签
objTD.html(newText);
}
});
//在文本框中按下键盘某建
input.keydown(function () {
var jianzhi = event.keyCode;
var input_keydown = $(this);
switch (jianzhi) {
case 13: //按下回车,保存修改
var newText = input_keydown.val();//修改后的名称
//当原来的名称与修改后的名称不同时才进行数据库提交操作
if (oldText != newText) {
//获取该模块名称对应的ID
var modelID = $.trim(objTD.prev().text());
// AJAX异步更改数据库
var url = "../handler/changeModelName.ashx?modelname=" + encodeURI(encodeURI(newText)) + "&modelID=" + modelID + "&t=" + new Date();
$.get(url, function (data) {
if (data == "false") {
$("#test").text("模块名称修改失败,请检查是否重复");
input_keydown.trigger("focus").trigger("select"); //文本框全选
}
else {
$("#test").text("");
objTD.html(newText);
}
});
}
else {
//前后文本一样,将文本宽变成标签
objTD.html(newText);
}
break;
case 27: //按下Esc,取消修改,吧文本框变成文本
$("#test").text("");
objTD.html(oldText);
break;
}
});
});
});
//屏蔽Enter按键
$(document).keydown(function (event) {
switch (event.keyCode) {
case 13: return false;
}
});
handler文件:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string modelid= context.Request.QueryString["modelID"];
string modelname=context.Server.UrlDecode(context.Request.QueryString["modelname"]);
//更改模块名称
ModelInfoMgr modelInfoMgr = new ModelInfoMgr();
ModelInfo modelInfo = new ModelInfo();
modelInfo.ID = modelid;
modelInfo.Name = modelname;
//判断是否已经存在
if (modelInfoMgr .Exists(modelInfo))
{
context.Response.Write("false");
return;
}
bool flag= modelInfoMgr.Update(modelInfo);
if (flag)
{
context.Response.Write("true");
}
else
{
context.Response.Write("false");
}
}
效果图:
如图中的提示,上面的代码做单击 模块名称就可以进行修改,且回车或者单击其他地方确定修改,按ESC取消编辑。
这是在牛腩老师的方法,希望在以后的学习中,可以领会此方法之外,能够更新知识和做法,也希望得到大牛的指导和点拨,再次感谢了。