jquery easyui DataGrid 动态的改变列显示的顺序
$.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 动态的改变列显示的顺序的更多相关文章
- jquery easyui datagrid 动态 加载列
		
实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...
 - 重新=》easyui DataGrid是否可以动态的改变列显示的顺序
		
$.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...
 - jquery easyui datagrid 将值作为img显示图片时报404 undefined
		
原因:datagrid 在请求到数据先进行头部数据和样式的渲染,之后数据 obj = {} value = undefined index = 0 进行一次渲染, 在没有formater情况将数据 ...
 - JQuery EasyUI DataGrid动态合并(标题)单元) 一
		
JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...
 - JQuery EasyUI DataGrid动态合并单元格
		
/** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList ...
 - jquery easyui datagrid动态改变title的值
		
title:'<input type="text" id="txtTitle1" style="background:none;border:n ...
 - 转载 -- 	jquery easyui datagrid 动态表头 + 嵌套对象属性展示
		
代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array() ...
 - jquery easyUI DataGrid 初始化的时候就显示可排序的字段
		
在使用easy ui的列表中,想要标记可以排序的字段,使用户一看页面就知道哪些是可以点击排序的. 给可排序的字段添加 图标在列名后面.不可排序的字段还和原来一样. 步骤: 你需要一个图标 , 你需要给 ...
 - JQuery easyUi datagrid 中 自定义editor作为列表操作按钮列
		
转自 http://blog.csdn.net/tianlincao/article/details/7494467 前言 JQuery easyUi datagrid 中 使用datagrid生 ...
 
随机推荐
- 【Android界面实现】FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别
			
转载请注明出处: http://blog.csdn.net/zhaokaiqiang1992 FragmentPagerAdapter是android-support-v4支持包里面出现的一个新的适配 ...
 - EI中国
			
这里可以看到EI收录的所有的中国期刊:http://lib.sytu.edu.cn/files/zwwxx/2009-EI-china.htm
 - Activity UI Handler ProgressBar AsyncTask
			
package io.vov.vitamio.activity; import android.app.Activity; import android.app.ProgressDialog; imp ...
 - java   多线程2
			
class MyThread extends Thread { @Override public void run() { super.run(); for (int i = 0; i < 50 ...
 - Qt之QSequentialAnimationGroup
			
简述 QSequentialAnimationGroup类提供动画的串行组. QSequentialAnimationGroup是一个串行运行动画的QAnimationGroup,在另一个动画播放结束 ...
 - hdu  3367(Pseudoforest ) (最大生成树)
			
Pseudoforest Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tot ...
 - Java 集合系列 10 Hashtable详细介绍(源码解析)和使用示例
			
java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...
 - 怎么实现form表单提交后不重新刷新当前页面
			
怎么实现表单提交后不重新刷新当前页面 如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.ac ...
 - Oracle函数大全之转换函数
			
chartorowid(c1) [功能]转换varchar2类型为rowid值 [参数]c1,字符串,长度为18的字符串,字符串必须符合rowid格式 [返回]返回rowid值 [示例] SELECT ...
 - 小心buffer的拼接问题 --转
			
最近遇见一个从前没有遇见的陷阱,就是data里的chunk拼接. 由于本人身为前端工程师,对buffer的概念实在是认识不足.这次的场景是我要通过http.get去抓取远端的网页文件,很不小心的是对方 ...