在做这个功能的时候在网上找了大量资料,发现都不适用,要不然就是代码太冗余,所以另起炉灶,自己封装了这个函数

下面是完整的代码:

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <link rel="stylesheet" href="easyui/themes/default/easyui.css"/>

     <link rel="stylesheet" href="easyui/themes/icon.css"/>

     <script src="easyui/jquery.min.js"></script>

     <script src="easyui/jquery.easyui.min.js"></script>

     <script src="easyui/locale/easyui-lang-zh_CN.js"></script>

 </head>

 <body>

 <div id="tab1">

     <table id="removeCell1">

     <thead>

     <tr>

         <th data-options="field:'X',width:50,align:'center',sortable:true">X</th>

         <th data-options="field:'Y',width:50,align:'center',sortable:true">Y</th>

         <th data-options="field:'Z',width:50,align:'center',sortable:true">Z</th>

         <th data-options="field:'IMSI',width:50,align:'center',sortable:true">A</th>

         <th data-options="field:'Status',width:50,align:'center',sortable:true">B</th>

         <th data-options="field:'Online',width:50,align:'center',sortable:true">C</th>

     </tr>

     </thead>

 </table>

 </div>

 <div id="tab2">

     <table id="removeCell2">

     <thead>

     <tr>

         <th data-options="field:'X',width:50,align:'center',sortable:true">X</th>

         <th data-options="field:'Y',width:50,align:'center',sortable:true">Y</th>

         <th data-options="field:'Z',width:50,align:'center',sortable:true">Z</th>

         <th data-options="field:'IMSI',width:50,align:'center',sortable:true">A</th>

         <th data-options="field:'Status',width:50,align:'center',sortable:true">B</th>

         <th data-options="field:'Online',width:50,align:'center',sortable:true">C</th>

     </thead>

 </table>

 </div>

 <script>

     $("#removeCell1").datagrid({

         rownumbers:true,

         width:380,

         height:300,

         singleSelect:true,

         multiSort:true,

         remoteSort:true,

         url:"query.json",

         onLoadSuccess:function() {

             remove("tab1");

         }

     })

     $("#removeCell2").datagrid({

         rownumbers:true,

         width:380,

         height:300,

         singleSelect:true,

         multiSort:true,

         remoteSort:true,

         url:"query.json",

         onLoadSuccess:function() {

             remove("tab2");

         }

     })

     function remove(limit) {

         var dom='.datagrid-header-inner .datagrid-cell';

         var tbodyTr = $(".datagrid-view2 .datagrid-body .datagrid-btable tbody tr");

         if(limit){

             dom='#'+limit+' .datagrid-header-inner .datagrid-cell';

             tbodyTr = $("#"+limit+" .datagrid-view2 .datagrid-body .datagrid-btable tbody tr");

         }

         $(dom).draggable({

             revert: true,

             proxy: 'clone'

         }).droppable({

             accept: dom,

             onDrop: function (e, source) {

                 var destination=$(e.currentTarget).parent().index();

                 var start=$(source).parent().index();

                 if(destination<start){

                     $(source).parent().insertBefore($(e.currentTarget).parent());

                 }else{

                     $(source).parent().insertAfter($(e.currentTarget).parent());

                 }

                 for(var i=0;i<tbodyTr.length;i++){

                     var cell1=$(tbodyTr[i]).find("td")[destination];

                     var cell2=$(tbodyTr[i]).find("td")[start];

                     if(destination<start){

                         $(cell2).insertBefore($(cell1));

                     }else{

                         $(cell2).insertAfter($(cell1));

                     }

                 }

             }

         });

     }

 </script>

 </body>

 </html>

我定义了两个table,table外部必须包裹有唯一id的div,这是要保证两个table之间的操作互不影响.

主要实现功能的就是remove()这个函数,里面传入的参数是table外面div的ID,这样可以区分两个table的操作。

如果你的页面只有一个table的话不传参数也是可以的,也可以把limit参数相关的代码删除.

remove()函数需要在datagrid数据加载完成后调用,否则拖动时只有列头改变.

缺点:

这个函数虽然解决了列表拖动的问题,同时也产生了新的问题--------单击排序

当鼠标放到列头时会变成可拖动的标识,这时排序就没用了吗?当然不是,虽然单击时有影响,但是我发现双击还是有用的哦!

如果你对这个缺点不能容忍的话,欢迎提出新的解决方案.

请尊重别人的劳动成果,转载务必标明出处!

datagrid拖动列头更换排列顺序的更多相关文章

  1. WPF 用 DataTemplate 合并DataGrid列表列头<类似报表设计>及行头列头样式 - 学习

    WPF中 DataGrid 列头合并,类似于报表设计.效果图如下↓ 1.新建一个WPF项目WpfApplication1,新建一个窗体DataGridTest,前台代码如下: <Window x ...

  2. datatable 修改点击列头进行排序顺序

    一般点击排序时,是先升序后降序 可以通过如下代码修改排序规则 jQuery(function ($) { $(".datatable").dataTable({ "pag ...

  3. 实现在easyui中的datagrid，点击某一列的列头弹出combobox下拉框

    easyUI  datagrid在列头加下拉框,实现对列内容的筛选. 代码: onLoadSuccess: function (data) {//Fires when data is loaded s ...

  4. Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS

    Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能: 如图: 然后可以取消勾选,就变成下面这个样子: 功能的实现是通过重写了easyui 的 $.fn.datagrid.defau ...

  5. DataGridView使用技巧七：列顺序的调整、操作行头列头的标题

    一.列顺序的调整 设定DataGridView的AllowUserToOrderColumns为True的时候,用户可以自由调整列的顺序. 当用户改变列的顺序的时候,其本身的Index不好改变,但是D ...

  6. datagrid 绑定选中数据，列头全选

    成品图: xaml代码 <Grid> <DataGrid x:Name="datagrid" Height="Auto" Width=&quo ...

  7. MFC listcontrol 分列 添加行数据 点击列头排序

    适用于 对话框程序 1.在工具箱中拖出 ListControl,然后右键-属性,view-Report 让你的ListControl变成这幅模样! 2.添加ListControl控件的control类 ...

  8. WPF DataGrid某列使用多绑定后该列排序失效，列上加入 SortMemberPath 设置即可.

    WPF DataGrid某列使用多绑定后该列排序失效 2011-07-14 10:59hdongq | 浏览 1031 次  悬赏:20 在wpf的datagrid中某一列使用了多绑定,但是该列排序失 ...

  9. Asp.net的DataGrid实现列冻结（C#）

    # Asp.net的DataGrid实现列冻结(C#) 一.写在前面 列冻结即在拖动横向滚动条时,冻结的列会随着滚动条移动,使得该列不会因为拖动滚动条而被隐藏,呈现出仿佛冻结的效果.列冻结与表头冻结是 ...

随机推荐

  1. 使用jQuery操作Cookies

    转载自: https://www.cnblogs.com/yonge/articles/2698106.html Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的 ...

  2. win7查看某个端口被占用的解决方法

    1.开始---->运行---->cmd,或者是window+R组合键,调出命令窗口. 2.输入命令:netstat -ano,列出所有端口的情况.在列表中我们观察被占用的端口,比如是491 ...

  3. js浏览器调试

    JS调试 sources界面(主要用来控制执行) 打断点,右上角四个按钮分别是:跳到下一个断点,单步调试,跳入,跳出. 鼠标悬浮在变量上可以查看变量的属性: console界面(主要用于查看输出) 主 ...

  4. Css选择器定位详解

    1.使用 class 属性来定位元素,方法如下: driver.findElement(By.cssSelector("input.login")); 即可以先指定一个 HTML的 ...

  5. 协程+IO切换实现并发

    from gevent import monkey # 以后代码中遇到IO都会自动执行greenlet的switch进行切换 monkey.patch_all() import requests im ...

  6. Event对象、队列、multiprocessing模块

    一.Event对象 线程的一个关键特性是每个线程都是独立运行且状态不可预测.如果程序中的其他线程需要通过判断某个线程的状态来确定自己下一步的操作,这时线程同步问题就 会变得非常棘手.为了解决这些问题, ...

  7. PHP memcache的使用教程

    (结尾附:完整版资源下载) 首先,为什么要用memcached?如果你看过InnoDB的一些书籍,你应该知道在存储引擎那一层是由一个内存池的.而在内存池中 又有一个缓冲池.而缓冲池就会缓冲查找的数据, ...

  8. bootstrap基本使用

    bootstrap是封装了css和js代码实现酷炫的效果,所以使用的时候,比如说是列表效果,直接调用它本身定义的函数就ok了 静态文件 把href='..static/..'里面改为url_for静态 ...

  9. 谷歌Project Fi服务（转）

    问:谷歌推出的移动虚拟网络Project Fi到底是什么呀? 答:谷歌手里有很多张“牌”可以出,现在这家搜索巨头又将目标放在了无线产业.在美国,移动电信合约服务是AT&T, Verizon, ...

  10. IE调试页面总结

    随着IE版本的升级,IE变的越来越强大,随之带来的问题也是越来越明显,如:如何调试在低版本的浏览器中 的情况 IE9的方法: 出于未知需求,用户在安装了较高版本IE浏览器(IE9)之后,又需要使用低版 ...