利用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 相关文章推荐
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
angular组件间传值测试的方法详解
May 07 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
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
python编写爬虫小程序
2015/05/14 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python中的django是做什么的
2020/07/31 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
交通法规咨询中心工作职责
2013/11/27 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
个人融资协议书
2014/10/02 职场文书
导游欢送词
2015/01/31 职场文书
小学端午节活动总结
2015/02/11 职场文书
出国留学单位推荐信
2015/03/26 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫