重新=》easyui DataGrid是否可以动态的改变列显示的顺序

Posted 芜明-追星

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重新=》easyui DataGrid是否可以动态的改变列显示的顺序相关的知识,希望对你有一定的参考价值。

  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.               
  55.             // swap Field to another location  
  56.             function swapField(from,to){  
  57.                 var columns = $(target).datagrid(‘options‘).columns;  
  58.                 var cc = columns[0];  
  59.                 _swap(from,to);  
  60.                 function _swap(fromfiled,tofiled){  
  61.                     var fromtemp;  
  62.                     var totemp;  
  63.                     var fromindex = 0;  
  64.                     var toindex = 0;  
  65.                     for(var i=0; i<cc.length; i++){  
  66.                         if (cc[i].field == fromfiled){  
  67.                             fromindex = i;  
  68.                             fromtemp = cc[i];  
  69.                         }  
  70.                         if(cc[i].field == tofiled){  
  71.                             toindex = i;  
  72.                             totemp = cc[i];  
  73.                         }  
  74.                     }  
  75.                     cc.splice(fromindex,1,totemp);  
  76.                     cc.splice(toindex,1,fromtemp);  
  77.                 }  
  78.             }  
  79.         });  
  80.     }  
  81. });  

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

以上是关于重新=》easyui DataGrid是否可以动态的改变列显示的顺序的主要内容,如果未能解决你的问题,请参考以下文章

求教easyui datagrid如何动态生成列

easyUI datagrid 动态控制列的隐藏和显示

easyui datagrid动态加载数据

easyui datagrid动态加载数据

easyui datagrid 动态拼接columns以及赋值

EasyUI中如何给datagrid动态增加行,怎么使该行是可以编辑的