博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
easyui实现datagrid列标题拖动
阅读量:7003 次
发布时间:2019-06-27

本文共 2787 字,大约阅读时间需要 9 分钟。

hot3.png

1.添加js到页面

$.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 = $('
').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

2.在对应的datagrid实例化之后,添加本功能。

$('#id').datagrid("columnMoving");

 

3.享受:

8ca232fca4466c82eddb3b92d5af2a982e7.jpg

Ps:easyui1.5.2 转载,抄袭https://blog.csdn.net/gxuehe/article/details/78985043

转载于:https://my.oschina.net/gxs2012/blog/2252034

你可能感兴趣的文章