脚本宝典收集整理的这篇文章主要介绍了js实例教程-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); } } 最近在项目需求中通过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); } } 觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-jgGrid实现左移、右移、上移、下移等操作的代码教程全部内容，希望文章能够帮你解决js实例教程-jgGrid实现左移、右移、上移、下移等操作的代码教程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。