实现代码-code

<script type="text/javascript">

$.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() {
moveField(fromField, toField);
$(target).datagrid();
$(target).datagrid('columnMoving');
}, 0);
}
});

// move field to another location
function moveField(from, to) {
var columns = $(target).datagrid('options').columns;
var cc = columns[0];
var c = _remove(from);
if(c) {
_insert(to, c);
}

function _remove(field) {
for(var i = 0; i < cc.length; i++) {
if(cc[i].field == field) {
var c = cc[i];
cc.splice(i, 1);
return c;
}
}
return null;
}

function _insert(field, c) {
var newcc = [];
for(var i = 0; i < cc.length; i++) {
if(cc[i].field == field) {
newcc.push(c);
}
newcc.push(cc[i]);
}
columns[0] = newcc;
}
}
});
}
});
</script>

<body>
<div id="tt"></div>
<script type="text/javascript">
var cols = [{
field: 'testName',
title: '<span class="dropitem">测试名</span>',
align: 'center',
width: 120
}, {
field: 'testValue',
title: '<span class="dropitem">测试值</span>',
align: 'center',
width: 120
}];
var data = [];     // 用代码造30条数据
    
for(var i = 1; i < 200; ++i) {      
data.push({        
"testName": i,
        "testValue": "张三旺旺" + i      
})    
}    
//表
$('#tt').datagrid({
title: 'DataGrid',
width: 700,
height: 220,
fitColumns: true,
nowrap: false,
rownumbers: true,
showFooter: true,
columns: [cols],
data: data.slice(0, 10),
}).datagrid("columnMoving");
</script>

</body>

easyui datagrid 列拖动的更多相关文章

  1. easyui datagrid 列隐藏和显示

    easyui datagrid 列隐藏和显示 用js怎么控制列的显示和隐藏?   最佳答案   $('#grid').datagrid('hideColumn','列field');把hideColu ...

  2. js控制easyui datagrid列的显示和隐藏

    easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列

  3. EasyUI datagrid 列宽度拖动问题

    问题:拖不动或者偶尔能拖动,拖动不按指定? 原因:列宽度绑定的时候使用的百分比; 方法:获取总宽度,经过百分比计算在绑定

  4. easyui datagrid 列拖拽

    首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想 拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次 并刷新datagrid这个功能不就行了? & ...

  5. 让jquery easyui datagrid列支持绑定嵌套对象

    嵌套对象是指返回的json数据,是对象的某个属性自带有属性.而我们恰恰又需要这个属性,默认情况下easyui的datagrid是不支持绑定嵌套对象的.比如:datagrid的field属性只能为fie ...

  6. easyUI datagrid 列宽自适应(简单 图解)（转）

    响应数据格式: easyUI在html代码中结构: 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了; 以下就是自适应代码: //添加事件 function c ...

  7. easyui datagrid列使用按钮的一些心得 .

    以前,用easyui的datagrid,有时候会用到一些操作选项,比如代码如下: $('#datagrid').datagrid({ border:false, fitColumns:true, si ...

  8. easyui datagrid列使用按钮的一些心得（转）

    http://blog.csdn.net/sskicgah/article/details/16939959 以前,用easyui的datagrid,有时候会用到一些操作选项,比如代码如下: $('# ...

  9. easyui datagrid列拖拽

    <script type="text/javascript"> var cols = [{ field: 'testName', title: '<span cl ...

随机推荐

  1. gsoap

    C++中如何使用gsoap开发WebService 1. 什么是gSOAPgSOAP是一个夸平台的,用于开发Web Service服务端和客户端的工具,在Windows.Linux.MAC OS和UN ...

  2. PHP Libxml函数

    PHP Libxml 函数 PHP Libxml 简介 Libxml 函数和常量与 SimpleXML.XSLT 以及 DOM 函数一起使用. 安装 这些函数需要 Libxml 程序包. 在 xmls ...

  3. CSV 读写

    using System; using System.IO; using System.Runtime.InteropServices; using UnityEngine; public class ...

  4. android KK版本号收到短信后，点亮屏的操作

    alps/packages/apps/mms/src/comandroid\mms\transation\MessagingNotification.java private static void ...

  5. umount: /data: device is busy

    如果一个文件系统处于"busy"状态的时候,不能卸载该文件系统.如下情况将导致文件系统处于"busy"状态:1:文件系统上面有打开的文件2:某个进程的工作目录在 ...

  6. MVC里使用JSON方法集锦

    //一般处理,无参数示例 public JsonResult Test() { Something... return Json{new{Success=true,Msg="Error!&q ...

  7. 【微信公众号】微信关于网页授权access_token和普通access_token的区别及两种不同方式授权

    微信官网网址:https://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html#.E9.99.84.EF.BC.9A.E6. ...

  8. SDL视频显示进阶

    原文地址:http://blog.csdn.net/qingkongyeyue/article/details/53024467 1.SDL中事件和线程(函数同时运行) 2.练习 (1)创建线程 第一 ...

  9. SQLyog之MySQL客户端的下载、安装和使用（企业版）（破解）

    本博文的主要内容有 .SQLyog的下载 .SQLyog的安装 .SQLyog的使用 1.SQLyog_Enterprise的下载 比如,我这里,是放在D:\SoftWare 继续

  10. mybatis 参数说明

    1 简单参数 <select id="selectUsers" resultType="User"> select id, username, pa ...