实现代码-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. NSURLConnection经常使用的代理方法

    NSURLConnection的代理Protocol定义有三类:NSURLConnectionDelegate.NSURLConnectionDataDelegate和NSURLConnectionD ...

  2. Linux mkdir 如何递归创建目录？

    mkdir 如何递归创建目录? mkdir –vp 目录1/目录2/目录3   详细介绍: linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目 ...

  3. Android体系架构详解

    Andriod是什么? 首先,就像Android开源和兼容性技术负责人Dan Morrill在Android开发手册兼容性部分所解释的,“Android并不是传统的Linux风格的一个规范或分发版本, ...

  4. Jsp+Servlet+JavaBean经典MVC模式理解

    MVC模式目的(实现Web系统的职能分工). 在Java EE中,Jsp+Servlet+JavaBean算是里面经典的模式,是初学者必备的知识技能.M, Model(模型)实现系统的业务逻辑 1.通 ...

  5. 中文latex去掉图片描述

    中文latex去掉图片描述,或者自定义: \usepackage{caption} \caption*{the title of figure}就可以自己定义了.

  6. 微信公共服务平台开发（.Net 的实现）3-------发送文本消息

    首先建立一个微信消息类. class wxmessage { public string FromUserName { get; set; } public string ToUserName { g ...

  7. Windows里配置Apache2.2+PHP5.3+mod_fcgid运行高效的FastCGI模式

    日发现win平台的Apache也可以跑FastCGI模式了,就折腾了一会.FastCGI模式是经实践证明了比传统的模块模式运行效率高很多.记录如下: 一.mod_fcgid配置说明 1.首先下载mod ...

  8. docker 下 alpine 镜像设置时区的有效办法

    在使用Docker的时候,由于很多基础linux镜像都比较大,alpine这个仅仅几兆的linux基础镜像受到了很多人喜欢,笔者也不例外,可是由于alpine中的一些配置及命令与常见的centos等系 ...

  9. RBAC权限模型及数据权限扩展的实践

    话说大家对RBAC权限模型应该是耳熟能详了.但真正用的好的并不多.并且原始的RBAC模型并不包括数据权限的管理,网上也差点儿没有相关的文章可以參考.本人经过几个项目的实战,在其基础上扩展出一套可行的. ...

  10. 实现编程时Vim自动导入相应模板

    Vim文本编辑器以简洁高效著称,那么我们在编程时能有自动加载相应的模板,从而省去一些固定的输入提升工作效率呢!当然可以,可以有多种方法实现,我这里介绍一种非常简单的方法. 首先在你的主用户文件下面建立 ...