栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

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

先上html代码,很简单:

复制代码




 
 jqueryUI拖动




 tr{cursor: pointer;}


序号 年份 标题 作者
1 2014 这是第1个 阿斯蒂芬阿斯蒂芬
2 2015 这是第2个 阿萨德发射点发岁的
3 2016 这是第3个 阿萨德发送地方
4 2017 这是第4个 的说法大赛分

复制代码
除了要引入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();
 });


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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/93654.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号