easyui datagrid 列拖拽2
1、拖动前
2、拖动中
3、拖动后
5、代码1
- $("#corp-grid").datagrid({
- title:"泥头车企业管理",
- toolbar:"#corp-grid-toolbar",
- border:false,
- fit:true,
- width:$(window).width()-252,
- columns:[[
- {field:"ckb",checkbox:true},
- {field:"corpName",title:"企业名称",width:200,halign:"center",align:"center",resizable:true},
- {field:"linkedCorpName",title:"挂靠深圳企业名称",width:200,halign:"center",align:"center",resizable:true},
- {field:"corpType",title:"企业类型",width:80,align:"center",resizable:false},
- {field:"businessScope",title:"经营范围",width:80,align:"center",resizable:false},
- {field:"effectiveDate",title:"有效日期",width:80,align:"center",resizable:false},
- {field:"opePeriod",title:"营业期限",width:80,align:"center",resizable:false},
- {field:"ifLocal",title:"是否本地",width:80,align:"center",resizable:false},
- {field:"state",title:"有效状态",width:80,align:"center",resizable:false}
- ]],
- //striped:true,
- fitColumns:true,
- //autoRowHeight:true,
- rownumbers:false,
- singleSelect:false,
- ctrlSelect:true,
- pagination:true,
- pageSize:10,
- pageList:[5,10,15,20,25,30],
- sortName:"corpId",
- sortOrder:"desc",
- url:"corp_getInfoList.action",
- method:"post",
- loadMsg:"加载数据中,请稍后",
- onDblClickRow:function(rowIndex, rowData){
- openDialog({
- type:"view",
- title:"泥头车企业信息查看",
- width:800,
- height:400,
- maximizable:true,
- href:"BaseInfo/Corp/CorpInfoView.html"
- });
- },
- onRowContextMenu:function(e, rowIndex, rowData){
- e.preventDefault();
- $(this).datagrid("unselectAll");
- $(this).datagrid("selectRow", rowIndex);
- $("#corp-menu").menu("show",{
- left:event.pageX,
- top:event.pageY
- });
- }
- }).datagrid("columnMoving");
6.代码2
- $.extend($.fn.datagrid.methods,{
- columnMoving:function(jq){
- return jq.each(function(){
- var grid = this;
- var directionDiv = $("<div></div>");
- directionDiv.hide();
- $("body").append(directionDiv);
- $(grid).datagrid("getPanel")
- .find(".datagrid-header td[field]:not(td[field='ckb'])").draggable({
- revert:true,
- cursor:"move",
- deltaX:10,
- deltaY:10,
- edge:10,
- proxy:function(source){
- var proxyEl = $("<div></div>");
- proxyEl.addClass("dg-proxy dg-proxy-error");
- proxyEl.text($(source).text());
- proxyEl.appendTo($("body"));
- return proxyEl;
- }
- }).droppable({
- accept:".datagrid-header td[field]",
- onDragOver:function(e,source){
- $(source).draggable("proxy").removeClass("dg-proxy-error").addClass("dg-proxy-right");
- $(".dg-hide-div").hide();
- var thisIndex = $(this).index();
- var sourceIndex = $(source).index();
- var className = null;
- var height = null;
- var thisOffset = null;
- var left = null;
- var top = null;
- height = $(this).height();
- if(sourceIndex > thisIndex){
- className = "dg-move-prev";
- thisOffset = $(this).offset();
- left = thisOffset.left;
- top = thisOffset.top;
- }else{
- className = "dg-move-next";
- if(thisIndex == $(this).parent().children(":last").index()){
- thisOffset = $(this).offset();
- left = thisOffset.left + $(this).width() - directionDiv.width();
- top = thisOffset.top;
- }else{
- thisOffset = $(this).next().offset();
- left = thisOffset.left - directionDiv.width();
- top = thisOffset.top;
- }
- }
- directionDiv.removeClass().addClass(className);
- directionDiv.css({height:height, left:left, top:top});
- directionDiv.show();
- },
- onDragLeave:function(e,source){
- $(source).draggable("proxy").removeClass("dg-proxy-right").addClass("dg-proxy-error");
- directionDiv.hide();
- },
- onDrop:function(e,source){
- directionDiv.remove();
- var thisIndex = $(this).index();
- var sourceIndex = $(source).index();
- var sourceCol = new Array();
- $(source).remove();
- $.each($(grid).datagrid("getPanel")
- .find(".datagrid-body tr"),function(index,obj){
- var sourceTd = $(obj).children("td:eq(" + sourceIndex + ")");
- sourceCol.push(sourceTd);
- sourceTd.remove();
- });
- var prev = sourceIndex > thisIndex;
- thisIndex = $(this).index();
- if(prev){
- $(this).before($(source));
- }else{
- $(this).after($(source));
- }
- $.each($(grid).datagrid("getPanel")
- .find(".datagrid-body tr"),function(index,obj){
- var thisTd = $(obj).children("td:eq(" + thisIndex + ")");
- if(prev){
- thisTd.before(sourceCol[index]);
- }else{
- thisTd.after(sourceCol[index]);
- }
- });
- $(grid).datagrid("columnMoving").datagrid("columnHiding");
- }
- });
- });
- }
- });
easyui datagrid 列拖拽2的更多相关文章
- easyui datagrid 列拖拽
首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...
- easyui datagrid列拖拽
<script type="text/javascript"> var cols = [{ field: 'testName', title: '<span cl ...
- easyui datagrid 列隐藏和显示
easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏? 最佳答案 $('#grid').datagrid('hideColumn','列field');把hideColu ...
- js控制easyui datagrid列的显示和隐藏
easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列
- easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
- 在 Element-UI 的 Table 组件上添加列拖拽效果
Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...
- 列拖拽顺序调整-sortable.js使用
最近在做一个单表统计功能,涉及到一个查询列配置,但是查询出来的列顺序,可以进行配置,通过写列的排序当然阔以,但是方法就不美丽了.所以,在网上搜了一下拖拽的组件,最终定位Sortable.js,简单易用 ...
- 让jquery easyui datagrid列支持绑定嵌套对象
嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...
- easyUI datagrid 列宽自适应(简单 图解)(转)
响应数据格式: easyUI在html代码中结构: 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了; 以下就是自适应代码: //添加事件 function c ...
随机推荐
- 第三百三十五天 how can I 坚持
晚上回来看了个奥斯卡影片,<疯狂的麦克斯-狂暴之路>,挺震撼的场面.导演确实挺厉害,不知道是怎么想象出来的. 睡觉,明天继续.
- 第三百三十一天 how can I 坚持
今天加了一天班,好累,还没吃晚饭,回来只吃了个泡面. 晚上回来的路上,在群里聊的倒是很happy,快笑死我了,仲宫二少,哈哈. 弟弟过两天要去见面,多聊聊,该结婚来. 还有,中午吃的肯德基,不好吃,可 ...
- 在IT网站上少花些时间
我自己关注的IT网站还是蛮多的,经常去的有CSDN,博客园,51CTO,InfoQ,还有微博,微信上关注了IT程序猿,IT技术博客大学习,程序员之家, 开发者头条,还有还有,我还通过邮件订阅了码家周刊 ...
- HDU 5862 Counting Intersections (树状数组)
Counting Intersections 题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=5862 Description Given ...
- Network Object NAT配置介绍
1.Dynamic NAT(动态NAT,动态一对一) 实例一: 传统配置方法: nat (Inside) 1 10.1.1.0 255.255.255.0 global (Outside) 1 202 ...
- Python pexpec 解决scp ssh
paswd_key = '.*assword.*' 匹配Password ssh_newkey = '.*(yes/no).*' 匹配 Are you sure you want to contin ...
- jquery获取kindEditor值
KE.show({ id: 'txtMessage', imageUploadJson: '/ajax/Manager/keupload.ashx?ptyp ...
- Android学习过程中遇到的问题
1.使用在Activity布局之上重叠显示操作栏,第一次使用出现错误信息. 错误信息如下:java.lang.RuntimeException:Ubable to start activity Com ...
- easymock入门贴
from:http://macrochen.iteye.com/blog/298032 关于EasyMock常见的几个问题, 这里(http://ozgwei.blogspot.com/2007/06 ...
- Ext的Panel总结(好文章)
我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化.最小化.关闭.置前.置后.动画引发目标设置.可调整大小这些功能.像什么标题栏.工具栏之类的东西在Ext ...