自定义jqgrid的一些小技巧（四）

1.在使用jqgrid自带的行编辑时，如何获得正在编辑的单元格的值呢？

方案一：通过单元格input框来获取他的值，关键是要找准input元素的id值的规律

//行ID和列名字,决定了一个单元格的位置，从而可以取出单元格的值
var strValue=$("#grid").jqGrid("getCell",rowId,"表格列的名字");

如上所示是获取某一个单元格的内容，但是当你把值打印出来时，会发现是一个html代码块，一个input元素，例如

可以发现一个规律，单元格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

扫描二维码关注公众号，回复： 3423056 查看本文章

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;'  onclick=\"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;'  onclick='updateUser(" + rowData.userId + ","+rowId+","+key+")'>修改</a>";

            var se = "<a href='javascript:void(0)' style='height:22px;width:40px;'  onclick='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;'  onclick='editParam("
            + cl + ")'>编辑</a>"
        var se = "<a href='javascript:void(0)' style='height:22px;width:40px;'  onclick='saveParam("
            + cl +","+key+","+oldName+ ")'>保存</a>"
        var fe = "<a href='javascript:void(0)' style='height:22px;width:40px;'  onclick='cancelParam("
            + cl + ")'>取消</a>"
        var ce = "<a href='javascript:void(0)' style='height:22px;width:40px;'  onclick=\"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

自定义jqgrid的一些小技巧（四）

猜你喜欢