添加/编辑/删除的jqGrid使用Web API [英] Add/edit/delete in jqGrid with Web API

问题描述

我是新来的jqGrid，需要在表格一些帮助添加/编辑/删除功能。还没有迄今发现任何相关的资源。我的网格显示弹出添加/编辑，也单击编辑填充数据，但是我不知道应该是什么的javascript code到Web API调用来POST / PUT /删除数据。

I am new to jqGrid and need some help on form add/edit/delete functionality. Havent found any relevant resources so far. My grid is displaying pop up on add/edit, also populating data on clicking edit, however I am not sure what should be javascript code to invoke the Web api to POST/PUT/DELETE the data.

下面的详细信息：

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"}
]

JavaScript进行jqGrid的：

Javascript for jqGrid:

    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签名：

Server side API signatures:

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

请让我知道什么是错的code。方法没有被调用。我失去了在HTML code何事jqGrid的，或者需要修改服务器上的code中的签名？
期待着一些指针。

Please let me know what is wrong with the code. Methods are not getting invoked. Am i missing anything in html code for jqGrid, OR are the signatures on server code needs to be modified? Looking forward for some pointers.

非常感谢，

Abhilash

推荐答案

您需要在您editOption添加URL参数，addOption，deleteOption

You need to add URL parameter in your editOption, addOption, deleteOption

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'
};

这篇关于添加/编辑/删除的jqGrid使用Web API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！