现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。

话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js

先上html代码，很简单：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jqueryUI拖动</title>

</head>

<script src="js/jquery-1.11.0.min.js"></script>

<script src="js/jquery-ui.min.js"></script>

<style>

    tr{cursor: pointer;}

</style>

<body>

<table id="sort">

    <thead>

    <tr>

        <th class="index">序号</th>

        <th>年份</th>

        <th>标题</th>

        <th>作者</th>

    </tr>

    </thead>

    <tbody>

        <tr>

            <td class="index">1</td>

            <td>2014</td>

            <td>这是第1个</td>

            <td>阿斯蒂芬阿斯蒂芬</td>

        </tr>

        <tr>

            <td class="index">2</td>

            <td>2015</td>

            <td>这是第2个</td>

            <td>阿萨德发射点发岁的</td>

        </tr>

        <tr>

            <td class="index">3</td>

            <td>2016</td>

            <td>这是第3个</td>

            <td>阿萨德发送地方</td>

        </tr>

        <tr>

            <td class="index">4</td>

            <td>2017</td>

            <td>这是第4个</td>

            <td>的说法大赛分</td>

        </tr>

    </tbody>

</table>

</body>

</html>

除了要引入jquery.js 和jqueryUI.js外，还需要如下一段代码：

  $(document).ready(function(){

        var fixHelperModified = function(e, tr) {

                    var $originals = tr.children();

                    var $helper = tr.clone();

                    $helper.children().each(function(index) {

                        $(this).width($originals.eq(index).width())

                    });

                    return $helper;

                },

                updateIndex = function(e, ui) {

                    $('td.index', ui.item.parent()).each(function (i) {

                        $(this).html(i + 1);

                    });

                };

        $("#sort tbody").sortable({

            helper: fixHelperModified,

            stop: updateIndex

        }).disableSelection();

    });

这是我发现的比较实用的一个拖动排序，还是比较方便的。

jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）的更多相关文章

  1. 针对后台列表table拖拽比较实用的jquery拖动排序

    <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8&qu ...

  2. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  3. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

  4. elment-ui table组件 -- 远程筛选排序

    elment-ui table组件 -- 远程筛选排序 基于 elment-ui table组件 开发,主要请求后台实现筛选 排序的功能. 需求 排序 筛选 是对后台整个数据进行操作,而不是对当前页面 ...

  5. Dedecms自定义表单后台列表展现方式更改

    Dedecms有自定义表单功能,方便我们收集用户信息.个人通常喜欢拿这个功能做问卷调查,在线留言等功能.但是如果使用过这个功能的朋友就会知道,Dedecms自定义表单后台列表展现方式并不好看. 上面就 ...

  6. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  7. 使用Jquery.AJAX方法和PHP后台数据交互小结

    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...

  8. 非常强大的table根据表头排序,点击表头名称,对其内容排序

    js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...

  9. ls按时间排序输出文件列表

    文件转自:http://www.2cto.com/os/201303/197829.html ls按时间排序输出文件列表   首先,ls --help查看ls相关的与时间排序相关的参数:   > ...

随机推荐

  1. TreeView —WPF—MVVM—HierarchicalDataTemplate

    摘要:采用HierarchicalDataTemplate数据模板和treeview在MVVM模式下实现行政区划树, 支持勾选.勾选父节点,子节点回全部自动勾选:子节点部分勾选时,父节点半勾选:子节点 ...

  2. C，C++网络编程学习简明指南

    C,C++网络编程学习简明指南 1. 扎实的C,C++基础知识 参考资料<C程序设计>,<C++ primer>. 2. TCP/IP协议 经典书是:W.Richard Ste ...

  3. yyyyMMdd必须严格遵守大小写规范

    c#中ToString("yyyyMMdd") 与ToString("yyyymmdd")区别 string a= DateTime.Now.ToString( ...

  4. 51nod1445(最短路)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1445 题意: 中文题诶~ 思路: 可以将每种颜色看作一个节点 ...

  5. HTTP,HTTPS端口号

    博主暂做个笔记,查询资料再纠正~~~~小白不要不假思索的抄走~~~ 一般情况下,HTTP默认工作端口是8000,HTTPS默认工作端口是443

  6. luogu3327 [SDOI2015]约数个数和

    link 设\(d(x)\)表示x约数个数,给定n,m,\(\sum_{i=1}^n\sum_{j=1}^md(ij)\) 多组询问,1<=T<=50000,1<=N, M<= ...

  7. OpenCV&Qt学习之四——OpenCV 实现人脸检测与相关知识整理

    开发配置 OpenCV的例程中已经带有了人脸检测的例程,位置在:OpenCV\samples\facedetect.cpp文件,OpenCV的安装与这个例子的测试可以参考我之前的博文Linux 下编译 ...

  8. HP EliteBook 8570p TouchPad Issue

    最近更换了笔记本,当时TouchPad总是不能用,有个指示灯总是亮着:同事同型号的就没有这样的问题. Google了好久终于找到了一篇帖子能解决我的问题.分享给朋友们. Link: http://h3 ...

  9. Java类成员变量、普通成员变量、初始化块、构造方法的初始化和执行顺序

    结论:执行的大致顺序如下, (1) 在一个不存在继承的类中:初始化static变量,执行static初始化块-->初始化普通成员变量(如果有赋值语句),执行普通初始化块-->构造方法 (2 ...

  10. maven 配置jetty 插件

    <plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin ...