当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jgGrid实现左移、右移、上移、下移等操作的代码教程

jgGrid实现左移、右移、上移、下移等操作的代码教程

2018年09月13日  | 移动技术网IT编程  | 我要评论

摘要：

最近在项目需求中通过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);
    }
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网