JQGrid完整範例

節錄開發專案中的一段，當作備忘。

<script type="text/javascript">
$(function(){
    $("#list").jqGrid({
        url:"<c:url value='/security/ibs-watch-dest/data-query' />",
        datatype:"json",
        mtype:"POST",
        jsonReader:{
            root:"queryResult.datas",
            repeatitems:false,
            page:function(obj)    {return obj.queryResult.currentPage;},
            total:function(obj)   {return obj.queryResult.totalPages;},
            records:function(obj) {return obj.queryResult.totalRecords;}
        },
        width:817,
        autowidth:true,
        height:GRID_HEIGHT,
        colModel:[{label:"Dest Cd"    ,name:"destCode"    ,index:"destCode"    ,width:60 ,editable:true ,edittype:"select" ,editoptions:{disabled:"disabled"} ,formoptions:{elmsuffix:"<span class='required-field'>*</span>"}}
        , {label:"Ctry cd" ,name:"dimDestination.ctryCode" ,index:"dimDestination.ctryCode" ,width:60 ,editable:false }
        , {label:"Country" ,name:"dimDestination.country" ,index:"dimDestination.country" ,width:140 ,editable:false }
        , {label:"Area" ,name:"dimDestination.area" ,index:"dimDestination.area" ,width:140 ,editable:false }
        , {label:"Alarm Miniutes"    ,name:"alarmMin"    ,index:"alarmMin"    ,width:80 ,editable:true ,editoptions:{maxlength:11}}
                ],
        gridview:true,
        hidegrid:false,
        shrinkToFit:true,
        rowNum:20,
        rowList:[20, 50],
        pager:"#pager",
        rownumbers:true,
        //multiselect: true,
        sortname:"destCode",
        sortorder:"asc",
        viewrecords:true,
        caption:"${currentFunctionName} (當設定之條件達成時，將自動刪除該條件)",
        beforeProcessing:function(message, status, xhr) {
            if(!isResponseMessages(message)) {
                processMessage(message);
                message.queryResult = createEmptyPagingList();
            }
        },
        loadError:function(xhr, status, error) {
            processMessage(xhr);
        },
        loadComplete: function(){
            getDestCodeSelect();
        }
    }).navGrid("#pager",{edit:${editable}, add:${addable}, del:${deletable}, search:${searchable}, view:false},
        {/*edit*/
            url:"<c:url value='/security/ibs-watch-dest/data-edit' />",
            width:600,
            closeAfterEdit:true,
            errorTextFormat:function(response) {
                return getJQGridErrorTextFormat(response);
            },
            afterSubmit:function(response, postdata) {
                return getJQGridEditingProcessMessage(response);
            },
            onClose:function() {
                cleanAllValidationMessagesNearInputFields();
                return true;
            },
            beforeShowForm:function(form) {
                $("#destCode").attr("disabled", "disabled");
            }
        },
        {/*add*/
            url:"<c:url value='/security/ibs-watch-dest/data-add' />",
            width:600,
            closeAfterAdd:true,
            async: false,
            errorTextFormat:function(response) {
                return getJQGridErrorTextFormat(response);
            },
            beforeSubmit:function(postdata, formid) {
                var res;
                var resmsg = '';
                $.ajax({
                    url:"<c:url value='/security/ibs-watch-dest/data-check' />",
                    type:'GET',
                    data:postdata,
                    datatype: 'json',
                    async: false,
                    success: function(response){
                        if (typeof(response.message)=='undefined' || response.message != 'hidden') {
                            res = true;
                        } else {
                            if (confirm('此DEST_CODE曾經建立,並傳送至RMD,是否繼續新增?') == true) {
                                $.extend(postdata,{"addType":'update'});
                                res = true;
                            } else {
                                res = false;
                                resmsg = '使用者取消';
                            }
                        }
                    }
                });
                return [res, resmsg];
            },
            afterSubmit:function(response, postdata) {
                return getJQGridEditingProcessMessage(response);
            },
            onClose:function() {
                cleanAllValidationMessagesNearInputFields();
                return true;
            },
            beforeShowForm:function(form) {
                $("#destCode").removeAttr("disabled");
            }
        },
        {/*del*/
            url:"<c:url value='/security/ibs-watch-dest/data-del' />",
            onclickSubmit:function(params, posdata) {
                return $("#list").getRowData(posdata);
            },
            afterSubmit:function(response, postdata) {
                return getJQGridEditingProcessMessage(response);
            }
        },
        {/*search*/
            multipleSearch:true,sopt:["eq", "ne", "lt", "le", "gt", "ge", "bw", "bn", "in", "ni", "ew", "en", "cn", "nc", "nu", "nn"]
        },
        {/*view*/}
    );
  
    //<c:if test="${exportable}">
    $("#list").jqGrid("navButtonAdd","#pager",{caption:"", title:"Export", buttonicon:"ui-icon-arrowthickstop-1-s", onClickButton:function() {
        $("#downloadDialog").dialog("open");
    }});
   
    $("#downloadDialog").dialog({
        width:200,
        height:150,
        autoOpen:false,
        buttons:{"Export":function(){
            $("#downloadDialog").dialog("close");
            var postData = $("#list").jqGrid("getGridParam", "postData");
            postData.format = $("#downloadDialogFormat").val();
            $.post("<c:url value='/security/ibs-watch-dest/data-export' />", postData, function(message) {
                processMessage(message);
            }, "json").error(function(xhr) {
                processMessage(xhr);
            });
        }}
    });
    //</c:if>
});
function getDestCodeSelect() {
    /*editoptions:{disabled:"disabled" ,dataUrl:"<c:url value='/security/ibs-watch-dest/query-destCodes' />" ,buildSelect:buildDestCodeSelect} ,*/
    $.ajax({
        url:"<c:url value='/security/ibs-watch-dest/query-destCodes' />",
        type:'GET',
        datatype: 'json',
        async: false,
        success: function(response){
            buildDestCodeSelect(response);
        }
    });
}

function buildDestCodeSelect(response) {
    var message = response;
    if(isResponseMessages(message)) {
        var s = "";
        var datas = message.queryResult.datas;
        var data;
        for(var i=0,len=datas.length;i<len;i++) {
            data = datas[i];
            s+=data.destinationPk.destCode+":"+data.destinationPk.destCode+"-"+data.country;
            if(data.area){
                if(data.area != "null" ){
                    s += "-"+data.area;
                }
            }
            if(i!=len-1){
                s+=";";
            }
        }
    } else {
        s+="'':查詢錯誤";
    }
    $("#list").jqGrid('setColProp', 'destCode', { editoptions: { value: s} });
}
</script>