jgGrid实现 左移、右移、上移、下移

摘要：

最近在项目需求中通过jqGrid实现表格中的数据：左移、右移、上移、下移和置顶 等操作。
下面记录实现的方法。

下面是代码片段：

右移（其实就是向一个grid容器中插入一行数据）：

//这个方法是获取ztree节点内容，插入到grid表中
function BindBtnRightMethod() {
    //获取ztree对象
    var zTreeObj = $.fn.zTree.getZTreeObj("ztreeId");
    //获取光标选中的tree节点
    var selectedNodes = zTreeObj.getSelectedNodes();
    if (selectedNodes.length == 0) {
        $.modalAlert("操作失败！未选中节点。");
        return;
    } else {
        //新增一行
        var data = { KSID:"10", FLKSID:"101", KSMC: "消化科" };
        addRowDataByGridElementId("jqGridId", data);
    }
}

//摘要：
//内容：向grid表中添加一行记录
function addRowDataByGridElementId(id, data) {
 //获取当前grid中的表ID集合
 var jqGrid = $('#' + id);
 var IDs = jqGrid.getDataIDs();
 //定义标量，记录IDs中的rowid的最大值
 var maxId = 0;
 if (IDs.length > 0) {
     for (var i = 0; i < IDs.length; i++) {
         var tmpId = jqGrid.getInd(IDs[i]);
         if (maxId < tmpId) {
             maxId = tmpId;
         }
     }
 }
 //这里是在给新增的rowid自定义一个有序值
 var rowid= maxId + 1;
 //执行新增操作
 jqGrid.addRowData(rowid, data, rowid);
}

左移（其实是从grid表中删除一行）：

//摘要：
//内容：按钮左移
function BindBtnLeftMethod() {
  //删除选中行
  var rowid = $("#jqGridId").jqGrid('getGridParam', 'selrow');
  if (rowid == "" || rowid == undefined || rowid == null) {
      $.modalAlert("移除行未选中！");
      return;
  } else {
      var flag = $("#jqGridId").jqGrid("delRowData", rowid);
      if (!flag) {
          $.modalAlert("移除操作失败！");
      }
  }
}

上移：

//摘要：
//内容：按钮上移
function BindBtnUpMethod() {
    var obj = $("#jiGouGridList");
    var IDs = obj.getDataIDs();
    var rowid = obj.jqGrid('getGridParam', 'selrow');
    if (rowid == "" || rowid == null || rowid == undefined) {
        $.modalAlert("未选中行！");
        return false;
    }
    var rowIndex = getRowIndexByRowId(IDs, rowid);
    if (rowIndex == 0) {
        $.modalAlert('已经置顶，不能上移!');
    } else {
        var srcrowid = getRowIdByRowIndex(IDs, rowIndex - 2);
        var rowUpId = getRowIdByRowIndex(IDs, rowIndex - 1);
        var rowData = obj.jqGrid('getRowData', rowid);
        var rowUpData = obj.jqGrid('getRowData', rowUpId);
        //删除当前行
        obj.delRowData(rowid);
        obj.delRowData(rowUpId);
        //新插入一行
        obj.addRowData(rowid, rowData, "after", srcrowid);
        obj.addRowData(rowUpId, rowUpData, "after", rowid);
        //默认再选中新增的这个行
        obj.setSelection(rowid);
    }
}

//摘要：
//内容：根据rowid，获取索引值
function getRowIndexByRowId(Ids, id) {
    var index = 0;
    for (var i = 0; i < Ids.length; i++) {
        if (Ids[i] == id) {
            index = i;
        }
    }
    return index;
}

//摘要：
//内容：根据索引值获取rowid值
function getRowIdByRowIndex(Ids, index) {
    var rowid = "";
    for (var i = 0; i < Ids.length; i++) {
        if (i == index) {
            rowid = Ids[i];
        }
    }
    return rowid;
}

下移：

//摘要：
//内容：按钮下移
function BindBtnDownMethod() {
    var obj = $("#jqGridId");
    var IDs = obj.getDataIDs();
    var rowid = obj.jqGrid('getGridParam', 'selrow');
    if (rowid == "" || rowid == null || rowid == undefined) {
        $.modalAlert("未选中行！");
        return false;
    }
    var rowIndex = getRowIndexByRowId(IDs, rowid);
    if (rowIndex == (IDs.length - 1)) {
        $.modalAlert('已经置底，不能下移!');
    } else {
        var srcrowid = getRowIdByRowIndex(IDs, rowIndex - 1);
        var rowDownId = getRowIdByRowIndex(IDs, rowIndex + 1);
        var rowData = obj.jqGrid('getRowData', rowid);
        var rowDownData = obj.jqGrid('getRowData', rowDownId);
        //删除当前行
        obj.delRowData(rowid);
        obj.delRowData(rowDownId);
        //新插入一行
        obj.addRowData(rowDownId, rowDownData, "after", srcrowid);
        obj.addRowData(rowid, rowData, "after", rowDownId);
        //默认再选中新增的这个行
        obj.setSelection(rowid);
    }
}