1.在使用jqgrid自带的行编辑时,如何获得正在编辑的单元格的值呢?
方案一:通过单元格input框来获取他的值,关键是要找准input元素的id值的规律
//行ID和列名字,决定了一个单元格的位置,从而可以取出单元格的值
var strValue=$("#grid").jqGrid("getCell",rowId,"表格列的名字");
如上所示是获取某一个单元格的内容,但是当你把值打印出来时,会发现是一个html代码块,一个input元素,例如
<input type="text" id="2_firstName" name="firstName" role="textbox" class="editable" style="width: 98%;">
可以发现一个规律,单元格input的id值为rowId+下划线+列名,既然获取到的是这样一个内容,那就好办了,我们直接获取input的value就行了
// 获取用户输入的值
var cId = rowId + "_firstName";
var group= $('#'+cId).val();
方案二:
1、给grid添加beforeEditCell事件
beforeEditCell:function(rowid,cellname,v,iRow,iCol){
lastrow = iRow;
lastcell = iCol;
}
2、在保存时先进行cell保存
$("#grid").jqGrid("saveCell",lastrow,lastcell);
再进行取grid的所有数据
$("#grid").jqGrid("getRowData");
在这里要解释一下,为什么我要获取单元格的内容呢?原因是这样的:你用jqgrid自带的行编辑,你点保存的时候它会自动提交到你定义的接口url,但是你修改的是哪一列,他就会提交的是该列的列名:列值。但是有一个问题是你接口中有两个参数分别为oldName和newName,你想修改name值,就要把以前的名字和现在的名字都传过去,但是使用自带的行编辑,只会提交新名字,并且提交是name参数,与你接口中的对应不上,这很危险。所以我们必须自定义行编辑事件,重写他的事件方法,将某些参数重命名:
var parameter = {
url : "/group/update", //代替jqgrid中的editurl
mtype : "POST",
extraparam : { // 额外 提交到后台的数据
"oldName" : oldName,// 以前的名字在编辑之前可以根据行键获得
"newName" : group //获取单元格的值,并将参数重命名
},
successfunc : function(XHR) { //在成功请求后触发;事件参数为XHR对象,需要返回true/false;
var obj=XHR.responseText;
var data=eval("("+obj+")");
//接收后台返回的数据
if (200===data.code) {
toastr.success("编辑成功");
return true; //返回true会使用修改后的数据填充当前行,同时关闭编辑模式。
} else {
toastr.warning("编辑失败",code.msg);
return false; //返回false会使用修改前的数据填充,同时关闭编辑模式。
}
}//end successfunc
};//end parame
2.在每一行添加自定义按钮,有两种方式:
方案一:是在colNames加上一列名为“操作”,然后在colModel中定义该列formatter,如下
colNames: ['','name','操作'],
colModel: [
{name:'',width:1},
{name: 'name', width: 200},
{
name: "操作", index: "id", width: 350, align: "center",
formatter: function (value, opt, rowData) {
var data = $(grid_selector).jqGrid('getRowData',rowId);
var key="\""+data.Key+"\"";
//var be = "<a href='javascript:void(0)' style='height:22px;width:40px;' οnclick=\"jQuery('"+"#" + subgridTableId+"').jqGrid('editGridRow','"+rowData.id+"',{checkOnSubmit:true,checkOnUpdate:true,closeAfterEdit:true,closeOnEscape:true});\">修改</a>";
var be = "<a href='javascript:void(0)' style='height:22px;width:40px;' οnclick='updateUser(" + rowData.userId + ","+rowId+","+key+")'>修改</a>";
var se = "<a href='javascript:void(0)' style='height:22px;width:40px;' οnclick='delUser(" + rowData.userId + ","+rowId+")'>删除</a>";
return " "+be +" "+ se +" ";
}
}
]
方案二:是在gridComplete事件中加载
gridComplete : function() {
var ids = jQuery(grid_selector).jqGrid('getDataIDs');
for ( var i = 0; i < ids.length; i++) {
var cl = ids[i];
var data = $(grid_selector).jqGrid('getRowData',cl);
var key="\""+data.key+"\"";
var oldName="\""+data.name+"\"";
var be = "<a href='javascript:void(0)' style='height:22px;width:40px;' οnclick='editParam("
+ cl + ")'>编辑</a>"
var se = "<a href='javascript:void(0)' style='height:22px;width:40px;' οnclick='saveParam("
+ cl +","+key+","+oldName+ ")'>保存</a>"
var fe = "<a href='javascript:void(0)' style='height:22px;width:40px;' οnclick='cancelParam("
+ cl + ")'>取消</a>"
var ce = "<a href='javascript:void(0)' style='height:22px;width:40px;' οnclick=\"jQuery('"
+ grid_selector+"').jqGrid('delGridRow','" +cl+"',{url:'/group/delete',recreateForm: true,reloadAfterSubmit:true,closeAfterDelete: true});\">删除</a>";
jQuery(grid_selector).jqGrid('setRowData', ids[i],
{
操作 : be +" "+ se +" "+ fe+" "+ce
});
}
},
效果图:
3.jqgrid表格刷新事件
$("#grid-table").setGridParam({datatype:'json', page:1}).trigger('reloadGrid');
4.加载子表subgrid数据列表时,会要求传入多个参数,其中有一个搜索参数_search,由于Java代码规范接口参数最好不要带下划线,那么该如何解决呢?
解决方法:幸好jqgrid有一个参数支持向后台发送请求时参数重命名,这样到后台就不带下划线了,其他参数想重命名都可以写在里面
prmNames : {
search:'search'
},
下一篇继续
参考博客:https://blog.csdn.net/luguling200802544/article/details/46438659
https://blog.csdn.net/chenqingqing9301/article/details/24779963
https://bbs.csdn.net/topics/390579933/
http://www.360doc.com/content/13/0705/08/1073512_297747042.shtml