一.实现方法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插件的方法。
},
|
- $(grid_selector).jqGrid({
- data: url,
- datatype: "get",
- height: 320,
- colNames:[ '投递序','流水号','任务id','任务号','任务类型','姓名','地址'],
- colModel:[
- {name:'DELISEQ',index:'DELISEQ',hidden:true},
- {name:'ID',index:'ID',hidden:true,key:true},
- {name:'OMID',index:'OMID',hidden:true},
- {name:'MAILNO',index:'MAILNO',width:'50'},
- {name:'DRLABEL',index:'DRLABEL',width:'35',formatter : 'select',editoptions : {value : drLabel1}},
- {name:'RECEIVERNAME',index:'RECEIVERNAME',hidden:true,width:'30'},
- {name:'RECEIVERADDR',index:'RECEIVERADDR'}
- ],
- pager : pager_selector,
- editurl: editUrl,
- multiselect:true,
- caption: "任务列表",
- autowidth: true
- );
- //实现行拖拽
- $(grid_selector).jqGrid('sortableRows', {
- items : '.jqgrow:not(.unsortable)'
- );