$.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(){
swapField(fromField,toField);
$(target).datagrid();
$(target).datagrid('columnMoving');
},0);
}
}); // swap Field to another location
function swapField(from,to){
var columns = $(target).datagrid('options').columns;
var cc = columns[0];
_swap(from,to);
function _swap(fromfiled,tofiled){
var fromtemp;
var totemp;
var fromindex = 0;
var toindex = 0;
for(var i=0; i<cc.length; i++){
if (cc[i].field == fromfiled){
fromindex = i;
fromtemp = cc[i];
}
if(cc[i].field == tofiled){
toindex = i;
totemp = cc[i];
}
}
cc.splice(fromindex,1,totemp);
cc.splice(toindex,1,fromtemp);
}
}
});
}
});

jquery easyui DataGrid 动态的改变列显示的顺序的更多相关文章

  1. jquery easyui datagrid 动态 加载列

    实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...

  2. 重新=》easyui DataGrid是否可以动态的改变列显示的顺序

    $.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...

  3. jquery easyui datagrid 将值作为img显示图片时报404 undefined

    原因:datagrid 在请求到数据先进行头部数据和样式的渲染,之后数据 obj = {}  value = undefined  index = 0 进行一次渲染, 在没有formater情况将数据 ...

  4. JQuery EasyUI DataGrid动态合并(标题)单元) 一

    JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...

  5. JQuery EasyUI DataGrid动态合并单元格

    /**        * EasyUI DataGrid根据字段动态合并单元格        * @param fldList 要合并table的id        * @param fldList ...

  6. jquery easyui datagrid动态改变title的值

    title:'<input type="text" id="txtTitle1" style="background:none;border:n ...

  7. 转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示

    代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array() ...

  8. jquery easyUI DataGrid 初始化的时候就显示可排序的字段

    在使用easy ui的列表中,想要标记可以排序的字段,使用户一看页面就知道哪些是可以点击排序的. 给可排序的字段添加 图标在列名后面.不可排序的字段还和原来一样. 步骤: 你需要一个图标 , 你需要给 ...

  9. JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列

    转自   http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...

随机推荐

  1. 认识Service

    Service相对于Activity可在后台运行,五显示界面,在activity退出的情况下仍能运行. 一.新建一个空的工程,命名为learnService 二.新建一个service,并添加如下所示 ...

  2. git的作用和原理(待续)

    先选定一个目录作为Git仓库,假定是/srv/sample.git,在/srv目录下输入命令: $ sudo git init --bare sample.git Git就会创建一个裸仓库,裸仓库没有 ...

  3. linux套件安装过程中configure,make,make install的作用

    ./configure,make,make install都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤.其中: ./configure是检测程序文件,用来检测你的安装平 ...

  4. 任务调度JOB

    1.1       描述 定时执行数据库中的PL/SQL块,如存储过程.可以减化前端编程. 1.2       简单示例 本示例运行环境:oracle10g + pl/sql +xp. 使用存储过程每 ...

  5. SqlServer_Sql防止注入

    注入式攻击的详细解释SQL下面我们将以一个简单的用户登陆为例,结合代码详细解释一下SQL注入式攻击,与及他的防范措施.对于一个简单的用户登陆可能的代码如下:try{ string strUserNam ...

  6. 转!!EL表达式大全

    EL表达式      1.EL简介 1)语法结构        ${expression} 2)[]与.运算符      EL 提供.和[]两种运算符来存取数据.      当要存取的属性名称中包含一 ...

  7. 配置tomcat,java运行环境

    1.下载JDK,安装 官网下载地址:http://java.sun.com/javase/downloads/index.jsp 下载后,安装,选择你想把JDK安装的目录: 比如:JDK安装目录:E: ...

  8. Lua 栈中元素的位置

    Lua与C.C#等的交互是通过栈来实现的,每次插入元素都是放在栈顶(top),至于元素的index,可以使用正数和负数两种方式, 如取栈底开始至第index个元素 -index = gettop - ...

  9. vm 安装 vcenter 本主要记录选择l现有的受支持数据库

    1.将先决条件安装完毕. 安装 .NET3.5 全部下一步记录设置的密码.备忘.

  10. data structure

    转载请注明出处: 我所遇见的世界会更美好 我曾经逢人就说总是遇到这样那样错误无法解决,但是这些问题只要静下心来仔细思考根本没有解决不了的问题. 其实明明,超级超级简单,然而被老师讲的天花乱坠, 栈: ...