<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function check(t){
var cur = $(t).parent().parent().parent().parent();
var pre=cur.prev('table');
var sr = $(t).parent().parent().parent().parent().prev('table').find(".conids").val();
if(pre.length !=0){
$.ajax({
type:"post",
url:"${website}/admin/ajax/cute_moveUpConRS.xhtml",
data:"&conId=" +conId+"&pid="+pid+"&upConId="+upConId,
timeout:20000,
error:function() {
alert('上移未执行成功!');
},
dataType:"json",
success:function(data) {
cur.insertBefore(pre);
}
});
}else{
alert("已经是最顶部了!");
}
}
</script>
<title>无标题文档</title>
</head>
<body>
<div>
<ul id="ul1">
<li><input type="text" name="test" /></li>
</ul>
<table id="table1">
<tr>
<td>11111111111111</td>
<td>aaaaaaaaaaaaaa<input type="hidden" name="test" value="111" class="conids"/></td>
<td><a href="#" onclick="check(this)">上移</a></td>
</tr>
</table>
<table id="table2">
<tr>
<td>22222222222222</td>
<td>bbbbbbbbbbbbbb<input type="hidden" name="test" value="222" class="conids"/></td>
<td><a href="#" onclick="check(this)">上移</a></td>
</tr>
</table>
<table id="table3">
<tr>
<td>33333333333333</td>
<td>cccccccccccccc<input type="hidden" name="test" value="333" class="conids"/></td>
<td><a href="#" onclick="check(this)">上移</a></td>
</tr>
</table>
<table id="table4">
<tr>
<td>44444444444444</td>
<td>dddddddddddddd<input type="hidden" name="test" value="444" class="conids"/></td>
<td><a href="#" onclick="check(this)">上移</a></td>
</tr>
</table>
</div>
</body>
</html>
分享到:
相关推荐
本教程将探讨如何利用jQuery实现元素上下移动的排序功能,且在用户操作过程中无需页面刷新,提供流畅的用户体验。同时,我们还将讨论如何通过Ajax技术同步更新后台数据库中的排序信息。 ### 1. jQuery基本概念 ...
通过监听鼠标事件,如mousedown、mousemove和mouseup,当用户在列头按下并移动鼠标时,可以实现列位置的动态调整。同时,后台需要处理新的列顺序,确保数据绑定时能正确显示。 可排序功能通常由DataGrid的内置功能...
6. **添加交互功能**:根据需求,可能还需要添加排序、筛选、编辑等交互功能,这可以通过监听jQuery事件并调用Flexigrid的相关方法来实现。 在实际项目中,开发者还需要考虑性能优化,如使用异步加载大数据集,以及...
此压缩包"jQuery实现表格列表拖动排序特效源码.zip"显然是一个包含示例代码的资源,用于演示如何利用jQuery来创建具有拖动排序功能的表格列表。下面将详细介绍这个知识点及其相关技术。 首先,jQuery中的拖放(Drag...
本篇文章将详细介绍如何使用jQuery实现表格列表的拖动排序功能,以及"jQuery表格列表拖动排序代码.zip"中的具体实现方法。 一、jQuery拖动排序的基本原理 jQuery拖动排序功能基于HTML5的拖放(Drag and Drop)API...
项目完成后,用户可以在浏览器中看到一个带有搜索、排序功能的表格,通过jQuery实现的增删改查按钮,可以无刷新地对数据进行操作,同时Bootstrap的反馈提示和验证也能提升用户体验。 总的来说,这个项目是一个典型...
标题中的“table排序”指的是在计算机编程中对表格数据进行排序的一种常见操作。这通常涉及到在HTML、JavaScript、SQL或各种编程语言中的实现。在网页开发中,表格(table)是一种展示结构化数据的标准方式,而对...
这种功能在数据管理界面中很有用,例如在线表格编辑、数据库记录排序等。用户可以方便地调整数据顺序,而无需通过后台服务。 8. **源码分析** 提供的链接可能包含实现这一功能的具体代码,通过阅读源码可以学习到...
本实例将介绍如何使用PHP、MySQL和JavaScript实现一个拖拽Div的动态效果,并将其数据保存到数据库中,便于后续处理和展示。 **一、JavaScript拖拽功能实现** 1. **事件监听**:首先,我们需要在HTML中为要拖动的...
"tableEditor"是一款基于jQuery的高级表格编辑器控件,主要设计用于Web应用程序,提供强大的数据展示和编辑功能。这款控件集成了GridView的概念,使得网页中的表格操作更加灵活和直观,大大提升了用户在网页上处理...
1. **数据展示**:jqGrid可以轻松地展示成千上万条记录,并支持分页、排序、搜索和过滤等功能,提供高效的用户体验。 2. **列自定义**:用户可以根据需求自由定义列的显示方式,包括宽度、对齐方式、可编辑性等,...
5. **插件和扩展**:BOOTSTRAP-TABLE提供了许多插件和扩展,如分页、排序、搜索、列选择、行选择、固定列等,这些功能可以通过简单的配置选项启用。 6. **API和事件**:BOOTSTRAP-TABLE有一套完整的API和事件机制,...
下面将详细介绍jQuery FlexiGrid JS的核心特性、工作原理以及如何在前后台实现数据传递。 1. **核心特性** - **数据呈现**:FlexiGrid能够以表格形式展示数据,支持多列和自定义列宽。 - **分页**:提供内置的...
4. **数据更新**:当用户完成编辑并保存时,通过Ajax发送更新请求到服务器,将新值保存到数据源。同时,更新表格中的显示。 5. **错误处理**:在编辑和保存过程中,应处理可能出现的错误,如数据验证失败、网络故障...
在本文中,我们将深入探讨如何使用JavaScript实现拖放(Drag and Drop)功能,以及如何将这一特性应用到分页表格的排序中。首先,我们来看看拖放功能的基本原理。 拖放是网页交互的一种常见方式,它允许用户通过...
**jQuery.sheet**是一款基于jQuery的表格插件,它旨在为Web应用提供类似Excel的功能和体验。这个插件允许用户在网页上创建、编辑和管理数据,具有高度的灵活性和自定义性,使得开发者能够轻松地在网页上实现复杂的...
这里的移动操作是通过insertAfter()和insertBefore()两个jQuery方法来实现的。insertAfter()方法用于将被选元素插入到目标元素的后面,而insertBefore()方法则是插入到目标元素的前面。这两个方法非常适合用来实现行...
在返回数据时,Java开发者可以将查询结果转换为JSON格式,供dataTable解析并展示在前端。 **使用步骤:** 1. **引入依赖**:在HTML文件中引入jQuery库和dataTable的相关CSS、JS文件。 2. **初始化表格**:在HTML...
排序的方式通常是删除现有数据库中的数据,然后重新保存排序后的列表,以实现表格行顺序的更新。 然而,这种方法存在一个缺点:如果表格数据是分页显示的,仅对第一页进行排序会导致后续页面的排序出现问题。为了...
5. **表格(Table)**:EasyUI 的表格组件具有强大的数据展示和管理能力,支持分页、排序、过滤、编辑等功能,并能与后端数据库无缝对接。 6. **表单(Form)**:表单组件提供了各种表单元素,如输入框、选择框、复...