利用jqgrid實(shí)現(xiàn)上移下移單元格功能
前言
JQGrid是一個(gè)在jquery基礎(chǔ)上做的一個(gè)表格控件,以ajax的方式和服務(wù)器端通信。
在表格中常常需要調(diào)整表格中數(shù)據(jù)的顯示順序,我用的是jqgrid,實(shí)現(xiàn)原理就是將表中的行數(shù)保存到數(shù)據(jù)庫(kù)中,取數(shù)據(jù)時(shí)按行進(jìn)行排序
下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
jqgrid上移下移單元格
1、上移,下移按鈕
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="operateWithOneRowById(up)" class="linkButton">上移</a> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="operateWithOneRowById(down)" class="linkButton">下移</a>
2、上移下移 功能
function operateWithOneRowById(callback) { var selected = tableObj.jqGrid('getGridParam', 'selrow'); if (selected == null) { alert("請(qǐng)用鼠標(biāo)點(diǎn)擊選擇一行后再執(zhí)行操作!"); return; } return callback(selected); }
3、這里的callback是up和down 函數(shù)的合并,那么我們?cè)倏纯催@兩個(gè)函數(shù)
function up(selected) { if (selected == 1) return; else { gridHelper.moveRow("up", tableObj); } } function down(selected) { gridHelper.moveRow("down", tableObj); }
4、在這個(gè)函數(shù)中,我們都調(diào)用了一個(gè)函數(shù)movRow() 讓我們來(lái)看看這個(gè)函數(shù),這個(gè)函數(shù)的原理就是把當(dāng)前選中的行和我要移到至的行進(jìn)行交換就行了。
//移動(dòng)一行 this.moveRow = function(moveMethod, grid) { if (grid) tableObj = grid; var id; // if(selRow) id=selRow; // else id = getSelRow(); id = this.getSelRow(); tableObj.restoreRow(id); if (id == null) return; var targetId = this.getTargetId(id, moveMethod) if (targetId == -1) return; var temp1 = tableObj.getRowData(id); var temp2 = tableObj.getRowData(targetId); //對(duì)調(diào)行號(hào) var tempRn = temp1.rn; temp1.rn = temp2.rn; temp2.rn = tempRn; //對(duì)調(diào)數(shù)據(jù) tableObj.setRowData(id, temp2); tableObj.setRowData(targetId, temp1); tableObj.setSelection(targetId); }
5、在4中調(diào)用了getTargetId()方法,我們?cè)賮?lái)看看這個(gè)方法
//取得上移時(shí)的上一行的id,或下移時(shí)的下一行的id this.getTargetId = function(selId, method, grid) { if (grid) tableObj = grid; var ids = tableObj.getDataIDs(); for (var i = 0; i < ids.length; i++) { if (selId == ids[i] && method == "up") { if (i == 0) return -1; else return ids[i - 1]; } if (selId == ids[i] && method == "down") { if (i == ids.length - 1) return -1; else return ids[i + 1]; } } }
6、增加數(shù)據(jù)庫(kù)字段Sequence 我用的nhibernate 還要在配置文件中進(jìn)行修改,增加一行<property name="Order" column="Sequence"></property>
實(shí)體類中增加字段 order,在保存表時(shí)保存表中的行號(hào)
保存數(shù)據(jù)說(shuō)明:保存時(shí)是保存表中的所有數(shù)據(jù),有已經(jīng)在數(shù)據(jù)庫(kù)中的數(shù)據(jù),有沒有存在數(shù)據(jù)庫(kù)中的數(shù)據(jù),根據(jù)IDj是否為0來(lái)判斷的。
public void UpdatePlan(PlanToReport plan, List<PlanPerson> list) { NHibernate.ISession session = NHibernateSessionManager.Instance.GetSession(); try { PlanToReportService.UpdatePlan(plan); for (int i = 0; i < list.Count; i++) { PlanPerson item = list[i]; if (item.ID != 0) { PlanPerson itemnew = PlanToReportService.GetPlanPersonById(item.ID); itemnew.JobName = item.JobName; itemnew.ApprovalResults = item.ApprovalResults; itemnew.Attachments = item.Attachments; itemnew.CountryCode = item.CountryCode; itemnew.CountryName = item.CountryName; itemnew.MissionType = item.MissionType; itemnew.Position = item.Position; itemnew.Remark = item.Remark; itemnew.StartDate = item.StartDate; itemnew.Status = item.Status; itemnew.Explain = item.Explain; itemnew.Order = i; PlanToReportService.AddNewPlanPerson(itemnew); } else { item.PlanID = plan.ID; item.Order = i; PlanToReportService.AddNewPlanPerson(item); } } session.Transaction.Commit(); } catch (Exception ep) { session.Transaction.Rollback(); throw ep; } }
7、取數(shù)據(jù)時(shí)根據(jù) Order 字段進(jìn)行排序
public List<PlanPersonShowInGrid> GetShowPersonInPlan(int planID) { ISession session = NHibernateSessionManager.Instance.GetSession(); ICriteria criteria = session.CreateCriteria(typeof(PlanPersonShowInGrid)); criteria.Add(Expression.Eq("PlanID", planID)).AddOrder(Order.Asc("Order")); List<PlanPersonShowInGrid> list = new List<PlanPersonShowInGrid>(); try { IList l = criteria.List(); list = PlanToReportDao.IListToList<PlanPersonShowInGrid>(l); } catch { } return list; }
至此,表格中數(shù)據(jù)的上移下移就完成了。
總結(jié):
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- jqgrid 簡(jiǎn)單學(xué)習(xí)筆記
- JQGrid的用法解析(列編輯,添加行,刪除行)
- jQuery中jqGrid分頁(yè)實(shí)現(xiàn)代碼
- jqGrid用法匯總(全經(jīng)典)
- jquery下動(dòng)態(tài)顯示jqGrid以及jqGrid的屬性設(shè)置容易出現(xiàn)問(wèn)題的解決方法
- jqGrid隨窗口大小變化自適應(yīng)大小的示例代碼
- Bootstrap嵌入jqGrid,使你的table牛逼起來(lái)
- 一個(gè)關(guān)于jqGrid使用的小例子(行按鈕)
- jqGrid 學(xué)習(xí)筆記整理——進(jìn)階篇(一 )
- 給jqGrid數(shù)據(jù)行添加修改和刪除操作鏈接(之一)
相關(guān)文章
Jquery uploadify圖片上傳插件無(wú)法上傳的解決方法
很多的朋友都有遇到Jquery uploadify圖片上傳插件無(wú)法上傳的情況,下面為大家介紹下不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-12-12jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。下面通過(guò)本文給大家分享jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題,需要的朋友參考下吧2017-11-11深入學(xué)習(xí)jQuery Validate表單驗(yàn)證
這篇文章主要針對(duì)jQuery Validate表單驗(yàn)證為大家進(jìn)行詳細(xì)介紹,如何在class屬性里面并定義錯(cuò)誤信息的提示,感興趣的小伙伴們可以參考一下2016-01-01jQuery實(shí)現(xiàn)簡(jiǎn)單下拉導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單下拉導(dǎo)航效果,通過(guò)簡(jiǎn)單的元素遍歷與樣式替換實(shí)現(xiàn)下拉導(dǎo)航的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09jQuery plugin animsition使用小結(jié)
本文通過(guò)實(shí)例代碼給大家分享了jQuery plugin animsition用法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09JQuery插件jcarousellite的參數(shù)中文說(shuō)明
這篇文章主要介紹了JQuery插件jcarousellite的參數(shù)中文說(shuō)明,本文分別給出各個(gè)參數(shù)的含義,需要的朋友可以參考下2015-05-05JavaScript實(shí)現(xiàn)向select下拉框中添加和刪除元素的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向select下拉框中添加和刪除元素的方法,涉及jQuery中append()與remove()方法動(dòng)態(tài)操作表單元素的相關(guān)技巧,需要的朋友可以參考下2017-03-03jquery將一個(gè)表單序列化為一個(gè)對(duì)象的方法
將表單序列化為一個(gè)對(duì)象的方法有很多,在本文為大家介紹下使用jquery是如何做到的,感興趣的朋友可以參考下2014-01-01jQuery驗(yàn)證Checkbox是否選中的代碼 推薦
jQuery驗(yàn)證Checkbox是否選中的代碼,需要的朋友可以參考下。建議大家看下腳本之家的相關(guān)文章。2011-09-09