实现代码-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. Ubuntu 设置UFW防火墙

    1:安装 sudo apt-get install ufw 2:启用 sudo ufw enable sudo ufw default deny 运行以上两条命令后,开启了防火墙,并在系统启动时自动开 ...

  2. ORACLE判断两个日期间隔几个工作日

      CreateTime--2017年9月7日17:14:56 Author:Marydon ORACLE判断两个日期间隔几个工作日 方法:使用存储过程 /** * 判断两个日期间隔几个工作日 */ ...

  3. ORACLE expdp/impdp详解（转）

    ORCALE10G提供了新的导入导出工具,数据泵.Oracle官方对此的形容是:Oracle DataPump technology enables Very High-Speed movement ...

  4. PHP LDAP class for Active Directory

    A class for PHP to talk to Active Directory through LDAP.http://sourceforge.net/projects/adldap/

  5. 转:简单通用的一则makefile .

    在linux下面下写程序少不了写makefile,如果每个文件都按部就班的详细的写编译脚本,效率势必低下:makefile提供了自动化变量.模式规则等,稍加利用可以提高写makefile的效率.下面列 ...

  6. ToString(“N2”)和ToString(“0.00”)之间的区别

    看来N会包含数千个分隔符,而0.00则不会. N2将以500.00的方式工作,但是当您有5000.00时,N2将显示为 5,000.00 代替 5000.00 If you do this inste ...

  7. 温故而知新 通过chrome tool 查看是否产生闭包

    function foo() { var a = 20 var b = 30 function bar() { debugger; return a + b } return bar; } var b ...

  8. jenkins 下载插件失败处理办法

    jenkins 下载插件失败,提示: java.io.IOException: Downloaded file /app/jenkins_home/plugins/jacoco.jpi.tmp doe ...

  9. unity5, import fbx注意事项

    一,模型尺寸. unity中是以米为单位,要想让3dmax中建的模型导入到unity中与unity自带的3d object尺寸一致,最直接的办法是将3dmax中的系统单位也设成米. 菜单->自定 ...

  10. Redis(十三):Redis分布式锁的正确实现方式

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...