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

下面是完整的代码:

 <!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. JavaScript 入门之常见对象

    常见对象 1. Object 对象 2. String 对象 3. Array 对象 4. Date 对象 5. Number 对象 6. 自定义对象 with 语句 为了简化对象调用内容的书写 格式 ...

  2. MySQL中的共享锁与排他锁

    MySQL中的共享锁与排他锁 在MySQL中的行级锁,表级锁,页级锁中介绍过,行级锁是Mysql中锁定粒度最细的一种锁,行级锁能大大减少数据库操作的冲突.行级锁分为共享锁和排他锁两种,本文将详细介绍共 ...

  3. 转！！Java设置session超时（失效）的时间

    Java设置session超时(失效)的时间   在一般系统登录后,都会设置一个当前session失效的时间,以确保在用户长时间不与服务器交互,自动退出登录,销毁session具体设置的方法有三种:1 ...

  4. 8.Query Documents-官方文档摘录

    总结 1 先插入数据 db.inventory.insertMany([ { item: "journal", qty: 25, size: { h: 14, w: 21, uom ...

  5. 两款高性能并行计算引擎Storm和Spark比較

    对Spark.Storm以及Spark Streaming引擎的简明扼要.深入浅出的比較,原文发表于踏得网. Spark基于这种理念.当数据庞大时,把计算过程传递给数据要比把数据传递给计算过程要更富效 ...

  6. blogCMS整理

    一.在urls中写路由 二.返回登录页面(login.html中写前端代码) - username(用户名) - password(密码) - validCode(验证码) -submit(提交按钮) ...

  7. 微信小程序组件swiper

    视图容器swiper:官方文档 Demo Code Page({ data:{ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen ...

  8. 转：oralce常用操作、查询语句(查看表空间)

    http://highill.iteye.com/blog/1534858 最近整理一下oralce的常用语句,借此记录一下,在网上都应该能搜到,这里主要是整理分享. 一.操作语句 建立表空间 MYD ...

  9. r.js打包注意事项 r.js打包 这个是配合require.js打包的

    这个./代表的是当前文件的父目录....打包的资源一定要在这个父目录中下面才行,,,,一定一定,要放在这个目录一下才能被正确找到. 不然只是copy了一份一模一样的文件夹和文件过去,并不会处理压缩啥的 ...

  10. redis 笔记04 服务器、复制

    服务器 1. 一个命令请求从发送到完成主要包括以下步骤: 1). 客户端将命令请求发送给服务器 2). 服务器读取命令请求,并分析出命令参数 3). 命令执行器根据参数查找命令的实现函数,然后执行实现 ...