jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動(dòng)的結(jié)果
1、實(shí)現(xiàn)行的上移、下移、
說明:
1.1 通過datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view。比如每一行tr都有id和datagrid-row-index屬性等。
1.2 在上移和下移以后,我們將移動(dòng)以后的兩行的id和datagrid-row-index屬性也必須互換,這樣能保證datagrid-row-index=0的行肯定是頁面顯示的表格的第一行,=1的是第二行等等。將來保存的時(shí)候,就是通過取這個(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é)果
說明:每一個(gè)tr包含若干個(gè)td,每個(gè)td都有field屬性,即表格展示對象的相應(yīng)屬性名,例子中g(shù)oodsId是我要展示的商品的主鍵。每個(gè)td下都包含一個(gè)div,通過層層
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é)果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)表格行上移下移和置頂?shù)姆椒?/a>
- JQuery實(shí)現(xiàn)Table的tr上移下移功能
- JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
- JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡單)
- jQuery Easyui datagrid行內(nèi)實(shí)現(xiàn)【添加】、【編輯】、【上移】、【下移】
- jQuery基于排序功能實(shí)現(xiàn)上移、下移的方法
- jquery實(shí)現(xiàn)標(biāo)簽上移、下移、置頂
- JQuery實(shí)現(xiàn)表格數(shù)據(jù)行上移與下移
相關(guān)文章
基于Jquery的標(biāo)簽智能驗(yàn)證實(shí)現(xiàn)代碼
一直在尋找最快捷方便的信息驗(yàn)證方法,之前自己編過JS版驗(yàn)證但要寫很多輔助代碼,經(jīng)過許多次改進(jìn),還是覺得太麻煩代碼還多,維護(hù)起太費(fèi)盡。2010-12-12jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表
從后臺獲取json數(shù)據(jù),將內(nèi)容填充到下拉列表,頁面做如何處理,接下來,通過本篇文章給大家實(shí)例講解jquery用ajax方式從后臺獲取json數(shù)據(jù)后如何將內(nèi)容填充到下拉列表,需要的朋友可以參考下2015-08-08jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過的商品功能示例
這篇文章主要介紹了jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過的商品功能,結(jié)合實(shí)例形式分析了基于jQuery.cookie.js插件創(chuàng)建cookie及保存瀏覽記錄的操作技巧,需要的朋友可以參考下2017-01-01基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)長按按鈕觸發(fā)事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)長按按鈕觸發(fā)事件的方法,可應(yīng)用于手機(jī)端應(yīng)用程序的開發(fā)中,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02通過jquery-ui中的sortable來實(shí)現(xiàn)拖拽排序的簡單實(shí)例
下面小編就為大家?guī)硪黄ㄟ^jquery-ui中的sortable來實(shí)現(xiàn)拖拽排序的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05