jquery jgrid用法

最新推荐文章于 2021-04-08 18:01:09 发布

elfenliedef

最新推荐文章于 2021-04-08 18:01:09 发布

阅读量1.7k

点赞数

分类专栏： jquery 文章标签： jquery properties string function action null

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

http://my.oschina.net/yonge/blog/1920 用法介绍

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

发表于 2009年12月14日 14:07 分类: JAVA 统计: 1评/3111阅 0 人关注此文章，关注此文章 (? )

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

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 );

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 );

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='编辑' οnclick=/"jQuery('#grid').jqGrid('editGridRow','"+cl+"',{checkOnSubmit:true,checkOnUpdate:true,closeAfterEdit:true,closeOnEscape:true});/" />";
                    de = "<input style='height:22px;width:40px;' type='button' value='删除' οnclick=/"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;
......

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 ;
}

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;
}

基本上，这样就可以了。

大家可以看看截图