重新=》easyui DataGrid是否可以动态的改变列显示的顺序
- $.extend($.fn.datagrid.methods,{
- columnMoving: function(jq){
- return jq.each(function(){
- var target = this;
- var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
- cells.draggable({
- revert:true,
- cursor:'pointer',
- edge:5,
- proxy:function(source){
- var p = $('<div class="tree-node-proxy tree-dnd-no" style="position:absolute;border:1px solid #ff0000"/>').appendTo('body');
- p.html($(source).text());
- p.hide();
- return p;
- },
- onBeforeDrag:function(e){
- e.data.startLeft = $(this).offset().left;
- e.data.startTop = $(this).offset().top;
- },
- onStartDrag: function(){
- $(this).draggable('proxy').css({
- left:-10000,
- top:-10000
- });
- },
- onDrag:function(e){
- $(this).draggable('proxy').show().css({
- left:e.pageX+15,
- top:e.pageY+15
- });
- return false;
- }
- }).droppable({
- accept:'td[field]',
- onDragOver:function(e,source){
- $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
- $(this).css('border-left','1px solid #ff0000');
- },
- onDragLeave:function(e,source){
- $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
- $(this).css('border-left',0);
- },
- onDrop:function(e,source){
- $(this).css('border-left',0);
- var fromField = $(source).attr('field');
- var toField = $(this).attr('field');
- setTimeout(function(){
- swapField(fromField,toField);
- $(target).datagrid();
- $(target).datagrid('columnMoving');
- },0);
- }
- });
- // swap Field to another location
- function swapField(from,to){
- var columns = $(target).datagrid('options').columns;
- var cc = columns[0];
- _swap(from,to);
- function _swap(fromfiled,tofiled){
- var fromtemp;
- var totemp;
- var fromindex = 0;
- var toindex = 0;
- for(var i=0; i<cc.length; i++){
- if (cc[i].field == fromfiled){
- fromindex = i;
- fromtemp = cc[i];
- }
- if(cc[i].field == tofiled){
- toindex = i;
- totemp = cc[i];
- }
- }
- cc.splice(fromindex,1,totemp);
- cc.splice(toindex,1,fromtemp);
- }
- }
- });
- }
- });
调用$('#dg').datagrid({.....}).datagrid("columnMoving");