`
z1han
  • 浏览: 32608 次
  • 性别: Icon_minigender_2
  • 来自: 上海
文章分类
社区版块
存档分类

Jqgrid入门-Jqgrid列数据拖动(七)

 
阅读更多

上一章提到在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插件的方法。
},
    刷新页面,拖动前的效果:
4
   然后把第一行,拖放到本页的最后一行。拖动后的效果:
5
1
1
分享到:
评论
1 楼 jackyrong 2013-07-06  
要是能提供代码就更好了

相关推荐

    Jqgrid demo-史上最强大,没有之一

    Jqgrid demo-史上最强大,没有之一, 为了大家能够更好的学习和使用Jqgrid网格插件,我决定用Strtus2+Spring+hibernate+Jquery+Jqgrid实现一个Jqgrid网格插件的demo。当然官方网站上面已经有了PHP版本和ASP.NET版本...

    jqGrid插件--JQuery表格插件

    jqGrid是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。

    jquery.jqGrid-4.4.3

    jquery.jqGrid-4.4.3,用于web页面的列表分页显示

    jqgrid方法-中文 (2).docx

    jqgrid方法-中文 (2).docxjqgrid方法-中文 (2).docx

    jquery.jqGrid-3.8.2.zip

    jquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zip

    jquery.jqGrid-4.5.2.zip

    jquery.jqGrid-4.5.2.zip 官方资源文件

    jqGrid4.8.2 jqgrid_demo40

    jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...

    jqgrid合并单元格,合并行、合并列

    jqgrid合并行、合并列 先看示例图片最终效果: jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...

    jqgrid jquery-ui-1.8.17.custom.css

    jqgrid jquey 样式 让表格变得更漂亮

    jquery.jqGrid-4.3.3

    jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。 主要特点: -Full control with JavaScript API -Data returned from the server is XML -Simple configuration -Ability to load big ...

    jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar

    jquery.jqGrid-4.3.1+jquery-ui-1.8.17.rar

    获取jqGrid中选择的行的数据

    下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: ...如果想获取选择的行的数据,只要传入rowId即可,如下: var rowData = $(“#gridTable”).jqGrid(‘getRowData',rowId);

    jqGrid-wiki版手册

    jqGrid-wiki版手册

    Jquery 实现列的拖动 jquery grid

    jquey 实现grid 的列的自由拖动 和内容的自由展示和压缩 类似于excel效果。

    jquery.jqGrid-4.1.1.zip

    jquery.jqGrid-4.1.1.zipjquery.jqGrid-4.1.1.zipjquery.jqGrid-4.1.1.zip

    jqGrid-master

    jqGrid-master最新版,从英文站点下载而来,方便各位下载

    jqGrid-3.2.zip

    jqGrid-3.2 jqgriddocs.pdf jquery.jqGrid.js

    jqGrid4.6.0 jqgrid_demo40

    jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...

    jquery.jqGrid-4.3.2.zip

    jquery.jqGrid-4.3.2.zip

Global site tag (gtag.js) - Google Analytics