zoukankan      html  css  js  c++  java
  • 重新=》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");  

  • 相关阅读:
    P1144 最短路计数 题解 最短路应用题
    C++高精度加减乘除模板
    HDU3746 Teacher YYF 题解 KMP算法
    POJ3080 Blue Jeans 题解 KMP算法
    POJ2185 Milking Grid 题解 KMP算法
    POJ2752 Seek the Name, Seek the Fame 题解 KMP算法
    POJ2406 Power Strings 题解 KMP算法
    HDU2087 剪花布条 题解 KMP算法
    eclipse创建maven项目(详细)
    maven的作用及优势
  • 原文地址:https://www.cnblogs.com/huangf714/p/5872950.html
Copyright © 2011-2022 走看看