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

网络编程针对后台列表table拖拽比较实用的jquery拖动排序 06-22

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

话不多说，我在网上找了一些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继承extend用法详解
本文实例为大家jQuery继承extend用法，供大家参考，具体内容如下js代码//直接基于jQuery的扩展,判断是否为空$.isBlank=function(obj){return(typeof(obj)=='undefined'||obj

jQuery EasyUI tree 使用拖拽时遇到的错误小结
在我使用tree拖拽时总是失败，控制台输出了很多错误。经过跟踪分析发现这是一个由于特殊配置导致的错误。原先错误的代码如下：$('#tree').tree({//省略

jQuery ajax MD5实现用户注册即时验证功能
实际项目中比较常用的(JQuery+AJAX+MD5)，属于即时验证，亮点是验证用户是否存在的那一项，具体内容如下具体示例registe.jspspanstyle="font-size:large;"%@pagepageEn

编辑：广州明生堂生物科技有限公司

标签：这是,代码,错误,拖拽,拖动