利用jqgrid实现上移下移单元格功能

前言

JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。

在表格中常常需要调整表格中数据的显示顺序，我用的是jqgrid,实现原理就是将表中的行数保存到数据库中，取数据时按行进行排序

下面话不多说了，来一起看看详细的介绍吧

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("请用鼠标点击选择一行后再执行操作!");
    return;
   }
   return callback(selected);
  }

3、这里的callback是up和down 函数的合并，那么我们再看看这两个函数

function up(selected) {
   if (selected == 1) return;
   else {
    gridHelper.moveRow("up", tableObj);
   }
  }

  function down(selected) {
   gridHelper.moveRow("down", tableObj);
  }

4、在这个函数中，我们都调用了一个函数movRow() 让我们来看看这个函数，这个函数的原理就是把当前选中的行和我要移到至的行进行交换就行了。

//移动一行
 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);
  //对调行号
  var tempRn = temp1.rn;
  temp1.rn = temp2.rn;
  temp2.rn = tempRn;
  //对调数据
  tableObj.setRowData(id, temp2);
  tableObj.setRowData(targetId, temp1);
  tableObj.setSelection(targetId);
 }

5、在4中调用了getTargetId（）方法，我们再来看看这个方法

//取得上移时的上一行的id，或下移时的下一行的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、增加数据库字段Sequence  我用的nhibernate 还要在配置文件中进行修改，增加一行<property name="Order" column="Sequence"></property>  实体类中增加字段 order，在保存表时保存表中的行号

保存数据说明：保存时是保存表中的所有数据，有已经在数据库中的数据，有没有存在数据库中的数据，根据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、取数据时根据 Order 字段进行排序

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;
  }

至此，表格中数据的上移下移就完成了。

总结：

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对北冥有鱼的支持。

您可能感兴趣的文章:

• jqgrid 简单学习笔记
• JQGrid的用法解析(列编辑,添加行,删除行)
• jQuery中jqGrid分页实现代码
• jqGrid用法汇总(全经典)
• jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
• jqGrid随窗口大小变化自适应大小的示例代码
• Bootstrap嵌入jqGrid，使你的table牛逼起来
• 一个关于jqGrid使用的小例子(行按钮)
• jqGrid 学习笔记整理——进阶篇(一 )
• 给jqGrid数据行添加修改和删除操作链接（之一）