利用jqgrid實(shí)現(xiàn)上移下移單元格功能

發(fā)布時(shí)間：2020-10-17 02:34:43 來源：腳本之家閱讀：249 作者：zhengwei_cq 欄目：web開發(fā)

前言

JQGrid是一個(gè)在jquery基礎(chǔ)上做的一個(gè)表格控件，以ajax的方式和服務(wù)器端通信。

在表格中常常需要調(diào)整表格中數(shù)據(jù)的顯示順序，我用的是jqgrid,實(shí)現(xiàn)原理就是將表中的行數(shù)保存到數(shù)據(jù)庫中，取數(shù)據(jù)時(shí)按行進(jìn)行排序

下面話不多說了，來一起看看詳細(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("請用鼠標(biāo)點(diǎn)擊選擇一行后再執(zhí)行操作!");
    return;
   }
   return callback(selected);
  }

3、這里的callback是up和down 函數(shù)的合并，那么我們再看看這兩個(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() 讓我們來看看這個(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);
  //對調(diào)行號(hào)
  var tempRn = temp1.rn;
  temp1.rn = temp2.rn;
  temp2.rn = tempRn;
  //對調(diào)數(shù)據(jù)
  tableObj.setRowData(id, temp2);
  tableObj.setRowData(targetId, temp1);
  tableObj.setSelection(targetId);
 }

5、在4中調(diào)用了getTargetId（）方法，我們再來看看這個(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ù)庫字段Sequence 我用的nhibernate 還要在配置文件中進(jìn)行修改，增加一行<property name="Order" column="Sequence"></property> 實(shí)體類中增加字段 order，在保存表時(shí)保存表中的行號(hào)

保存數(shù)據(jù)說明：保存時(shí)是保存表中的所有數(shù)據(jù)，有已經(jīng)在數(shù)據(jù)庫中的數(shù)據(jù)，有沒有存在數(shù)據(jù)庫中的數(shù)據(jù)，根據(jù)IDj是否為0來判斷的。

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é)：

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細(xì)節(jié)

利用jqgrid實(shí)現(xiàn)上移下移單元格功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽