$.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. iOS开发之 XCode6.0的iOS免证书真机测试方法(MAC及黑苹果均有效)

    参考:http://mobile.51cto.com/iphone-455500.htm XCode6.0的iOS免证书真机测试方法(MAC及黑苹果均有效) 前提:设备已经越狱 目前在XCode上开发 ...

  2. 【转】Android应用开发之PNG、IconFont、SVG图标资源优化详解

    1 背景 最近因为一些个人私事导致好久没写博客了,多事之年总算要过去了,突然没了动力,所以赶紧先拿个最近项目中重构的一个小知识点充下数,老题重谈. 在我们App开发中大家可能都会有过如下痛疾(程序员和 ...

  3. css_兼容IE和FF的写法

    CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点. 常见兼容问题: 1.DOCTYPE 影响 CSS 处理2.FF:div 设置 marg ...

  4. android GC内存回收小析

    由于时间问题,简单的谈谈自己的理解. 大家都知道,在android开发中,不需要自己去管理,有垃圾回收机制会自动帮我们去回收 没有被引用到的对象. 那垃圾回收机制到底是怎样的呢?下面列出本人的一些理解 ...

  5. noip赛前小结2

    嗯...赛前的第二份小结. 总结一下应该做的几个事情就好了. (1)关于做题顺序 做题顺序是很重要的. 开始的时候先审题,看清数据范围什么的,随便想一想,大概估计一下自己的得分. 第二题再把每道题仔细 ...

  6. computer English

    算法常用术语中英对照Data Structures 基本数据结构Dictionaries 字典PriorityQueues 堆Graph Data Structures 图Set Data Struc ...

  7. 浅谈AsyncState与AsyncDelegate使用的异同

    对于AsyncState来说,其MSDN的解释为:得到BeginInvoke方法的最后一个参数.而对于AsyncDelegate来说,其MSDN的解释为:得到异步调用的委托对象.也就是异步调用的委托源 ...

  8. echarts折线图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Android 子activity关闭 向父activity传值

    使用startActivity方式启动的Activity和它的父Activity无关,当它关闭时也不会提供任何反馈. 可变通的,你可以启动一个Activity作为子Activity,它与父Activi ...

  10. sublime text修改TAB缩进为2个空格

    打开sublime后在倒数第二项 preference---->Settings-user: 然后输入 "tab_size": 2, "translate_tabs ...