上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行,或者其他位置。

    Jqgrid表格插件自己没有提供这种功能的,如果要使用这个功能,还需要导入“jquery.tablednd.js”(初始化拖动插件)。如:
1
<script type="text/javascript" src="<%=basePath%>main/js/jquery.tablednd.js"></script>
    放在Jqgrid的js后面即可。导入js还不算完成,剩下的就剩几句js代码了。
    首先,要在Jquery的ready方法里面加入这段代码:
1
2
3
$("#gridTable").tableDnD({
scrollAmount : 0
});
    然后在Jqgrid的gridComplete方法里面加入这段代码:
1
2
3
4
gridComplete : function() {
$("#_empty", "#gridTable").addClass("nodrag nodrop");//样式
$("#gridTable").tableDnDUpdate();//更新jquery.tablednd.js插件的方法。
},
    刷新页面,拖动前的效果:
   然后把第一行,拖放到本页的最后一行。拖动后的效果:
     如果还有什么不明白的地方,可以留下你的评论。
 
 

原创文章,转载请注明: 转载自java开发者

本文链接地址: Jqgrid入门-Jqgrid列数据拖动(七)

Jqgrid入门-Jqgrid列数据拖动(七)的更多相关文章

  1. Jqgrid入门-Jqgrid分组的实现(八)

    上一章主要说明了如果实现Jqgrid列数据拖动,这一章主要讨论在Jqgrid中如何实现分组功能.         类似于Sql语句的Group By,Jqgrid提供了属性实现数据分组,这样表现数据会 ...

  2. Jqgrid入门-Jqgrid设置二级表头(六)

    上一章已经说明了Jqgrid结合Struts2+json展示数据,这一章主要探讨Jqgrid如何设置二级表头,类似这样的效果.如:           要实现这个功能,其实也不难.通过Jqgrid的s ...

  3. Jqgrid入门-Jqgrid格式化数据(九)

    上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据.何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒:对数字进行处理,加上千分位分隔符,小数的保 ...

  4. Jqgrid入门-结合Struts2+json实现数据展示(五)

    DEMO用的是ssh框架实现的,具体怎么搭建的就不多做说明了.分页表格的数据操作难点就是数据展现.至于增删改直接用hibernate原生的方法实现即可.         初步分析:表格要实现分页,那么 ...

  5. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  6. Jqgrid入门-显示基本的表格(一)

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的.         特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...

  7. Jqgrid入门-别具特色的Pager Bar (四)

    Pager Bar位于表格最下边.默认情况下,分为三部分.如图: 第一部分:导航按钮栏(Navigator) 第二部分:页码栏(Pager) 第三部分:记录信息栏(Record)         要实 ...

  8. 前端基于JQgrid实现自定义列头展示

    先上效果图   因为公司项目的需要,并且公司只有我这一个能写js的前端,这个自定义展示jqgrid列选项的需求依然是交由我写,辣么就分享一下我的工作成果. //初始化函数 multiSelectCol ...

  9. jqgrid 设置冻结列

    有时,jqgrid表格的列非常多,而表格的宽度值是固定的,我们需要在表格底部出现滚动条,并且固定前面几个列作为数据参照项,如何实现? 需要用的jqgrid冻结列,步骤如下: 1)设置需要冻结的列属性, ...

随机推荐

  1. Problem 1007 幸运数 线段树成段更新

    题目链接: 题目 Problem 1007 幸运数 Time Limit: 2000 mSec Memory Limit : 131072 KB 问题描述 皮特的幸运数是2和5.只由幸运数字2和5组成 ...

  2. 【BZOJ】【3669】【NOI2014】魔法森林

    LCT动态维护MST LCT动态维护MST 我们可以枚举a,然后找从1到n的一条路径使得:这条路径上的b的最大值最小.这个路径肯定在MST上……所以枚举一遍所有的边,动态维护一个关于b值的MST即可. ...

  3. 2013 Asia Chengdu Regional Contest

    hdu 4786 Fibonacci Tree http://acm.hdu.edu.cn/showproblem.php?pid=4786 copyright@ts 算法源于ts,用最小生成树可以求 ...

  4. PE文件结构详解(五)延迟导入表

    PE文件结构详解(四)PE导入表讲 了一般的PE导入表,这次我们来看一下另外一种导入表:延迟导入(Delay Import).看名字就知道,这种导入机制导入其他DLL的时机比较“迟”,为什么要迟呢?因 ...

  5. Caffe训练好的网络对图像分类

    对于训练好的Caffe 网络 输入:彩色or灰度图片 做minist 下手写识别分类,不能直接使用,需去除均值图像,同时将输入图像像素归一化到0-1直接即可. #include <caffe/c ...

  6. HDU 1598 find the most comfortable road(枚举+并查集,类似于最小生成树)

    一开始想到用BFS,写了之后,发现有点不太行.网上查了一下别人的解法. 首先将边从小到大排序,然后从最小边开始枚举,每次取比它大的边,直到start.end属于同一个集合,即可以连通时停止.过程类似于 ...

  7. 暑假集训单切赛第二场 UVA 11988 Broken Keyboard (a.k.a. Beiju Text)(字符串处理)

    一开始不懂啊,什么Home键,什么End键,还以为相当于括号,[]里的东西先打印出来呢.后来果断百度了一下. 悲催啊... 题意:给定一个字符串,内部含有'['和']'光标转移指令,'['代表光标移向 ...

  8. lintcode 中等题:kth-largest-element 第k大元素

    题目 第k大元素 在数组中找到第k大的元素 样例 给出数组[9,3,2,4,8],第三大的元素是4 给出数组 [1,2,3,4,5],第一大的元素是5,第二大的元素是4,第三大的元素是3,以此类推 注 ...

  9. [hackerrank]Palindrome Index

    简单题. #include <iostream> #include <string> using namespace std; int main() { int T; cin ...

  10. HTML5入门八---缓存控件元素的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...