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

最新推荐文章于 2019-05-29 16:37:41 发布

weixin_30586085

最新推荐文章于 2019-05-29 16:37:41 发布

阅读量165

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6361358.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(); 
  
   });