jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果

时间:2021-05-26

1、实现行的上移、下移、

说明:

1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view。比如每一行tr都有id和datagrid-row-index属性等。

1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等。将来保存的时候,就是通过取这个属性值找某一行的数据的。

function move(isUp) {var selections = $dg.datagrid('getSelections');if(selections.length == 0){return;}var $view = $('div.datagrid-view');var index = $dg.datagrid('getRowIndex',selections[0]);var $row = $view.find('tr[datagrid-row-index=' + index + ']');if (isUp) {$row.each(function(){var prev = $(this).prev();var prevId = prev.attr('id');var prevDatagridRowIndex = prev.attr('datagrid-row-index');var thisId = $(this).attr('id');var thisDatagridRowIndex = $(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(){var next = $(this).next();var nextId = next.attr('id');var nextDatagridRowIndex = next.attr('datagrid-row-index');var thisId = $(this).attr('id');var thisDatagridRowIndex = $(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以后,值就得到了。

function nextStep() {var arrayData = $dg.datagrid('getData').rows;var $view = $('div.datagrid-view');if(arrayData.length!=0){saveIds = '';for(var index=0;index<arrayData.length;index++){var goodsId = $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;}});}}

以上所述是小编给大家介绍的jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章