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

话不多说 ，我在网上找了一些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. CF525E Anya and Cubes（meet in the middle）

    题面 给你\(n\)个数,\(n\le 26\)初始序列为\(a_i,0\le a_i\le 10^9\) 你有\(k\)个\(!\),每个\(!\)可以使序列中的一个数变成\(a_i!\) 例如\( ...

  2. loj #6235. 区间素数个数 min_12.5筛

    \(\color{#0066ff}{ 题目描述 }\) 求 \(1\sim n\) 之间素数个数. \(\color{#0066ff}{输入格式}\) 一行一个数 n . \(\color{#0066 ...

  3. 树链剖分【洛谷P3833】 [SHOI2012]魔法树

    P3833 [SHOI2012]魔法树 题目描述 Harry Potter 新学了一种魔法:可以让改变树上的果子个数.满心欢喜的他找到了一个巨大的果树,来试验他的新法术. 这棵果树共有N个节点,其中节 ...

  4. clang -O3 for循环的LLVM IR

    O3都是怪物,这里分析的是CLANG怪物,示例程序遍历数组每个元素然后放大. void foreach_scale(int arr[],int elem){ for(int i=0;i<elem ...

  5. [SCOI2007]蜥蜴 BZOJ1066 最大流

    题目背景 07四川省选 题目描述 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴 ...

  6. 牛客国庆集训day6 B Board （模拟标记思维或找规律或分块？？？）

    链接:https://www.nowcoder.com/acm/contest/206/B来源:牛客网 题目描述 恬恬有一个nx n的数组.她在用这个数组玩游戏: 开始时,数组中每一个元素都是0. 恬 ...

  7. StackOverflow

    stackoverflow栈溢出 stacker栈式存储器 signup注册  signin登陆 inbox收信信箱 verify 核实 otherwise另外的 noted说明  (就是说有明文指出 ...

  8. 关于logrotate工具的日志切割

    logrotate是一个非常好的文件切割工具!! 具体配置如下: /var/log/debug.log{         daily            ; 每天转储         rotate ...

  9. kali2017.2之***ss安装与使用

    一.命令行安装:apt-get install python-pip    ###安装pipsudo pip install shadowsocks    ###安装ssgedit /etc/shad ...

  10. python3 rjust()函数笔记

    #rjust(12,'l')"12是字符串的长度,l是当字符串不够长的时候,用l填充.并且字符串右对齐".返回一个原字符串右对齐,并使用空格填充至长度 width 的新字符串.如果 ...