jqgrid中使用tableDnd插件

标签：

首先准备jquery、jqgrid、tableDnd等js文件。

tableDnD建议到GitHub上直接下载src包，避免一些不必要的问题。连接地址https://github.com/isocra/TableDnD。注意引用适用的jQuery版本，不然也会出问题的。

在jqgrid中使用tableDnD插件是为了实现表单中row的拖拽操作。

首先在$(document).ready(function(){……})中添加如下代码：

 1 //jqgrid表单拖拽
 2         $("#gridTable").tableDnD({
 3             scrollAmount : 1,
 4             dragHandle: ".dragHandle",
 5             onDrop: function(table, row){
 6                 id = row.id;
 7                 getMKXH(id,uid);
 8             },
 9             onAllowDrop: function(draggedRow, row){
10                 uid = $(row).index();
11                 return true;
12             }
13             });    //end $("#gridTable").tableDnD

View Code

具体属性说明参看tableDnd.js文件中的说明。这里说一下dragHandle，“.dragHandle”为jsp页面中配置的样式。

我这里直接写在jsp页面中，未集合到css文件。代码如下：（参考tablednd.css）

 1 <style type="text/css">
 2 .dragHandle {
 3 
 4 }
 5 .showDragHandle {
 6     background-image: url(images/updown2.gif);
 7     background-repeat: no-repeat;
 8     background-position: center right;
 9     cursor: move;
10 }
11 </style>

View Code

默认dragHandle是能拖拽整个row，但有时候这并不是我们所需要的。我们可能只想通过拖拽其中某个或者某些cell达到拖拽效果。故此需要将某些cell，在jqgrid中就是某列，添加class属性，其值=“.dragHandle”，在jqgrid中colModel是用来设置列属性的，我的配置如下：

{name:‘cjr‘,index:‘cjr‘, autowidth:true,align:"center",classes:‘dragHandle‘}

classes可以配置多值。

这样就实现通过拖拽每一行的name=‘cjr‘这一列实现拖拽row功能。

在jqgrid的gridComplete: function(){……})函数里添加如下代码：

 $("#_empty", "#gridTable").addClass("nodrag nodrop");//样式
                 $("#gridTable tr:even‘).addClass(‘alt‘)");
                 $("#gridTable").tableDnDUpdate();//更新jquery.tablednd.js插件的方法。

为了更直观一些，需要添加一些样式。就是上面代码中的.showDragHandle，对每行绑定一个hover函数。

$("#gridTable tr").hover(function(){
                     $(this.cells[6]).addClass(‘showDragHandle‘);
                     }, function() {
                         $(this.cells[6]).removeClass(‘showDragHandle‘);
                     });

这段代码一定要写在gridComplete: function(){……})里面，写在其他地方会出问题。

后台就是一个简单序号交换。此外我这里的jqgrid表单要映射成ztree树形菜单。

jqgrid中使用tableDnd插件

标签：

原文地址：http://www.cnblogs.com/bobangles/p/4328696.html