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

摘要：

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

• 1
• 2
• 3

下面是代码片段：

右移（其实就是向一个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);
    }
}