jqGrid的編輯——基於Form Editing的增、刪、改操作

上一篇文章中，我們講了一下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 );

其中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='https://my.oschina.net/yonge/blog/編輯' onclick=\"jQuery('#grid').jqGrid('editGridRow','"+cl+"',{checkOnSubmit:true,checkOnupdate:true,closeAfterEdit:true,closeOnEscape:true});\" />";
                    de = "<input style='height:22px;width:40px;' type='button' value='https://my.oschina.net/yonge/blog/刪除' 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;
}

基本上，這樣就可以了。

大家可以看看截圖

Tags: 服務器關鍵字基礎知識服務端文章

文章來源：

jqGrid的編輯——基於Form Editing的增、刪、改操作

相關文章