重新=》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);
- }
- }
- });
- }
- });
调用$('#dg').datagrid({.....}).datagrid("columnMoving");
重新=》easyui DataGrid是否可以动态的改变列显示的顺序的更多相关文章
- jquery easyui DataGrid 动态的改变列显示的顺序
$.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...
- Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法
Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...
- easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现
easyui datagrid里的toobar按钮隐藏.显示.禁用等方式的实现 //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分 ...
- JQuery easyUi datagrid 中 editor 动态设置最大值最小值
前言 近来项目中使用到 easyui 来进行页面设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考. 问题 JQuery easyUi datagri ...
- easyui DataGrid表体单元格跨列rowspan
最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...
- EasyUI datagrid : 启用行号、固定列及多级表头后,头部行号位置单元格错位的问题
症状如图: 上图中,行号列与checkbox 列融合了.解决方法是在datagrid 的 onLoadSuccess 事件中加入如下代码: var opts = $(this).datagrid('o ...
- 【技巧】easyUI datagrid在隐藏时加载,显示时无法加载出界面
注意在显示时调用再调用一次resize就可以显示出来 $("#"+datagridId).datagrid("resize");
- easyui DataGrid 工具类之 后台生成列
@SuppressWarnings({ "rawtypes", "unchecked" }) public Map<String, Object&g ...
- easyui datagrid设置fit: true后,页面显示不全的情况
跟工具栏有关 <div id="tb"> <div style="float:left;"> <a href="#&qu ...
随机推荐
- Mac怎样改动开机password
Mac开机password忘了,咋办?开不开机啦 1.打开你的Mac,command +S 进入你的终端界面 2.输入/sbin/mount -uaw / 3.输入rm /var/db/.AppleS ...
- GIS中要素的捕捉以及C++实现
这篇文章早在去年就写出来了,但是由于当时毕业论文有一段是直接引用了我的这篇文章,怕引起查重的麻烦就删掉了,在此,重新挂出来和大家一起分享. 要素的选择,也称为要素的捕捉,在CAD.计算机图形学和地理信 ...
- es5 - array - join
/** * join描述:将数组(或类数组对象)的所有元素连接到一个字符串中并返回此字符串. * join语法:arr .join([ separator]) * join参数:指定用于分隔数组的每对 ...
- JAVA学习目录
开发环境以及IDE准备相关: 1.JAVA环境搭建 2.初次使用IntelliJ IDEA 3.IntelliJ IDEA界面设置 4.IntelliJ IDEA快捷键介绍 SprintBoot系列: ...
- <转>云主机配置OpenStack使用spice的方法
按官方文档(openstack-install-guide-yum-juno)搭建和配置的OpenStack默认使用novnc作为云主机的控制台訪问方式,假设须要配置使用GUI的操作系统,会显得比較尴 ...
- JavaScript 数组方法处理字符串 prototype
js中数组有许多方法,如join.map,reverse.字符串没有这些方法,可以“借用”数组的方法来处理字符串. <!doctype html> <html lang=" ...
- JDBC 数据库连接池的简单实现
连接池代码: public class MyDataSource2{ private static String url = "jdbc:mysql://localhost:3306 ...
- Solr之困
http://www.kafka0102.com/2010/08/319.html重写公司的站内搜索.经过前期一段时间对lucene和solr的熟悉,最后决定使用Solr作为新系统的基础框架.现在已经 ...
- Redis全方位讲解--哨兵模式(Sentinel模式)(转载)
前言 当按照上一篇<redis主从复制>部署好之后,我们会想,一旦redis的master出现了宕机,并且我们并没有及时发现,这时候就可能会出现数据丢失或程序无法运行.此时,redis的哨 ...
- 我的SpringMvc学习之路之注解
用注解取代配置文件可降低编程是不必要的麻烦和错误. @Controller 控制器定义 在一个class的上面写上@controller声明此类为控制器类.在配置中*.dispatcher.xml里 ...