当前位置: 编程技术>jquery
Jquery鼠标点击动态添加文本框离开时自动更新排序
来源: 互联网 发布时间:2014-09-03
本文导语: 当把鼠标放在数字上单击时:变为文本框,填入数字后,鼠标离开。自动更新。 演示效果如下所示: 1、Jquery代码部分 代码示例: $(document).ready(function(){ //修改栏目id $(".BY").click(function() { var r = /^...
当把鼠标放在数字上单击时:变为文本框,填入数字后,鼠标离开。自动更新。
演示效果如下所示:
1、Jquery代码部分
代码示例:
$(document).ready(function(){
//修改栏目id
$(".BY").click(function() {
var r = /^[0-9]*[1-9][0-9]*$/ //判断正整数的正则表达式。
var old = $(this).text();
var o = $(this);
o.html("");
$(".OnBY").blur(function() {
var number=$(".OnBY").val(); //获取文本框中的值。
var columnid=o.attr("DbID"); //获取DbID属性的值 栏目的ID号。
if(!r.test(number))
{
alert("数字格式错误");
$(this).select()
return false;
}
if(number.length==0) //判断文本框中是否有值。
{
alert("不能为空");
$(this).select()
return false;
}
else //Jquery异步更新排序号。
{
$.ajax({
type: "GET",
url: "../AjaxAsyn/UpdateSortNo.aspx",
data: "ID=" + o.attr("DbID") + "&BY=" + $(".OnBY").val()+"&date="+ new Date().getTime()+"&Type=1", //增加时间参数,表示请求的是不同的页面 ,type是一个标识:标识对文章更改排序,还是对产品,还是对栏目。
beforeSend:function(XMLHttpRequest) //更新前显示等待的图片
{
$("#showResult"+columnid).show();
},
success: function(msg) //更新成功
{
o.html($(".OnBY").val());
$("#showResult"+columnid).hide();
//o.html(old);
}
});
}
});
});
//修改栏目id
$(".BY").click(function() {
var r = /^[0-9]*[1-9][0-9]*$/ //判断正整数的正则表达式。
var old = $(this).text();
var o = $(this);
o.html("");
$(".OnBY").blur(function() {
var number=$(".OnBY").val(); //获取文本框中的值。
var columnid=o.attr("DbID"); //获取DbID属性的值 栏目的ID号。
if(!r.test(number))
{
alert("数字格式错误");
$(this).select()
return false;
}
if(number.length==0) //判断文本框中是否有值。
{
alert("不能为空");
$(this).select()
return false;
}
else //Jquery异步更新排序号。
{
$.ajax({
type: "GET",
url: "../AjaxAsyn/UpdateSortNo.aspx",
data: "ID=" + o.attr("DbID") + "&BY=" + $(".OnBY").val()+"&date="+ new Date().getTime()+"&Type=1", //增加时间参数,表示请求的是不同的页面 ,type是一个标识:标识对文章更改排序,还是对产品,还是对栏目。
beforeSend:function(XMLHttpRequest) //更新前显示等待的图片
{
$("#showResult"+columnid).show();
},
success: function(msg) //更新成功
{
o.html($(".OnBY").val());
$("#showResult"+columnid).hide();
//o.html(old);
}
});
}
});
});
2、aspx页面代码部分
3、更新排序的后台核心代码:
代码示例:
columnId = Web.CommFun.UrlParameters.IntParameters(this, "ID");
SortNo = Web.CommFun.UrlParameters.IntParameters(this, "BY");
dateTime = Web.CommFun.UrlParameters.StringParameters(this, "date");
TypeNo = Web.CommFun.UrlParameters.IntParameters(this, "Type"); //TypeNo 1修改栏目编号 2修改二级栏目编号 3新闻文章 4产品排序
UpdateSorts();
}
private void UpdateSorts()
{
switch (TypeNo)
{
case 1:
{
DAL.ColumnDAL dal = new DAL.ColumnDAL();
if (dal.UpdateSortNo(columnId, SortNo) > 0)
{
Response.Write("更新排序成功");
Response.End();
}
else
{
Response.Write("更新失败!");
Response.End();
}
break;
}
case 2:
其余代码省略,可根据需求添加...
SortNo = Web.CommFun.UrlParameters.IntParameters(this, "BY");
dateTime = Web.CommFun.UrlParameters.StringParameters(this, "date");
TypeNo = Web.CommFun.UrlParameters.IntParameters(this, "Type"); //TypeNo 1修改栏目编号 2修改二级栏目编号 3新闻文章 4产品排序
UpdateSorts();
}
private void UpdateSorts()
{
switch (TypeNo)
{
case 1:
{
DAL.ColumnDAL dal = new DAL.ColumnDAL();
if (dal.UpdateSortNo(columnId, SortNo) > 0)
{
Response.Write("更新排序成功");
Response.End();
}
else
{
Response.Write("更新失败!");
Response.End();
}
break;
}
case 2:
其余代码省略,可根据需求添加...