jQueryGridComplex

<%-- jQGrid Init --%>
<script type="text/javascript">
    $(function() {
        $("#grid").jqGrid({
            url:'<%=request.getContextPath()%>/jQueryGrid/getComplexGridData',
            datatype: 'json',
            mtype: 'POST',
            colNames:['Id', 'Product Name', 'Category'],
            colModel:[
                {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:false},
                {name:'productName',index:'productName', width:100,editable:true,editoptions:{readonly:true,size:10},hidden:false},
                {name:'categoryName',index:'categoryName', width:100,editable:true,editoptions:{readonly:true,size:10},hidden:false}
            ],
            postData: {
            },
            rowNum:20,
            rowList:[20,40,60],
            height: 200,
            autowidth: true,
            rownumbers: true,
            pager: '#pager',
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            caption:"Products",
            emptyrecords: "Empty records",
            loadonce: false,
            loadComplete: function() {
                alert("Complete");
            },
            jsonReader : {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: true, //if 'false' will chage json reader format to 'name' require
                //cell: "cell",
                id: "0" //id: "id"
            }
        });
        $("#grid").jqGrid('navGrid','#pager',
        {edit:false,add:false,del:false,search:true},
        { },
        { },
        { },
        {
            sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
            closeOnEscape: true,
            multipleSearch: true,
            closeAfterSearch: true }
    );



        $("#grid").navButtonAdd('#pager',
        { 	caption:"Add",
            buttonicon:"ui-icon-plus",
            onClickButton: addRow,
            position: "last",
            title:"",
            cursor: "pointer"
        }
    );

        $("#grid").navButtonAdd('#pager',
        { 	caption:"Edit",
            buttonicon:"ui-icon-pencil",
            onClickButton: editRow,
            position: "last",
            title:"",
            cursor: "pointer"
        }
    );

        $("#grid").navButtonAdd('#pager',
        { 	caption:"Delete",
            buttonicon:"ui-icon-trash",
            onClickButton: deleteRow,
            position: "last",
            title:"",
            cursor: "pointer"
        }
    );

        $("#btnFilter").click(function(){
            $("#grid").jqGrid('searchGrid',
            {multipleSearch: false,
                sopt:['eq']}
        );
        });

        // Toolbar Search
        $("#grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch:"cn"});

    });
</script>
<%-- End jQGrid Init --%>

<%-- jQGrid Function --%>
<script type="text/javascript">

    function addRow() {

        // Get the currently selected row
        $("#grid").jqGrid('editGridRow','new',
        { 	url: "jqGridServlet/add",
            editData: {
            },
            recreateForm: true,
            beforeShowForm: function(form) {
            },
            closeAfterAdd: true,
            reloadAfterSubmit:false,
            afterSubmit : function(response, postdata)
            {
                var result = eval('(' + response.responseText + ')');
                var errors = "";

                if (result.success == false) {
                    for (var i = 0; i < result.message.length; i++) {
                        errors +=  result.message[i] + "<br/>";
                    }
                }  else {
                    $("#dialog").text('Entry has been added successfully');
                    $("#dialog").dialog(
                    {	title: 'Success',
                        modal: true,
                        buttons: {"Ok": function()  {
                                $(this).dialog("close");}
                        }
                    });
                }
                // only used for adding new records
                var new_id = null;

                return [result.success, errors, new_id];
            }
        });

    }

    function editRow() {
        // Get the currently selected row
        var row = $("#grid").jqGrid('getGridParam','selrow');

        if( row != null )
            $("#grid").jqGrid('editGridRow',row,
        {	url: "jqGridServlet/edit",
            editData: {
            },
            recreateForm: true,
            beforeShowForm: function(form) {
            },
            closeAfterEdit: true,
            reloadAfterSubmit:false,
            afterSubmit : function(response, postdata)
            {
                var result = eval('(' + response.responseText + ')');
                var errors = "";

                if (result.success == false) {
                    for (var i = 0; i < result.message.length; i++) {
                        errors +=  result.message[i] + "<br/>";
                    }
                }  else {
                    jq("#dialog").text('Entry has been edited successfully');
                    jq("#dialog").dialog(
                    {	title: 'Success',
                        modal: true,
                        buttons: {"Ok": function()  {
                                jq(this).dialog("close");}
                        }
                    });
                }

                return [result.success, errors, null];
            }
        });
        else $( "#dialogSelectRow" ).dialog();
    }

    function deleteRow() {
        // Get the currently selected row
        var row = $("#grid").jqGrid('getGridParam','selrow');

        // A pop-up dialog will appear to confirm the selected action
        if( row != null )
            $("#grid").jqGrid( 'delGridRow', row,
        { url: 'jqGridServlet/delete',
            recreateForm: true,
            beforeShowForm: function(form) {
                //change title
                $(".delmsg").replaceWith('<span style="white-space: pre;">' +
                    'Delete selected record?' + '</span>');

                //hide arrows
                $('#pData').hide();
                $('#nData').hide();
            },
            reloadAfterSubmit:false,
            closeAfterDelete: true,
            afterSubmit : function(response, postdata)
            {
                var result = eval('(' + response.responseText + ')');
                var errors = "";

                if (result.success == false) {
                    for (var i = 0; i < result.message.length; i++) {
                        errors +=  result.message[i] + "<br/>";
                    }
                }  else {
                    $("#dialog").text('Entry has been deleted successfully');
                    $("#dialog").dialog(
                    {	title: 'Success',
                        modal: true,
                        buttons: {"Ok": function()  {
                                $(this).dialog("close");}
                        }
                    });
                }
                // only used for adding new records
                var new_id = null;

                return [result.success, errors, new_id];
            }
        });
        else $( "#dialogSelectRow" ).dialog();
    }

</script>
<%-- End jQGrid Function --%>

<p>JqGrid - Java Servlet/EJB Integration Tutorial</p>
<div id="jqgrid">
    <table id="grid"></table>
    <div id="pager"></div>
</div>

<div id="dialog" title="Feature not supported" style="display:none">
    <p>That feature is not supported.</p>
</div>

<div id="dialogSelectRow" title="Warning" style="display:none">
    <p>Please select row</p>
</div>

ref: http://medicalhub.googlecode.com/svn/trunk/MedicalHub-war/web/WEB-INF/view/prototype/jQueryGridComplex.jsp