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='編輯' 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;
}

基本上，這樣就能夠了。

你們能夠看看截圖