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

来源：懂视网责编：小采时间：2020-11-27 22:04:20

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

利用jqgrid实现上移下移单元格功能:前言 JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。在表格中常常需要调整表格中数据的显示顺序，我用的是jqgrid,实现原理就是将表中的行数保存到数据库中，取数据时按行进行排序下面话不多说了，来一起看看详细的介绍吧 jq

推荐度：

点击下载本文 文档为doc格式

导读利用jqgrid实现上移下移单元格功能:前言 JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。在表格中常常需要调整表格中数据的显示顺序，我用的是jqgrid,实现原理就是将表中的行数保存到数据库中，取数据时按行进行排序下面话不多说了，来一起看看详细的介绍吧 jq

前言

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;
 }

至此，表格中数据的上移下移就完成了。

总结：

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推荐度：

点击下载本文 文档为doc格式

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

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐