在jqGrid上添加/编辑/删除的问题

时间:2014-03-18 08:16:01

标签: jquery json jqgrid add edit

我能够成功将JSON数据绑定到jqGrid,但是当我尝试执行表单编辑/更新数据时,弹出窗口显示时没有任何只有提交和取消按钮的字段。

以下详细信息:

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: ['Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
            colModel: [

            { name: 'BankName', align: "center" },
            { name: 'EmployeeName', align: "center" },
            { name: 'JoiningDate', align: "center" },
            { name: 'SalaryAmount', align: "center" },
            { name: 'Comments ', align: "center" }
            ],
            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',
        {
            edit: true,
            add: true,
            del: true,
            search: true,
            searchtext: "Search",
            addtext: "Add",
            edittext: "Edit",
            deltext: "Delete"
        },
        {//EDIT EVENTS AND PROPERTIES GOES HERE 
        },
        {//ADD EVENTS AND PROPERTIES GOES HERE
        },
        {//DELETE EVENTS AND PROPERTIES GOES HERE
        },
        {//SEARCH EVENTS AND PROPERTIES GOES HERE
        }
        );
    });

期待一些指导。

非常感谢,

Abhilash

1 个答案:

答案 0 :(得分:1)

你应该添加" editable:true"到你要编辑的colModel,即

{ name: 'BankName', align: "center", editable: true}