随笔 - 13  文章 - 3  评论 - 1  阅读 - 14039

分页拖放排序dragsort

本功能针对表格实现分页

需要引用jquery及其插件jqurey.dragsort

处理器参见:  在服务器端实现数据任意排序算法

 

先看一下示例代码:

1 $('table.list').tableDragsort({
2     handler:'/user/sort',     //排序处理器
3     selector:'.moveable',     //拖放对象选择器
4     data:{}                   //附加参数
5     page:2,                   //当前页号
6     pageCount:3               //分页总数
7 });

 

源代码:

复制代码
 1 $.fn.tableDragsort = function(setting)
 2 {
 3     setting = $.extend({handler:'', selector:'tr', data:{}}, setting);
 4     if($(this).find('tbody tr').length > 1 || $(this).find('tbody tr').length == 1 && setting.page > 1){
 5         var t = $(this);
 6         var cs = $(this).find('tbody tr:first td').length;
 7         if(setting.page > 1){
 8             t.prepend('<tr class="prev"><td colspan="' + cs + '" style="color:#ccc">移到上一页</td></tr>');
 9         }
10         if(setting.page < setting.pageCount){
11             t.append('<tr class="next"><td colspan="' + cs + '" style="color:#ccc">移到下一页</td></tr>');
12         }
13         var ref = function(){
14             t.find("tbody tr").each(function(i){$(this).attr('index', i)});
15             t.find('.prev').attr('id', '-'+t.find('.prev').next().attr('id'));
16             t.find('.next').attr('id', '+'+t.find('.next').prev().attr('id'));
17         }
18         ref();
19         $(this).dragsort({
20             dragSelector: setting.selector,
21             dragBetween: false,
22             placeHolderTemplate: '<tr><td colspan="' + cs + '">&nbsp;</td></tr>',
23             itemSelector: 'tr[index]',
24             dragEnd: function () {
25                 var o = $(this);
26                 var id = o.attr('id');
27                 var i = parseInt(o.attr('index'));
28                 var target_id = 0;
29                 if (parseInt(o.next().attr('index')) < i) {
30                     target_id = o.next().attr("id");
31                 }else if(parseInt(o.prev().attr('index')) > i) {
32                     target_id = o.prev().attr("id");
33                 }
34                 t.find('.next,.prev').hide();
35                 $.post(setting.handler, $.extend(setting.data,{
36                     id: id,
37                     target_id: target_id
38                 }), function (r) {
39                     if (r.status === 1) {
40                         var flag = target_id.substr(0, 1);
41                         if(flag == '+'){
42                             goto(setting.page + 1);
43                         }else if(flag == '-') {
44                             goto(setting.page - 1);
45                         }else{
46                             ref();
47                         }
48                     } else {
49                         artDialog.alert(r.info);
50                         i = i - 1;
51                         if(i > -1)
52                             o.insertAfter(o.parent().find('tr[index="' + i + '"]'));
53                         else
54                             o.prependTo(o.parent());
55                     }
56                 });
57             }
58         }).find('tr[index] '+ setting.selector).bind('mousedown', function(){
59             t.find('.next,.prev').show();
60         }).bind('mouseup', function(){
61             t.find('.next,.prev').hide();
62         }).trigger('mouseup');
63     }
64     return $(this);
65 }
复制代码

 

posted on   Freewing  阅读(421)  评论(0编辑  收藏  举报
编辑推荐:
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· C# 深度学习框架 TorchSharp 原生训练模型和图像识别
阅读排行:
· 这或许是全网最全的 DeepSeek 使用指南,95% 的人都不知道的使用技巧(建议收藏)
· 拒绝繁忙!免费使用 deepseek-r1:671B 参数满血模型
· 本地搭建DeepSeek和知识库 Dify做智能体Agent(推荐)
· Sdcb Chats 重磅更新:深度集成 DeepSeek-R1,思维链让 AI 更透明!
· DeepSeek-R1本地部署如何选择适合你的版本?看这里
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示