jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
1、实现行的上移、下移、
说明：
1.1通过datagrid生成的表格有固定的格式，比如，表格div的class名是datagrid-view。比如每一行tr都有id和datagrid-row-index属性等。
1.2在上移和下移以后，我们将移动以后的两行的id和datagrid-row-index属性也必须互换，这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行，=1的是第二行等等。将来保存的时候，就是通过取这个属性值找某一行的数据的。
functionmove(isUp){
varselections=$dg.datagrid('getSelections');
if(selections.length==0){
return;
}
var$view=$('div.datagrid-view');
varindex=$dg.datagrid('getRowIndex',selections[0]);
var$row=$view.find('tr[datagrid-row-index='+index+']');
if(isUp){
$row.each(function(){
varprev=$(this).prev();
varprevId=prev.attr('id');
varprevDatagridRowIndex=prev.attr('datagrid-row-index');
varthisId=$(this).attr('id');
varthisDatagridRowIndex=$(this).attr('datagrid-row-index');
prev.length&&$(this).insertBefore(prev);
$(this).attr('id',prevId);
$(this).attr('datagrid-row-index',prevDatagridRowIndex);
prev.attr('id',thisId);
prev.attr('datagrid-row-index',thisDatagridRowIndex);
});
}else{
$row.each(function(){
varnext=$(this).next();
varnextId=next.attr('id');
varnextDatagridRowIndex=next.attr('datagrid-row-index');
varthisId=$(this).attr('id');
varthisDatagridRowIndex=$(this).attr('datagrid-row-index');
next.length&&$(this).insertAfter(next);
$(this).attr('id',nextId);
$(this).attr('datagrid-row-index',nextDatagridRowIndex);
next.attr('id',thisId);
next.attr('datagrid-row-index',thisDatagridRowIndex);
});
}
}
2、保存移动的结果
说明：每一个tr包含若干个td，每个td都有field属性，即表格展示对象的相应属性名，例子中goodsId是我要展示的商品的主键。每个td下都包含一个div，通过层层
find找到这个div以后，值就得到了。
functionnextStep(){
vararrayData=$dg.datagrid('getData').rows;
var$view=$('div.datagrid-view');
if(arrayData.length!=0){
saveIds='';
for(varindex=0;index<arrayData.length;index++){
vargoodsId=$view.find('tr[datagrid-row-index='+index+']').find("td[field='goodsId']").find('div').html();
saveIds+=goodsId;
if(index!=arrayData.length-1){
saveIds+=',';
}
}
$.ajax({
url:'${pageContext.request.contextPath}/coupons/getTemplateId',
type:'post',
dataType:'json',
success:function(result){
window.location.href="${pageContext.request.contextPath}/coupons/tpl"+result+"?goodsId="+saveIds;
}
});
}
}
以上所述是小编给大家介绍的jQueryEasyuiDatagrid实现单行的上移下移及保存移动的结果，希望对大家有所帮助,如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！