利用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 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 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怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP生成静态页面详解
2006/11/19 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
js表单登陆验证示例
2016/10/19 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Python实现简单猜数字游戏
2021/02/03 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
2014年卫生院工作总结
2014/12/03 职场文书
慰问信格式规范
2015/03/23 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
员工安全责任协议书
2016/03/22 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技