`

jquery实现上下移动table列,并将排序保存至数据库

 
阅读更多

<!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 实现上下移动元素排序无刷新

    本教程将探讨如何利用jQuery实现元素上下移动的排序功能,且在用户操作过程中无需页面刷新,提供流畅的用户体验。同时,我们还将讨论如何通过Ajax技术同步更新后台数据库中的排序信息。 ### 1. jQuery基本概念 ...

    XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子

    通过监听鼠标事件,如mousedown、mousemove和mouseup,当用户在列头按下并移动鼠标时,可以实现列位置的动态调整。同时,后台需要处理新的列顺序,确保数据绑定时能正确显示。 可排序功能通常由DataGrid的内置功能...

    jquery数据列表(需要json.jar)

    6. **添加交互功能**:根据需求,可能还需要添加排序、筛选、编辑等交互功能,这可以通过监听jQuery事件并调用Flexigrid的相关方法来实现。 在实际项目中,开发者还需要考虑性能优化,如使用异步加载大数据集,以及...

    jQuery实现表格列表拖动排序特效源码.zip

    此压缩包"jQuery实现表格列表拖动排序特效源码.zip"显然是一个包含示例代码的资源,用于演示如何利用jQuery来创建具有拖动排序功能的表格列表。下面将详细介绍这个知识点及其相关技术。 首先,jQuery中的拖放(Drag...

    jQuery表格列表拖动排序代码.zip

    本篇文章将详细介绍如何使用jQuery实现表格列表的拖动排序功能,以及"jQuery表格列表拖动排序代码.zip"中的具体实现方法。 一、jQuery拖动排序的基本原理 jQuery拖动排序功能基于HTML5的拖放(Drag and Drop)API...

    ssm框架整合+jQuery+Bootstrap实现表格数据增删改查

    项目完成后,用户可以在浏览器中看到一个带有搜索、排序功能的表格,通过jQuery实现的增删改查按钮,可以无刷新地对数据进行操作,同时Bootstrap的反馈提示和验证也能提升用户体验。 总的来说,这个项目是一个典型...

    table排序

    标题中的“table排序”指的是在计算机编程中对表格数据进行排序的一种常见操作。这通常涉及到在HTML、JavaScript、SQL或各种编程语言中的实现。在网页开发中,表格(table)是一种展示结构化数据的标准方式,而对...

    JS控制HTMLDOM表格行上下移动

    这种功能在数据管理界面中很有用,例如在线表格编辑、数据库记录排序等。用户可以方便地调整数据顺序,而无需通过后台服务。 8. **源码分析** 提供的链接可能包含实现这一功能的具体代码,通过阅读源码可以学习到...

    php+mysql+js拖拽div实例

    本实例将介绍如何使用PHP、MySQL和JavaScript实现一个拖拽Div的动态效果,并将其数据保存到数据库中,便于后续处理和展示。 **一、JavaScript拖拽功能实现** 1. **事件监听**:首先,我们需要在HTML中为要拖动的...

    tableEditor

    "tableEditor"是一款基于jQuery的高级表格编辑器控件,主要设计用于Web应用程序,提供强大的数据展示和编辑功能。这款控件集成了GridView的概念,使得网页中的表格操作更加灵活和直观,大大提升了用户在网页上处理...

    jquery表格插件jqgrid

    1. **数据展示**:jqGrid可以轻松地展示成千上万条记录,并支持分页、排序、搜索和过滤等功能,提供高效的用户体验。 2. **列自定义**:用户可以根据需求自由定义列的显示方式,包括宽度、对齐方式、可编辑性等,...

    BOOTSTRAP-TABLE源码

    5. **插件和扩展**:BOOTSTRAP-TABLE提供了许多插件和扩展,如分页、排序、搜索、列选择、行选择、固定列等,这些功能可以通过简单的配置选项启用。 6. **API和事件**:BOOTSTRAP-TABLE有一套完整的API和事件机制,...

    Jquery FlexiGrid JS

    下面将详细介绍jQuery FlexiGrid JS的核心特性、工作原理以及如何在前后台实现数据传递。 1. **核心特性** - **数据呈现**:FlexiGrid能够以表格形式展示数据,支持多列和自定义列宽。 - **分页**:提供内置的...

    jquery可编辑性表格

    4. **数据更新**:当用户完成编辑并保存时,通过Ajax发送更新请求到服务器,将新值保存到数据源。同时,更新表格中的显示。 5. **错误处理**:在编辑和保存过程中,应处理可能出现的错误,如数据验证失败、网络故障...

    drag and drop js拖拽实现,分页排序tables

    在本文中,我们将深入探讨如何使用JavaScript实现拖放(Drag and Drop)功能,以及如何将这一特性应用到分页表格的排序中。首先,我们来看看拖放功能的基本原理。 拖放是网页交互的一种常见方式,它允许用户通过...

    jquery.sheet

    **jQuery.sheet**是一款基于jQuery的表格插件,它旨在为Web应用提供类似Excel的功能和体验。这个插件允许用户在网页上创建、编辑和管理数据,具有高度的灵活性和自定义性,使得开发者能够轻松地在网页上实现复杂的...

    jquery调整表格行tr上下顺序实例讲解

    这里的移动操作是通过insertAfter()和insertBefore()两个jQuery方法来实现的。insertAfter()方法用于将被选元素插入到目标元素的后面,而insertBefore()方法则是插入到目标元素的前面。这两个方法非常适合用来实现行...

    基于jQuery的强大的表格插件 dataTable

    在返回数据时,Java开发者可以将查询结果转换为JSON格式,供dataTable解析并展示在前端。 **使用步骤:** 1. **引入依赖**:在HTML文件中引入jQuery库和dataTable的相关CSS、JS文件。 2. **初始化表格**:在HTML...

    BootStrap table实现表格行拖拽效果

    排序的方式通常是删除现有数据库中的数据,然后重新保存排序后的列表,以实现表格行顺序的更新。 然而,这种方法存在一个缺点:如果表格数据是分页显示的,仅对第一页进行排序会导致后续页面的排序出现问题。为了...

    jQuery-EasyUI v1.8.0

    5. **表格(Table)**:EasyUI 的表格组件具有强大的数据展示和管理能力,支持分页、排序、过滤、编辑等功能,并能与后端数据库无缝对接。 6. **表单(Form)**:表单组件提供了各种表单元素,如输入框、选择框、复...

Global site tag (gtag.js) - Google Analytics