廣度與深度

//Row Data
var datarow =
                {
                    Item: $("#Item").val().trim(),
                    Hours: $("#Hours").val().trim(),
                    Date: $("#Date").val().trim()
                };

//取得Row的數量
var rowCount = $("#MyjqGrid").getGridParam("reccount");

//取得Array ID
var arrayIDs = $("#MyjqGrid").jqGrid('getDataIDs');
var lastIDValue = arrIDs[arrIDs.length - 1];
var lastID = parseInt(lastIDValue);

//取得Row的Id數量
var _IDs = $("#MyjqGrid").jqGrid('getGridParam', 'records');

//取得選取的RowID
var SelRcowId = $("#MyjqGrid").jqGrid('getGridParam', 'selrow');

//新增Row
var rowID = _IDs +1;
$("#MyjqGrid").jqGrid('addRowData', rowID, datarow);

//修改Row
$("#MyjqGrid").jqGrid('setRowData', SelRcowId, datarow);

//刪除Row
$("#MyjqGrid").jqGrid('delRowData', SelRcowId);
$("#MyjqGrid").delRowData(SelRcowId, true);

//重新讀取Grid
$("#MyjqGrid").trigger("reloadGrid");

//HTML
<table class="OutsiteBoxTable" cellspacing="0" cellpadding="2" width="100%">
    <tr>
        <td>
            <input id="MyGrid_Insert" type="button" value="Insert" style="display: none" />
            <input id="MyGrid_Delete" type="button" value="Delete" style="display: none" />
            <table id="MyGrid"></table>
            <div id="jqGridPager" style="display: none"></div>
        </td>
    </tr>
</table>

//jqGrid_Dialog
<div id="jqGrid_Dialog" title="Insert">
    <label for="ColumnName1">Column Name 1</label><br />
    <input type="text" name="ColumnName1" id="ColumnName1" class="text ui-widget-content ui-corner-all" />
    <br />
    <label for="ColumnName2">Column Name 2</label><br />
    <input type="text" name="ColumnName2" id="ColumnName2" class="text ui-widget-content ui-corner-all/" />
    <br />
    <label for="Date">Date</label><br />
    <input type="text" name="Date" id="Date" class="text ui-widget-content ui-corner-all/" />
</div>

//JavaScript
function MyGrid_Init() {
    var Parameter = $("#Parameter").val();
    $("#MyGrid").jqGrid({
        url: __WebAppPathPrefix + '/TestController/ActionMethod/',
        datatype: 'json',
        mtype: 'POST',
        postData: { Parameter: Parameter },
        //data: data,
        //datatype: "local",
        colNames: ['Column Name 1', 'Column Name 2', 'Date'], //表頭 
        colModel: [
                        { name: 'ColumnName1', index: 'ColumnName1', align: 'center', sortable: false, hidden: true },
                        { name: 'ColumnName2', index: 'ColumnName2', align: 'center', sortable: false, editable: true, cellEdit: true, hidden: true },
                        { name: 'Date', index: 'Date', align: 'center', sortable: false, editable: true, cellEdit: true, formatter: 'date', formatoptions: { newformat: 'Y/m/d' } },
        ],
        shrinkToFit: false,
        rowNum: 50,
        width: 800,
        height: 50,
        sortorder: "desc",
        hidegrid: false,
        viewrecords: true,
        gridview: true,
        emptyrecord: "No record display",
        loadComplete: function () {
            //alert("載入完成後執行");
        },
        ondblClickRow: function (rowid) {
            //alert("Double Click");

        },
        jsonReader: {
            repeatitems: false,
            id: "Id",
            root: function (obj) { return obj; },
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.length; }
        },

    });
}