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生 ...
随机推荐
- 认识Service
Service相对于Activity可在后台运行,五显示界面,在activity退出的情况下仍能运行. 一.新建一个空的工程,命名为learnService 二.新建一个service,并添加如下所示 ...
- jQuery动态加载脚本 $.getScript();
jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) { /* ...
- ios8中,相册创建后手动删除,不能再进行创建显示
// Add a new ALAssetsGroup to the library. // The name of the ALAssetsGroup is name and the type is ...
- ip变更导致连接不到mysql的解决办法
第一步:ssh连接到服务器 第二步:连接mysql mysql -u root -psqj888 第三步:切换到mysql数据库 use mysql 第四步:查询mysql的user表 SELECT ...
- spring中的Log4jConfigListener作用和webapp.root的设置
转:http://blog.sina.com.cn/s/blog_7bbf356c01016wld.html 使用spring中的Log4jConfigListener有如如下好处: 1. 动 ...
- nginx日志分析手机使用频次
__author__ = 'similarface' from collections import defaultdict import glob ip = r"?P<ip>[ ...
- virtualbox虚拟机上安装centOS的网络配置(安装centos时选择桥接网络)
最近接触hadoop,需要在在Linux上面开发,所以我装了一个virtualbox虚拟机,在该虚拟机上面安装了一个centOS系统.linux系统是装好了,但是网络配置却另人头疼.我主要是想让宿主机 ...
- 在应用中更新App版本
在应用中, 为了提高用户体验, 会提供更新版本的功能. 那么如何实现呢? 我写了一个简单的Demo, 说明一下, 需要注意几个细节. 使用了Retrofit和Rx处理网络请求. Github下载地址 ...
- 用java实现冒泡排序法
一.基本思路: 冒泡排序是一种简单的交换类排序.其基本思路是,从头开始扫描待排序的元素,在扫描过程中依次对相邻元素进行比较,将关键字值大的元素后移.每经过一趟排序后,关键字值最大的元素将移到末尾,此时 ...
- C#容易忽略點--包含多線程 委託事件等等--此頁面bug,編輯能查看全部內容
委託事件 http://www.cnblogs.com/sdya/p/5217635.html 反射 1 创建用于反射使用的DLL 新建一个C#类库项目,拷贝源代码如下,编译生成DLL(假如DLL的文 ...