1. $.extend($.fn.datagrid.methods,{
  2. columnMoving: function(jq){
  3. return jq.each(function(){
  4. var target = this;
  5. var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
  6. cells.draggable({
  7. revert:true,
  8. cursor:'pointer',
  9. edge:5,
  10. proxy:function(source){
  11. var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
  12. p.html($(source).text());
  13. p.hide();
  14. return p;
  15. },
  16. onBeforeDrag:function(e){
  17. e.data.startLeft = $(this).offset().left;
  18. e.data.startTop = $(this).offset().top;
  19. },
  20. onStartDrag: function(){
  21. $(this).draggable('proxy').css({
  22. left:-10000,
  23. top:-10000
  24. });
  25. },
  26. onDrag:function(e){
  27. $(this).draggable('proxy').show().css({
  28. left:e.pageX+15,
  29. top:e.pageY+15
  30. });
  31. return false;
  32. }
  33. }).droppable({
  34. accept:'td[field]',
  35. onDragOver:function(e,source){
  36. $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
  37. $(this).css('border-left','1px solid #ff0000');
  38. },
  39. onDragLeave:function(e,source){
  40. $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
  41. $(this).css('border-left',0);
  42. },
  43. onDrop:function(e,source){
  44. $(this).css('border-left',0);
  45. var fromField = $(source).attr('field');
  46. var toField = $(this).attr('field');
  47. setTimeout(function(){
  48. swapField(fromField,toField);
  49. $(target).datagrid();
  50. $(target).datagrid('columnMoving');
  51. },0);
  52. }
  53. });
  54. // swap Field to another location
  55. function swapField(from,to){
  56. var columns = $(target).datagrid('options').columns;
  57. var cc = columns[0];
  58. _swap(from,to);
  59. function _swap(fromfiled,tofiled){
  60. var fromtemp;
  61. var totemp;
  62. var fromindex = 0;
  63. var toindex = 0;
  64. for(var i=0; i<cc.length; i++){
  65. if (cc[i].field == fromfiled){
  66. fromindex = i;
  67. fromtemp = cc[i];
  68. }
  69. if(cc[i].field == tofiled){
  70. toindex = i;
  71. totemp = cc[i];
  72. }
  73. }
  74. cc.splice(fromindex,1,totemp);
  75. cc.splice(toindex,1,fromtemp);
  76. }
  77. }
  78. });
  79. }
  80. });

调用$('#dg').datagrid({.....}).datagrid("columnMoving");

重新=》easyui DataGrid是否可以动态的改变列显示的顺序的更多相关文章

  1. jquery easyui DataGrid 动态的改变列显示的顺序

    $.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...

  2. Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

    Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...

  3. easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现

    easyui datagrid里的toobar按钮隐藏.显示.禁用等方式的实现 //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分 ...

  4. JQuery easyUi datagrid 中 editor 动态设置最大值最小值

    前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考.   问题 JQuery easyUi datagri ...

  5. easyui DataGrid表体单元格跨列rowspan

    最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...

  6. EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题

    症状如图: 上图中,行号列与checkbox 列融合了.解决方法是在datagrid 的 onLoadSuccess 事件中加入如下代码: var opts = $(this).datagrid('o ...

  7. 【技巧】easyUI datagrid在隐藏时加载,显示时无法加载出界面

    注意在显示时调用再调用一次resize就可以显示出来 $("#"+datagridId).datagrid("resize");

  8. easyui DataGrid 工具类之 后台生成列

    @SuppressWarnings({ "rawtypes", "unchecked" })    public Map<String, Object&g ...

  9. easyui datagrid设置fit: true后,页面显示不全的情况

    跟工具栏有关 <div id="tb"> <div style="float:left;"> <a href="#&qu ...

随机推荐

  1. Mac怎样改动开机password

    Mac开机password忘了,咋办?开不开机啦 1.打开你的Mac,command +S 进入你的终端界面 2.输入/sbin/mount -uaw / 3.输入rm /var/db/.AppleS ...

  2. GIS中要素的捕捉以及C++实现

    这篇文章早在去年就写出来了,但是由于当时毕业论文有一段是直接引用了我的这篇文章,怕引起查重的麻烦就删掉了,在此,重新挂出来和大家一起分享. 要素的选择,也称为要素的捕捉,在CAD.计算机图形学和地理信 ...

  3. es5 - array - join

    /** * join描述:将数组(或类数组对象)的所有元素连接到一个字符串中并返回此字符串. * join语法:arr .join([ separator]) * join参数:指定用于分隔数组的每对 ...

  4. JAVA学习目录

    开发环境以及IDE准备相关: 1.JAVA环境搭建 2.初次使用IntelliJ IDEA 3.IntelliJ IDEA界面设置 4.IntelliJ IDEA快捷键介绍 SprintBoot系列: ...

  5. &lt;转&gt;云主机配置OpenStack使用spice的方法

    按官方文档(openstack-install-guide-yum-juno)搭建和配置的OpenStack默认使用novnc作为云主机的控制台訪问方式,假设须要配置使用GUI的操作系统,会显得比較尴 ...

  6. JavaScript 数组方法处理字符串 prototype

    js中数组有许多方法,如join.map,reverse.字符串没有这些方法,可以“借用”数组的方法来处理字符串. <!doctype html> <html lang=" ...

  7. JDBC 数据库连接池的简单实现

    连接池代码: public class MyDataSource2{     private static String url = "jdbc:mysql://localhost:3306 ...

  8. Solr之困

    http://www.kafka0102.com/2010/08/319.html重写公司的站内搜索.经过前期一段时间对lucene和solr的熟悉,最后决定使用Solr作为新系统的基础框架.现在已经 ...

  9. Redis全方位讲解--哨兵模式(Sentinel模式)(转载)

    前言 当按照上一篇<redis主从复制>部署好之后,我们会想,一旦redis的master出现了宕机,并且我们并没有及时发现,这时候就可能会出现数据丢失或程序无法运行.此时,redis的哨 ...

  10. 我的SpringMvc学习之路之注解

    用注解取代配置文件可降低编程是不必要的麻烦和错误. @Controller  控制器定义 在一个class的上面写上@controller声明此类为控制器类.在配置中*.dispatcher.xml里 ...