利用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 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
原生js实现放大镜效果
Jan 11 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 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 柱状图实现代码
2009/12/04 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
javascript 终止函数执行操作
2014/02/14 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery事件对象总结
2016/10/17 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
Python实现的矩阵类实例
2017/08/22 Python
python 识别图片中的文字信息方法
2018/05/10 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python实现简易数码时钟
2021/02/19 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
Python中常见的数制转换有哪些
2020/05/27 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
关于人生的感言
2014/01/17 职场文书
一般纳税人申请报告
2015/05/18 职场文书
党小组评议意见
2015/06/02 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python