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 ...
随机推荐
- PartialView
一.客户端直接请求分部视图(如使用AJAX) Return PartialView() 不加载布局页面,不执行_ViewStart.cshtml AJAX /Home/LoginPart 二.视图 ...
- Hadoop应用开发实战案例 第2周
比如,封面,是一网页,可以看出用户在此网页上,鼠标呈现F形状. 海量Web日志分析 用Hadoop提取KPI统计指标 更详细原文博客:http://blog.fens.me/hadoop-mapred ...
- 触控发布《Cocos开发者平台白皮书》
Cocos 2014 开发者大会(秋季)组委会今天正式发布了<Cocos开发者平台白皮书>,GameRes游资网得到Cocos官方授权发布该白皮书电子版. 白皮书主要内容包括对行业的趋势解 ...
- Struts2文件下载
1). Struts2 中使用 type="stream" 的 result 进行下载 2). 可以为 stream 的 result 设定如下参数 contentType: 结果 ...
- uestc oj 1218 Pick The Sticks (01背包变形)
题目链接:http://acm.uestc.edu.cn/#/problem/show/1218 给出n根木棒的长度和价值,最多可以装在一个长 l 的容器中,相邻木棒之间不允许重叠,且两边上的木棒,可 ...
- How Tomcat Works(五)
本文接下来介绍tomcat的默认连接器,Tomcat中的默认连接器必须满足以下要求: 实现org.apache.catalina.Connector接口 负责创建实现org.apache.catali ...
- [源码分享] HIVE表数据量统计&邮件
概要: 计算HIVE BI库下每天数据表总大小及增量 输出: 总大小:xxxG 日同比新增数据量:xxxG 周同比新增数据量:xxxG 月同比新增数据量:xxxG 总表数:xxx 日新增表数:xxx ...
- C# 数据类型详解
在asp.net中C#数据类型包括有值类型.简单类型.整型.布尔型.字符型.浮点型.结构类型等等,有需要学习的朋友可进入参考参考. 4.1 值类型 各种值类型总是含有相应该类型的一个值.C#迫使你初始 ...
- android 简易定时器
定时器 1.在android 应用开发当中,很多时候都要用到定时器,而要实现定时器更多的时候要用到两个类:Timer,和TimerTask 2.API对Timer的解释是:
- Instant Buy Android API Tutorial
转自:https://developers.google.com/wallet/instant-buy/android/tutorial This tutorial guides you throug ...