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


Posted in Javascript onNovember 07, 2018

前言

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

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

总结:

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

Javascript 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
React 源码中的依赖注入方法
Nov 07 #Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 #Javascript
详解react native页面间传递数据的几种方式
Nov 07 #Javascript
微信小程序使用npm支持踩坑
Nov 07 #Javascript
Angular Material Icon使用详解
Nov 07 #Javascript
详解Webpack loader 之 file-loader
Nov 07 #Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 #Javascript
You might like
php curl基本操作详解
2013/07/23 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
js闭包实现按秒计数
2015/04/23 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python super函数使用方法详解
2020/02/14 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
庆八一活动方案
2014/01/25 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
交警失职检讨书
2015/01/26 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
《我是什么》教学反思
2016/02/16 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
Python中的嵌套循环详情
2022/03/23 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers