jqgrid增删改查

来源：互联网发布：如何ping端口是否开放编辑：程序博客网时间：2024/06/05 15:23

Form Editing编辑模式主要的方法有几个，分别是editGridRow——用来修改记录，editGridRow函数，传递一个'new'的参数就表示新增记录；viewGridRow查看记录详情；delGridRow删除记录。

这几个方法的调用方式，和jqGrid的其它函数调用方式一样。（可以采用new API的调用方式，把函数名称作为第一个参数来调用）需要注意的地方是，各个函数调用内容的options参数有一些差异，具体可以参考文档；另外就是，各个函数提交到服务端的数据和格式有所差异。这里以editGridRow为例来说明一下。

editGridRow的调用方式如下：

jQuery("#grid_id").editGridRow( rowid, properties );或者是如下的方式jQuery("#grid_id").jqGrid('editGridRow', rowid, properties );

其中rowid指定是编辑那一行，properties是一个包含各种属性以及事件的数组。（具体的属性和事件，请参考文档，这里就不翻译了。）调用之后，提交到服务器上去的数据都是一些什么数据呢？

提交的数据主要包括：

1.各个编辑"字段:值"的对。这个不好理解，其实的意思就是，相当于用POST的方式提交一些数据，数据的名称就是我们定义在colModel中的name属性，值就是我们在弹出窗口录入的值。（当然，这就要求我们在Server端的Action定义这些变量并封装到Pojo对象中去进行处理。）

2.包含一个"id:rowid"的值，用来表明是哪一个id关键字的记录被修改(新增记录的时候，id=_empty)；

3.包含一个"oper:edit"的值，用来指示是编辑还是新增记录(新增记录的时候，oper=add)

4.其它高级情况，比如使用了editData对象或者实现了onclickSubmit事件之后的处理。比较复杂，暂时没有详细研究这种情况下提交数据的格式。

如果是要新增记录，那么editGridRow的调用方式如下：

jQuery("#grid_id").editGridRow( "new", properties );

好了，接下来我们来看看我们在jsp文件中是如何实现的吧。

首先说明一下，这个例子和前一篇文章中的例子有很多变化。主要包括，在jqGrid中新增了一个列，用来作为操作列，同时增加了两个操作：编辑和删除。增加了一个导出查询结果为csv的按钮（自定义按钮），但是具体的后台服务器功能没有实现；把查询和新增功能单独作为一个按钮显示在jqGrid的后面。具体的差异，大家可以看看本人另外一篇文章《jqGrid的多字段查询》中的例子。

    $().ready(function(){
        $("#grid").jqGrid({
            url:'queryAllBrand.action',
            datatype: "json",
            mtype: 'POST',
            colNames:['操作','品牌ID','品牌代码', '品牌名称', '是否可用','最后修改时间'],
            colModel:[
                {name:'act',index:'act',width:110,search:false,sortable:false,editable:false},
                {name:'brandId',index:'brandId', width:90,editable:false},
                {name:'code',index:'code', width:110,
                    editable:true,
                    edittype:'text',
                    editoptions:{size:10,maxlength:15},
                    editrules:{required:true},
                    formoptions:{elmprefix:'(*)'}
                },
                {name:'brandName',index:'brandName', width:100,
                    editable:true,
                    edittype:'text',
                    editoptions:{size:10,maxlength:15},
                    editrules:{required:true},
                    formoptions:{elmprefix:'(*)'}
                },
                {name:'status',index:'status', width:80,
                    editable:true,
                    edittype:'checkbox',
                    editoptions:{value:"1:0"},
                    editrules:{required:true},
                    formoptions:{elmprefix:'(*)'}
                },
                {name:'lastModifiedDatetime',index:'lastModifiedDatetime', width:100,editable:false}
            ],
            rowNum:30,
            rowList:[30,40,50],
            pager: '#nav',
            sortname: 'brandId',
            viewrecords: true,
            width: 500,
            height: 400,
            sortorder: "ASC",
            gridComplete: function(){
                var ids = $("#grid").getDataIDs();//jqGrid('getDataIDs');
                for(var i=0;i<ids.length;i++){
                    var cl = ids[i];
                    be = "<input style='height:22px;width:40px;' type='button' value='编辑' onclick=\"jQuery('#grid').jqGrid('editGridRow','"+cl+"',{checkOnSubmit:true,checkOnUpdate:true,closeAfterEdit:true,closeOnEscape:true});\" />";
                    de = "<input style='height:22px;width:40px;' type='button' value='删除' onclick=\"jQuery('#grid').jqGrid('delGridRow','"+cl+"',{closeOnEscape:true});\" />";
                    jQuery("#grid").jqGrid('setRowData',ids[i],{act:be+de});
                }
            },
            jsonReader: {
                repeatitems : false,
                id: "brandId"
            },
            editurl:'modifyBrand.action',
            caption: "品牌信息"
        }).navGrid('#nav',{edit:false,add:false,del:false})
        .navButtonAdd('#nav',{position:'first',title:'导出为Excel文件',caption:'',onClickButton:exportCsv});


        $("#btnAdd").click(function(){
            jQuery("#grid").jqGrid('editGridRow','new',{height:280,reloadAfterSubmit:true,closeOnEscape:true,addedrow:first});
        });

        $('#btnSearch').click(function(){
            $('#grid').searchGrid({multipleSearch:true,closeOnEscape:true});
        });
    });

    function exportCsv(){
        alert("正在导出为CSV文件......请稍等");
    }

同时，在jsp文件中，增加了两个按钮，btnSearch和btnAdd。

服务器端Action类中的代码如下：

首先在Action类中定义几个属性字段(代码示例中申略了getter和Setterprivate String id;

private String oper;private String code;private String brandName;private String status;......

然后定义我们的编辑URL所指定的Action类方法：

public String modifyBrand(){    String result = "success";    try    {                MProductBrand mpb = new MProductBrand();        mpb.setBrandName(brandName);        mpb.setCode(code);        mpb.setStatus(status);        mpb.setLastModifiedDatetime(new Timestamp(System.currentTimeMillis()));                if(oper != null && oper.equals("edit")){  //编辑            mpb.setBrandId(new Integer(id));            this.brandService.modifyBrand(mpb);        }        else if (oper != null && oper.equals("add")){  //新增            MProductBrand mproductbrand1 = this.brandService.locateByBrandcode(mpb                    .getCode().toString().trim().toUpperCase());            MProductBrand mproductbrand2 = this.brandService.locateByBrandName(mpb                    .getBrandName().toString().trim());                        if (mproductbrand1.getBrandId() == null && mproductbrand2.getBrandId() == null)  //检查是否存在            {                            this.brandService.addBrand(mpb);            }            else            {                log.warn("品牌代码或品牌名称已经存在");                result = "error";            }        }    }    catch (Exception ex)    {        ex.printStackTrace();        result = "error";    }    return null;}

基本上，这样就可以了。

大家可以看看截图