easyui datagrid列实现动态拖拽列功能
2018-01-05 20:43
471 查看
easyui datagrid列实现动态拖拽列功能,测试在1.5.2版本下无报错,mark
$.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); } } }); } });
转载自 https://www.cnblogs.com/wangjiahong/p/4564174.html
相关文章推荐
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
- easyui datagrid 动态生成列的实现
- easyui datagrid 动态表头 动态columns 的一种实现方式
- Jquery easyUI—datagrid数据表修改功能实现
- Easyui datagrid+ashx 实现动态生成列
- easyui-edatagrid.js实现回车键结束编辑功能
- datagrid多层表头及datagrid列动态统计功能的实现 【转】
- easyui Datagrid+searchbox 实现搜索功能
- easyui datagrid 生成动态列后 实现分页
- easyui-edatagrid.js实现回车键结束编辑功能
- activiti 动态表单+easyui 实现审核流程功能
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能 activeandbadboy [原作]
- easyui自定义扩展视图实现功能--------datagrid返回记录为0时显示“没有记录”
- Easyui datagrid 动态合并单元格实现
- easyui实现可新增不可编辑的datagrid及动态配置列隐藏/显示
- EasyUI_datagrid实现动态加载列并为其绑定数据
- Flex3 DataGrid拖拽到ClumnChart动态显示图表实现代码
- EasyUI-DataGrid多行动态选择性合并算法实现
- EasyUI datagrid 复选框可以多选但不能全选功能实现
- 实例:SSH结合Easyui实现Datagrid的批量删除功能