jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動(dòng)的結(jié)果

更新時(shí)間：2016年08月15日 10:10:20 作者：izumi

這篇文章主要介紹了jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動(dòng)的結(jié)果,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

1、實(shí)現(xiàn)行的上移、下移、

說(shuō)明：

1.1 通過(guò)datagrid生成的表格有固定的格式，比如，表格div的class名是datagrid-view。比如每一行tr都有id和datagrid-row-index屬性等。

1.2 在上移和下移以后，我們將移動(dòng)以后的兩行的id和datagrid-row-index屬性也必須互換，這樣能保證datagrid-row-index=0的行肯定是頁(yè)面顯示的表格的第一行，=1的是第二行等等。將來(lái)保存的時(shí)候，就是通過(guò)取這個(gè)屬性值找某一行的數(shù)據(jù)的。

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、保存移動(dòng)的結(jié)果

說(shuō)明：每一個(gè)tr包含若干個(gè)td，每個(gè)td都有field屬性，即表格展示對(duì)象的相應(yīng)屬性名，例子中g(shù)oodsId是我要展示的商品的主鍵。每個(gè)td下都包含一個(gè)div，通過(guò)層層

find找到這個(gè)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實(shí)現(xiàn)單行的上移下移及保存移動(dòng)的結(jié)果，希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: