jquery 应用代码方便的排序功能

更新时间：2010年02月06日 15:59:43 作者：

点击后可以输入排序的数字编号，移开后自动更新数据库。

终极目的：想做一个方便的排序功能。
具体实现：点击后可以输入排序的数字编号，移开后自动更新数据库。

1，我想把这个功能用来完成，也就需要一个在页面上监控指定的span的东西，他就是：
ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){
// 在这里写你的代码...
});
2，页面上很多，如何才能区分呢？用id？还是class？id太单一，于是用class，因为排序不是针对一条数据，而是多条。
3 2 1 0 

3，绑定的事件我想肯定是click
$(document).ready(function(){ $(".BY").click(function() { alert('测试下先'); }); }); 
4，然后要让span变成一个输入框才行，go

复制代码代码如下:

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" value=\"" + old + "\"/>"); 
}); 
}); 

5，这时发现了一个问题，无法点击的。点了之后数字没了。因此就无法输入更改了。想个什么办法呢？还记得自动获取选择么？

复制代码代码如下:

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>"); 
}); 
}); 

6，很简单的可以更改了。不过当鼠标移开的时候，不能变回去了。郁闷，咋整？

复制代码代码如下:

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>"); 
$(".OnBY").blur(function() { 
o.html($(".OnBY").val()); 
}); 
}); 
}); 

用失去焦点函数，把html代码替换回来就是。换回来的还是修改的值。
7，不过不能更数据库交涉，接下来就要用到ajax。看看。

复制代码代码如下:

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>"); 
$(".OnBY").blur(function() { 
$.ajax({ 
type: "GET", 
url: "Admin_BY.aspx", 
data: "BY=" + $(".OnBY").val(), 
success: function(msg) { 
alert(msg); 
o.html($(".OnBY").val()); 
} 
}); 
}); 
}); 
}); 

把修改的By参数提交给Admin_BY.aspx处理，后台的处理我就不多说了。用Requst.QueryString来获取。
8，再改进一下，排序肯定要指定一个数据ID

3 
2 
1 
0

复制代码代码如下:

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>"); 
$(".OnBY").blur(function() { 
$.ajax({ 
type: "GET", 
url: "Admin_BY.aspx", 
data: "ID=" + o.attr("BYID") + "&BY=" + $(".OnBY").val(), 
success: function(msg) { 
if (msg.indexOf("[BYNOK]")>0) { 
o.html($(".OnBY").val()); 
} else { 
alert("发生错误： " + msg); 
o.html(old); 
} 
} 
}); 
}); 
}); 
}); 

还有更多想法，等有空再增加上去。比如修改时，数据处理有个时间，在等待的时间里，改变下鼠标样式为繁忙等。
或更新后，重新装载数据，因为具体数据不同，只能具体应用。也或者直接刷新页面。

初学原创，请各位高手不吝赐教。
Kas

PS：关于ERic Poon 兄弟说何处用到，抓个图参考下吧。

您可能感兴趣的文章:

Jquery 全选反选实例代码
本文给大家介绍基于jquery代码实现的全选全不选反选实例代码，代码简单易懂，非常实用，感兴趣的一起学习吧
2015-11-11
jquery+CSS实现的水平布局多级网页菜单效果
这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-08-08
一款基于jQuery的图片场景标注提示弹窗特效
这篇文章主要介绍了一款基于jQuery的图片场景标注提示弹窗特效,需要的朋友可以参考下
2015-01-01
jquery五角星评分插件示例分享
这篇文章主要介绍了jquery五角星评分插件示例分享,需要的朋友可以参考下
2014-02-02
jQuery中even选择器的定义和用法
这篇文章主要介绍了jQuery中even选择器的定义和用法,较为详细的分析了event选择器的语法结构与具体用法,并以一个设置偶数行为蓝色字体的例子总结了其用法与功能特点,需要的朋友可以参考下
2014-12-12
jQuery实现图片轮播效果代码
这篇文章主要为大家详细介绍了jQuery实现图片轮播效果代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
jQuery使用手册之三 CSS操作
jQuery使用手册之三 CSS操作...
2007-03-03
7个有用的jQuery代码片段分享
这篇文章主要介绍了7个有用的jQuery技巧分享,本文给出了在新窗口打开链接、设置等高的列、jQuery预加载图像、禁用鼠标右键、设定计时器等实用代码片段,需要的朋友可以参考下
2015-05-05
jquery操作checked属性以及disabled属性的多种方法
这篇文章主要介绍了jquery控制checked属性以及disabled属性的多种方法,下面只提到checked,其实disabled在jquery里的用法和checked是一模一样的,需要的朋友可以参考下
2014-06-06
基于jQuery架构javascript基础体系
jQuery毕竟还只是一个基础的最底层的工具集，封装元素选择器，事件等等，基本上能满足一般的需求，但要从整体的WEB的周度来看，为了提高javascript开发的效率与可重用性，就需要有一个整体的布局
2011-01-01