Use the tableDnd plug-in and jqgridtablednd plug-in jqgrid

Use the tableDnd plug-in and jqgridtablednd plug-in jqgrid

First, prepare js files such as jquery, jqgrid, and tableDnd.

We recommend that you download the src package directly on GitHub to avoid unnecessary problems. Connection address: https://github.com/isocra/tablednd. Pay attention to reference the applicable jQuery version. Otherwise, problems may occur.

The tableDnD plug-in is used in jqgrid to implement row Drag and Drop Operations in the form.

First in $ (document). ready (function (){......}) Add the following code:

1 // drag the jqgrid form $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 "). tableDnDView Code

For details about the attributes, see the description in the tableDnd. js file. Here we will talk about dragHandle, and ". dragHandle" is the style configured on the jsp page.

I am writing it directly on the jsp page, but the css file is not collected. The Code is as follows: (See 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

By default, dragHandle can drag the entire row, but sometimes this is not what we need. We may only want to drag one or more cells to achieve the drag effect. Therefore, you need to add the class attribute of some cells, which is a column in jqgrid. The value is ". in jqgrid, colModel is used to set column attributes. My configuration is as follows:

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

Classes can be configured with multiple values.

In this way, you can drag the row by dragging the name = 'cjr 'column of each row.

In jqgrid, gridComplete: function (){......}) Add the following code to the function:

$ ("# _ Empty", "# gridTable "). addClass ("nodrag nodrop"); // style $ ("# gridTable tr: even '). addClass ('alt') "); $ (" # gridTable "). tableDnDUpdate (); // update jquery. tablednd. js plug-in method.

To be more intuitive, you need to add some styles. The. showDragHandle in the code above binds a hover function to each row.

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

This code must be written in gridComplete: function (){......}) It can be written elsewhere.

The background is a simple serial number exchange. In addition, the jqgrid form here is mapped to the ztree menu.