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


Posted in Javascript onFebruary 06, 2010

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

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

3,绑定的事件我想肯定是click
$(document).ready(function(){<BR> $(".BY").click(function() {<BR> alert('测试下先');<BR> });<BR><BR>}); <BR>
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

<span class="BY" DbID="3" title="点击修改">3</span><br />
<span class="BY" DbID="2" title="点击修改">2</span><br />
<span class="BY" DbID="1" title="点击修改">1</span><br />
<span class="BY" DbID="0" title="点击修改">0</span><br />

$(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 应用代码 方便的排序功能

Javascript 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
vue实现日历备忘录功能
Sep 24 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 #Javascript
javascript小数计算出现近似值的解决办法
Feb 06 #Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 #Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 #Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 #Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 #Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 #Javascript
You might like
PHP token验证生成原理实例分析
2019/06/05 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
利用python实现数据分析
2017/01/11 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
python基于Selenium的web自动化框架
2019/07/14 Python
Python文件操作方法详解
2020/02/09 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
python爬虫请求头的使用
2020/12/01 Python
10张动图学会python循环与递归问题
2021/02/06 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
PHP面试题及答案一
2012/06/18 面试题
项目经理岗位职责
2013/11/11 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
英语分层教学实施方案
2014/06/15 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
公司庆典欢迎词
2015/01/26 职场文书
打架检讨书范文
2015/01/27 职场文书
小学入学感言
2015/08/01 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
MySQL8.0的WITH查询详情
2021/08/30 MySQL