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

陆砚码

2026-11-01 • 👁 0人浏览过

前言JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。

在表格中常常需要调整表格中数据的显示顺序，我用的是jqgrid,实现原理就是将表中的行数保存到数据库中，取数据时按行进行排序下面话不多说了，来一起看看详细的介绍吧jqgrid上移下移单元格

1、上移，下移按钮

上移下移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 还要在配置文件中进行修改，增加一行实体类中增加字段 order，在保存表时保存表中的行号

保存数据说明：保存时是保存表中的所有数据，有已经在数据库中的数据，有没有存在数据库中的数据，根据IDj是否为0来判断的。

public void UpdatePlan(PlanToReport plan, List 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 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 list = new List();try{IList l = criteria.List();list = PlanToReportDao.IListToList(l);}catch { }return list;}至此，表格中数据的上移下移就完成了。

总结：

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

您可能感兴趣的文章:jqgrid 简单学习笔记JQGrid的用法解析(列编辑,添加行,删除行) jQuery中jqGrid分页实现代码jqGrid用法汇总(全经典) jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法jqGrid随窗口大小变化自适应大小的示例代码Bootstrap嵌入jqGrid，使你的table牛逼起来一个关于jqGrid使用的小例子(行按钮) jqGrid 学习笔记整理——进阶篇(一 )给jqGrid数据行添加修改和删除操作链接（之一）

1、上移，下移按钮

总结：

相关文章