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插件

关键词：jq