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

下面是完整的代码:

 <!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. ArcGIS runtime sdk for wpf 授权

    这两天由于runtime sdk for wpf的授权和runtime sdk 其他产品的授权的不一样导致自己混乱不堪. 总结下吧. sdk 简介 当前ArcGIS runtime sdk 包括一系列 ...

  2. Java 集合框架查阅技巧

    如何记录每一个容器的结构和所属体系呢? List ArrayList LinkedList Set HashSet TreeSet 其中,后缀名就是该集合所属的体系,前缀名就是该集合的数据结构. 看到 ...

  3. Linux network 资料链接

    1.iptables 基础 https://wiki.centos.org/HowTos/Network/IPTables 2.HOWTOs on netfilter site http://www. ...

  4. 006-基于hyperledger fabric1.4（ 官方文档）编写第一个应用【外部nodejs调用】

    一.概述 官方原文地址 Writing Your First Application如果对fabric网络的基本运行机制不熟悉的话,请看这里. 注意:本教程是对fabric应用以及如何使用智能合约的简 ...

  5. NoSQL选型及HBase案例详解(转)

    从 NOSQL的类型到 常用的产品,我们已经做过很多关于NoSQL的文章,今天我们从国内著名的互联网公司及科研机构的实战谈一下NoSQL数据库. NoSQL一定程度上是基于一个很重要的原理—— CAP ...

  6. mysql安装前的系统准备工作

    一.系统环境总结:

  7. Hadoop2.0NameNode HA和Federation实践

    一.背景 天云趋势在2012年下半年开始为某大型国有银行的历史交易数据备份及查询提供基于Hadoop的技术解决方案,由于行业的特殊性,客户对服务的可 用性有着非常高的要求,而HDFS长久以来都被单点故 ...

  8. ServiceModel 元数据实用工具 (Svcutil.exe)

    ServiceModel 元数据实用工具用于依据元数据文档生成服务模型代码,以及依据服务模型代码生成元数据文档 一.SvcUtil.exe ServiceModel 元数据实用工具可在 Windows ...

  9. dojo 代码调试

    安装 Firebug 使用firedug

  10. Vue-router学习（一）- 路由匹配

    一.Vue-router引入使用 Vue-router就是一个vue路由类,通过new一个Vue路由实例,然后Vue.use()嵌入即可. 一般分为以下步骤: 1.引入 (1).方法一:npm包嵌入, ...