前言

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

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

总结:

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

利用jqgrid实现上移下移单元格功能的更多相关文章

  1. html5教你做炫酷的碎片式图片切换 (canvas)

    本篇文章主要介绍了html5教你做炫酷的碎片式图片切换 (canvas) ,具有一定参考价值,有兴趣的可以了解一下

  2. ios – 如何将UICollectionViewCell从一个UICollectionView拖到另一个UICollectionView?

    如果是这样,我将如何实施它?

  3. xcode – 在自定义表视图单元格中嵌入集合视图

    我有一个故事板的图像,你可以看到自定义表格单元格然后底部是一个集合视图,我想填充图像–只是不知道如何?我也不确定哪些信息可能会有所帮助,所以如果有信息遗失,我很抱歉.解决方法您应该将UICollectionView的Delagate和DataSource放在自定义UITableViewCell类中.这是一个nicetutorial.它是关于tableview单元格中的tableview,但这个想法非常相似.祝好运!

  4. ios – 使用动态单元格高度时,将表格视图滚动到底部

    使用动态单元格高度时,如何将表格视图滚动到底部?出于某种原因,此代码在此方案中不起作用:谢谢!

  5. ios – 渲染模式设置为图像目录中的矢量pdf模板,但UIImageView不会在自定义单元格中设置图像

    我已将所有图像文件迁移到资产目录.所有这些都是大小为1x的pdf向量.它们设置为呈现为模板.它们在大小和颜色方面都显得很好.但是有一个来自xib的自定义TableViewCell,我有6个UIImageView链接到目录中的6个这些图像.不知何故,他们不尊重色调,既不是默认也不是自定义.尝试以编程方式更改它们,但也没有工作.这些相同的图像在主故事板内的静态单元格的另一个tableview中显示正常

  6. ios – 我的表视图在滚动时在SWIFT中重用所选单元格

    实例变量

  7. ios – 带图像而不是标题的UITableViewRowAction

    可以告诉我如何解决它,或者其他方式来做到这一点?

  8. iOS – 自定义表格单元格不是UITableView的全宽度

    我可能会犯这个错误.所以我创建了一个UITableView,它基本上有一个设置为主视图的自动布局尾随空间.我正在为这个表创建一个自定义单元格,所以我在原型单元格上进行了定制,定制了它,并为它创建了我的类.这一切都很好.我似乎无法解决的是自定义单元格不是实际表格单元格的全宽,因此只显示白色背景.如果我不使用自定义单元格,则可以使用整个宽度表单元格.我为单元格内容设置了约束,以便背景图像填充单元格.我究竟做错了什么?

  9. UITableViewCellAccessoryCheckmark涵盖iOS 7上的单元格分隔符

    在iOS7上使用此代码会导致分隔符视图被覆盖或缩短:如何修复分隔符视图?

  10. ios – 在UITableviewcell swift中设置水平渐变

    我想在每个单元格上从左到右创建一个水平渐变我使用CAGradientLayey创建自定义图层并将此图层添加到tableview单元格这是我在swift中的代码但是渐变并不覆盖所有tableview单元格,它在渐变单元格和正常单元格背景颜色之间切换,似乎渐变覆盖了单元格文本.我不知道我做错了什么有什么建议吗?谢谢解决方法而不是使用框架,使用单元格的边界,也在索引0处插入子图层,因此它将落后于包括您的标签在内的所有其他图层

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部