天天看点

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. );