jqGrid的编辑——基于Form Editing的增、删、改操做

时间 2019-11-08

标签 jqgrid 编辑基于 form editing 繁體版

原文原文链接

上一篇文章中，咱们讲了一下jqGrid编辑的基础知识。本文咱们基于Form Editing的编辑模式详细举例讲解一下。json

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

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

editGridRow的调用方式以下：jsp

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

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

提交的数据主要包括：ui

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

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

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

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

若是是要新增记录，那么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;
}

基本上，这样就能够了。

你们能够看看截图