使用Web API在jqGrid中添加/編輯/刪除

Question

我是jqGrid的新手，需要一些有關表單添加/編輯/刪除功能的幫助。 到目前為止，Havent找到了任何相關資源。 我的網格在添加/編輯時顯示彈出窗口，在單擊“編輯”時也填充數據，但是我不確定調用Web API POST / PUT / DELETE數據應使用的JavaScript代碼是什么。

詳情如下：

JSON數據：

[{"Id":1,"BankId":2,"BankName":"State bank","EmployeeId":2539,"EmployeeName":"John C.","JoiningDate":"2005-07-05T00:00:00","SalaryAmount":50000.0,"Comments":""},
{"Id":2,"BankId":2,"BankName":"State bank","EmployeeId":2232,"EmployeeName":"xxx","JoiningDate":"2001-12-23T00:00:00","SalaryAmount":30000.0,"Comments":"test"},
{"Id":3,"BankId":4,"BankName":"National bank","EmployeeId":2322,"EmployeeName":"yyyy","JoiningDate":"2002-09-23T00:00:00","SalaryAmount":90000.0,"Comments":""},
{"Id":4,"BankId":3,"BankName":"Punjab bank","EmployeeId":2432,"EmployeeName":"ppp","JoiningDate":"2003-01-31T00:00:00","SalaryAmount":60000.0,"Comments":" "},
{"Id":5,"BankId":1,"BankName":"Bank of Maharashtra","EmployeeId":2892,"EmployeeName":"zzz y.","JoiningDate":"2000-10-11T00:00:00","SalaryAmount":80000.0,"Comments":"test 2"}
]

jqGrid的Javascript：

    jQuery(document).ready(function () {
        jQuery("#employeeSalarysGrid").jqGrid({
            height: 250,
            url: 'http://localhost:50570/api/Test/GetEmployeeSalaries',
            mtype: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; },
                id: "0",
                cell: "",
                repeatitems: false
            },
            datatype: "json",
            colNames: ['Id', 'Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
            colModel: [
                { name: 'Id', align: "center", hidden:true},
            { name: 'BankName', align: "center", editable: true },
            { name: 'EmployeeName', align: "center", editable: true },
            { name: 'JoiningDate', align: "center", editable: true },
            { name: 'SalaryAmount', align: "center", editable: true },
            { name: 'Comments ', align: "center", editable: true }
            ],
            gridview: true,
            autoencode: true,
            ignorecase: true,
            loadonce: true,
            sortname: "InstallmentDate",
            sortorder: "asc",
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 15, 20],
            pager: '#employeeSalarysPager',
            caption: "Employee Salary list"
        });

         $("#employeeSalarysGrid").jqGrid('navGrid', '#employeeSalarysPager',
            {
                add: true,
                edit: true,
                del: true
            },
            editOption,
            addOption,
            delOption);

        var editOption =
            {
                width: 400, height: 290, left: 20, top: 30,
                reloadAfterSubmit: false, jqModal: false, editCaption: "Edit Record",
                bSubmit: "Submit", bCancel: "Cancel", closeAfterEdit: true,
                mtype: "POST",
                url: 'http://localhost:50570/api/Test/'
            };

        var addOption = {
            width: 400, height: 290, left: 20, top: 30,
            reloadAfterSubmit: false, jqModal: false, addCaption: "Add Record",
            bSubmit: "Submit", bCancel: "Cancel",
            closeAfterAdd: true,
            mtype: "PUT",
            url: 'http://localhost:50570/api/Test/'
        };

        var delOption = {
            caption: "Delete",
            msg: "Delete selected record(s)?",
            bSubmit: "Delete", bCancel: "Cancel",
            mtype: "DELETE",
            url: 'http://localhost:50570/api/Test/'
        };

    });

服務器端API簽名：

 public HttpResponseMessage Post(int id, DTOTest value)
 public HttpResponseMessage Put(DTOTest value)
 public HttpResponseMessage Delete(int id)

請讓我知道代碼有什么問題。 方法不會被調用。 我是否在jqGrid的html代碼中缺少任何內容，還是服務器代碼上的簽名需要修改？ 期待一些指示。

非常感謝，

Abhilash

Answer 1

`var URL = 'rest/book';`

...
var delOptions = { onclickSubmit: function(params, postdata) { params.url = URL + '/' + postdata; } };

你是這個意思？

---

它可能需要網格中的“ editurl”，而不是del（add / edit）Option中的“ url”，如下所示：

...

height: 250,
editurl: 'http://localhost:50570/api/Test/',
url: 'http://localhost:50570/api/Test/GetEmployeeSalaries',
mtype: "GET",
contentType: "application/json; charset=utf-8",

... 試試 ？

Answer 2

您需要在editOption，addOption，deleteOption中添加URL參數

var editOption = {
    width:400,
    height:290,
    left:20,
    top:30,
    reloadAfterSubmit:false,
    jqModal:false,
    editCaption: "Edit Record",
    bSubmit: "Submit",
    bCancel: "Cancel",
    closeAfterEdit:true,
    url:'http://localhost:50570/api/Test/EditEmployee'
};

var addOption = {
    width:400,
    height:290,
    left:20,
    top:30,
    reloadAfterSubmit:false,
    jqModal:false,
    addCaption: "Add Record",
    bSubmit: "Submit",
    bCancel: "Cancel",
    closeAfterAdd:true,
    url:'http://localhost:50570/api/Test/AddEmployee'
};

var delOption = {
    caption: "Delete",
    msg: "Delete selected record(s)?",
    bSubmit: "Delete",
    bCancel: "Cancel",
    url:'http://localhost:50570/api/Test/DeleteEmployee'
};