Jqgrid實作拖動行

一.實作方法1

探讨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插件的方法。 },

二.實作方法2

1. $(grid_selector).jqGrid({   
2. data: url,  
3. datatype: "get",  
4. height: 320,  
5. colNames:[ '投遞序','流水号','任務id','任務号','任務類型','姓名','位址'],  
6. colModel:[  
7.     {name:'DELISEQ',index:'DELISEQ',hidden:true},  
8.     {name:'ID',index:'ID',hidden:true,key:true},  
9.     {name:'OMID',index:'OMID',hidden:true},  
10.     {name:'MAILNO',index:'MAILNO',width:'50'},  
11.     {name:'DRLABEL',index:'DRLABEL',width:'35',formatter : 'select',editoptions : {value : drLabel1}},  
12.     {name:'RECEIVERNAME',index:'RECEIVERNAME',hidden:true,width:'30'},  
13.     {name:'RECEIVERADDR',index:'RECEIVERADDR'}  
14. ],   
15. pager : pager_selector,  
16.               editurl: editUrl,   
17.                multiselect:true,  
18. caption: "任務清單",  
19. autowidth: true   
20. );  
21.   //實作行拖拽  
22.   $(grid_selector).jqGrid('sortableRows', {  
23. items : '.jqgrow:not(.unsortable)'  
24. );