利用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 相关文章推荐
Jquery easyUI 更新行示例
Mar 06 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
简单实现python进度条脚本
2017/12/18 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python with (as)语句实例详解
2020/02/04 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
python装饰器代码深入讲解
2021/03/01 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
批评与自我批评范文
2014/10/15 职场文书
社区国庆节活动总结
2015/03/23 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技