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

<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 url="/Test/Test1Data";
$(document).ready(function () {
init();
drag();//绑定datagrid,绑定拖拽
}); function init() {
$("#test").datagrid({
url: url,
type: "post",
datatype: "json",
width: 600,
height: 280,
loadMsg: "数据加载中,请稍后...",
nowrap: true,
rownumbers: false,
pagination: true,
singleSelect: true,
columns: [cols], //bind数据成功重新设置拖动对象 onLoadSuccess: function (data) {
drag();
}
});
} //拖动drag和drop都是datagrid的头的datagrid-cell function drag() {
$('.datagrid-header-inner .datagrid-cell').draggable({
revert: true,
proxy: 'clone' }).droppable({
accept: '.datagrid-header-inner .datagrid-cell',
onDrop: function (e, source) { //取得拖动源的html值 var src = $(e.currentTarget.innerHTML).html(); //取得拖动目标的html值 var sou = $(source.innerHTML).html(); var tempcolsrc;//拖动后源和目标列交换 var tempcolsou; var tempcols=[]; for (var i = 0; i < cols.length; i++) { if (cols[i].title == sou) {
tempcolsrc = cols[i];//循环读一遍列把源和目标列都记下来 } else if (cols[i].title == src) {
tempcolsou = cols[i];
}
} for (var i = 0; i < cols.length; i++) { //再循环一遍,把源和目标的列对换 var col = {
field: cols[i].field,
title: cols[i].title,
align: cols[i].align,
width: cols[i].width
}; if (cols[i].title == sou) {
col = tempcolsou;
} else if (cols[i].title == src) {
col = tempcolsrc;
}
tempcols.push(col);
}
cols = tempcols; //1秒后执行重绑定datagrid操作。可能是revert需要时间,这边如果没有做延时就直接重绑 就会出错。 //我目前的水平就想到这个笨办法,各位如果有好的想法建议可以提出来讨论下。 timeid = setTimeout("init()", 1000);
}
});
} </script> <div id="test"></div>

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

  1. easyui datagrid列拖拽

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

  2. easyui datagrid 列拖拽2

    1.拖动前 2.拖动中 3.拖动后 5.代码1 $("#corp-grid").datagrid({ title:"泥头车企业管理", toolbar:&quo ...

  3. easyui datagrid 列隐藏和显示

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

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

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

  5. easyui树节点拖拽排序的存储过程

    easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...

  6. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  7. 列拖拽顺序调整-sortable.js使用

    最近在做一个单表统计功能,涉及到一个查询列配置,但是查询出来的列顺序,可以进行配置,通过写列的排序当然阔以,但是方法就不美丽了.所以,在网上搜了一下拖拽的组件,最终定位Sortable.js,简单易用 ...

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

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

  9. easyUI datagrid 列宽自适应(简单 图解)(转)

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

随机推荐

  1. 第三百二十三天 how can I 坚持

    人在最绝望的时候会干啥,<进击的巨人>. 可以绝望,但一定要相信还有希望. 今天去看了<美人鱼>,确实挺好吧. 把愤怒归结于无能,其实是大错特错,愤怒是人的情绪的发泄,是人就有 ...

  2. Nginx下Redmine2.6配置

    Apache下Redmine2.6配置,请参考:http://blog.linuxeye.com/405.html CentOS6.6下安装Redmine2.6+MySQL5.6+Nginx,教程如下 ...

  3. 服务框架Dubbo(转)

    add by zhj:该开源项目已经停止更新了,不过倒是可以学学该软件的架构设计 原文:http://www.oschina.net/p/dubbo Dubbo 是阿里巴巴公司开源的一个高性能优秀的服 ...

  4. Powershell导入订阅号(以Azure中国版为例)

    1. 首先,您需要安装Windows Azure Powershell.下载的链接为:http://go.microsoft.com/?linkid=9811175&clcid=0x409 2 ...

  5. [翻译]创建ASP.NET WebApi RESTful 服务(8)

    本章讨论创建安全的WebApi服务,到目前为止,我们实现的API都是基于未加密的HTTP协议,大家都知道在Web中传递身份信息必须通过HTTPS,接下来我们来实现这一过程. 使用HTTPS 其实可以通 ...

  6. HDU 2101 A + B Problem Too 分类: ACM 2015-06-16 23:57 18人阅读 评论(0) 收藏

    A + B Problem Too Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  7. beantool.map2Bean(map,obj)

  8. ESP8266 TCP传输AT指令顺序

    ); //复位 ret = ESP8266_Cmd ( );//测试AT启动 ret = ESP8266_Cmd ( );//选择WIFI应用模式softAP+station //ret = ESP8 ...

  9. RGPJS 教程之八 创造场景

    开始画面 游戏画面 代码 <!DOCTYPE html> <html> <head> <script src="rpg-beta-2.js" ...

  10. Android Studio使用JNI

    0x01 前言 本文讲述使用Android Studio通过静态注册.动态注册使用JNI的方法,以及加载第三方so文件的方法 0x02 Android Studio静态注册的方式使用JNI 1. 添加 ...