实现代码-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. C#应用视频教程1.3 Socket通信客户端完善

    我们先把前面的代码封装成一个完整的类,因为跟网络相关的方法并不一定是建立socket的服务器和客户端,所以还是应该把两个分开,比如获取本机IP,修改本机IP,PING远程主机这些事情应该放在一个单独的 ...

  2. busybox hexdump 命令使用

    http://blog.sina.com.cn/s/blog_a6559d920101gvlk.html hexdump命令是Linux下的打印16进制的利器,它可以按我们指定的格式输出16进制,特别 ...

  3. Unity 事件2

    UIMouseEvent.cs: using UnityEngine; using System; public abstract class UIMouseEvent : MonoBehaviour ...

  4. Unity Editor Toolbar 编辑器扩展

    http://www.cnblogs.com/zhaoqingqing/p/3812368.html 1.Apply to Prefab [把改动应用到Prefab] if (GUILayout.Bu ...

  5. Autofac3 在MVC4中的运用原理

    这是一种新的开发模式,注入开发模式,或者叫它IOC模式,说起IOC你可以这样去理解它,它为你的某个实现流出一个注入点,你生产的对象,可以根据你之前的配置进行组合.  IOC全称是Inversion o ...

  6. 查看IE浏览器安装的插件

      请移步至文章:http://blog.sina.com.cn/u/6452627072  

  7. ubuntu开启ftp服务

    首先再防火墙中开启21和20端口 iptables -A INPUT -p tcp --dport -j ACCEPT iptables -A INPUT -p tcp --dport -j ACCE ...

  8. 最全的iOS物理引擎demo

    概述 最全的iOS物理引擎demo,实现重力.碰撞.推力.摆动.碰撞+重力.重力弹跳.仿摩拜单车贴纸效果.防iMessage滚动效果.防百度外卖首页重力感应等效果! 详细 代码下载:http://ww ...

  9. 【laravel54】报错：No supported encrypter found (加密类未找到)

    原因:配置环境未生产 key 密钥,直接cmd,进入项目根目录,执行:php artisan key:generate  即可

  10. 窗口管理器 Openbox 入门指南

    2008-07-30   也许你听说过 Blackbox 和 Fluxbox,那么,Openbox 又是什么?Openbox 跟它们很相似.不过,我们还是来看看 Openbox 官方给出的说明吧.Op ...