//初始化表格
$.extend($.fn.datagrid.methods, {
    editCell: function (jq, param) {
        return jq.each(function () {
            var opts = $(this).datagrid('options');
            var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor1 = col.editor;
                if (fields[i] != param.field) {
                    col.editor = null;
                }
            }
            $(this).datagrid('beginEdit', param.index);
            for (var i = 0; i < fields.length; i++) {
                var col = $(this).datagrid('getColumnOption', fields[i]);
                col.editor = col.editor1;
            }
        });
    }
});

var editIndex = undefined;
function endEditing() {
    if (editIndex == undefined) { return true }
    if ($('#tb_Details').datagrid('validateRow', editIndex)) {
        $('#tb_Details').datagrid('endEdit', editIndex);
        editIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function onClickCell(index, field) {
    if (endEditing()) {
        $('#tb_Details').datagrid('selectRow', index)
                .datagrid('editCell', { index: index, field: field });
        editIndex = index;
    }
}
 

，接下來就是對具體的操作了

//初始化表格
    function IntideTable() {
        $("#tb_Details").datagrid({
            url: "../OfficePurchase.mvc/OfficePurchaseApplyDetails",
            width: "auto",
            height: "auto",
            fitColumns: true,
            singleSelect: false,
            onClickCell: onClickCell,
            rownumbers: true, //行號
            frozenColumns:
             [[
                  { field: "ck", checkbox: true }
             ]],
            columns: [[
                 { field: "ID", title: "ID", hidden: true },
               { field: "SuppliesName", title: "用品名稱", width: 100, align: "left" },
               { field: "Spec", title: "規格", width: 100, align: "left" },
               { field: "ModelType", title: "型號", width: 100, align: "left" },
               { field: "ProductionPlace", title: "產地", width: 100, align: "left" },
               { field: "StaticNumber", title: "當前庫存", width: 50, align: "left" },
               {
                   field: "ApplyNumber", title: "申請數量", width: 50, align: "left",
                   editor: { type: 'numberbox', options: { precision: 0, min: 1 } }
               },
               { field: "Units", title: "單位", width: 50, align: "left" },
               {
                   field: "Remarks", title: "備註", width: 100, align: "left",
                   editor: {
                       type: 'combobox',
                       options: {
                           valueField: 'LicensePlate',
                           textField: 'LicensePlate',
                           url: '/VehicleInsurance.mvc/GetAllPlanteG',
                           onSelect: function (rec) {
                               $("#tb_Details").datagrid("acceptChanges");//提交修改的資料   
                           },
                           required: true
                       }
                   }
               }
            ]],
            onAfterEdit: function (rowIndex, rowData, changes) {//編輯完觸發  
                var row = $('#tb_Details').datagrid('getData').rows[rowIndex];
                row["Units"] = changes["Remarks"]; //refreshRow
                $('#tb_Details').datagrid('refreshRow', rowIndex);
            },
            toolbar: [
            {
                text: "新增",
                iconCls: "icon-add",
                handler: function () {
                    JsDraftSave();
                    openOfficeList();

                }
            }, "-",
            {
                text: "刪除",
                iconCls: "icon-remove",
                handler: function () {
                    DelGridData();
                }
            }
            ],
            queryParams:
                {
                    ApplyNo: "@ViewBag.ApplyNo"
                }
        });
    }
 

tb_Details是HTML元素中的Table標籤