jqgrid中使用tableDnd插件，jqgridtablednd插件

首先准备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

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

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树形菜单。

http://www.dengb.com/jQuery/966263.htmlwww.dengb.comtruehttp://www.dengb.com/jQuery/966263.htmlTechArticlejqgrid中使用tableDnd插件，jqgridtablednd插件 首先准备jquery、jqgrid、tableDnd等js文件。 tableDnD建议到GitHub上直接下载src包，避免一些不必要的问题...