繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery 应用代码 方便的排序功能
- Javascript
- JQuery Tips(3) 关于$()包装集内元素的改变
- JavaScript 创建随机数和随机图片
- javascript document.execCommand() 常用解析
- firefox下对ajax的onreadystatechange的支持情况分析
- Javascript attachEvent传递参数的办法
- jQuery Attributes(属性)的使用(一、属性篇)
- jquery自动完成插件(autocomplete)应用之PHP版
- 查询绑定数据岛的表格中的文本并修改显示方式的js代码
- 讨论javascript(一)工厂方式 js面象对象的定义方法
- IE不支持option的display样式，只能使用remove和add
- 多浏览器兼容的获取元素和鼠标的位置的js代码
- js checkbox全选并将获取值放到input里边
- javascript 日期联动选择器 [其中的一些代码值得学习]
- javascript实现的仿51job地址多项选择方式效果
- jQuery 渐变下拉菜单
- 利用图片的 onerror 事件载入默认图片
- js实现页面打印功能实例代码(附去页眉页脚功能代码)
- JQuery读取XML文件数据并显示的实现代码
- 比较详细的关于javascript 解析json的代码
- TextArea 控件的最大长度问题(js json)
Javascript 中的 jquery 应用代码 方便的排序功能
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 179 ::
收藏到网摘: n/a
点击后可以输入排序的数字编号，移开后自动更新数据库。 终极目的：想做一个方便的排序功能。
具体实现：点击后可以输入排序的数字编号，移开后自动更新数据库。
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 兄弟说何处用到，抓个图参考下吧。
评论 (0) All
