zoukankan      html  css  js  c++  java
  • 针对后台列表table拖拽比较实用的jquery拖动排序

    <!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();
    });
  • 相关阅读:
    JavaScript中的几种继承方式对比
    JavaScript垃圾收集-标记清除和引用计数
    PHP安装sqlsrv扩展步骤,PHP如何连接上SQL
    HTML5的应用缓存
    实现跨域请求的4种方法
    JSON的详细介绍
    Ajax的方法和使用代码
    git常用命令
    关于BOM
    DOM之表格与表单基础分享
  • 原文地址:https://www.cnblogs.com/sjqq/p/6361358.html
Copyright © 2011-2022 走看看