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

前言

创新互联公司是一家专注于做网站、网站制作与策划设计,嵊州网站建设哪家好?创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:嵊州等地区。嵊州做网站价格咨询:18982081108

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

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

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

jqgrid上移下移单元格

1、上移，下移按钮

 上移
 下移

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 还要在配置文件中进行修改，增加一行实体类中增加字段 order，在保存表时保存表中的行号

保存数据说明：保存时是保存表中的所有数据，有已经在数据库中的数据，有没有存在数据库中的数据，根据IDj是否为0来判断的。

public void UpdatePlan(PlanToReport plan, List 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 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 list = new List();
   try
   {
    IList l = criteria.List();
    list = PlanToReportDao.IListToList(l);
   }
   catch { }
   return list;
  }

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

总结：

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

网页名称：利用jqgrid实现上移下移单元格功能
URL链接：http://cqcxhl.com/article/gsceoe.html

重庆分公司，新征程启航

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

其他资讯