jqgrid 上移下移單元格

jqGrid · 發表 2018-10-02 13:16:00

摘要：在表格中常常需要調整表格中資料的顯示順序，我用的是jqgrid,實現原理就是將表中的行數儲存到資料庫中，取資料時按行進行排序 1、上移，下移按鈕 <a href="javascript:void(0)" onclick="operateWithOneRo...

在表格中常常需要調整表格中資料的顯示順序，我用的是jqgrid,實現原理就是將表中的行數儲存到資料庫中，取資料時按行進行排序

1、上移，下移按鈕

 <a href="javascript:void(0)" onclick="operateWithOneRowById(up)" class="linkButton">上移</a>
 <a href="javascript:void(0)" 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;
}

至此，表格中資料的上移下移就完成了。

jqgrid 上移下移單元格

您可能也會喜歡…