Question

我必须将两个JSON对象绑定到jqGrid，一个是员工薪资详细信息 - 其中一个列是BankId。另一个JSON对象包含Id，BankName。我需要在jqGrid中显示BankName而不是BankId。我能够在表单编辑模式下显示银行名称下拉列表，但无法在查看模式下显示文本，BankId将以查看模式显示。

以下详细信息：

EmpSalary JSON：

[
{"Id":1,"BankId":2,"EmployeeId":2539,"JoiningDate":"2005-07-05T00:00:00","SalaryAmount":50000.0,"Comments":""},
{"Id":2,"BankId":2,"EmployeeId":2232,"JoiningDate":"2001-12-23T00:00:00","SalaryAmount":30000.0,"Comments":"test"},
{"Id":3,"BankId":4,"EmployeeId":2322,"JoiningDate":"2002-09-23T00:00:00","SalaryAmount":90000.0,"Comments":""},
{"Id":4,"BankId":3,"EmployeeId":2432,"JoiningDate":"2003-01-31T00:00:00","SalaryAmount":60000.0,"Comments":" "},
{"Id":5,"BankId":1,"EmployeeId":2892,"JoiningDate":"2000-10-11T00:00:00","SalaryAmount":80000.0,"Comments":"test 2"}
]

银行大师JSON

[
{"Id": 1, "BankName"="Bank of MH"},
{"Id": 2, "BankName"="Bank of SS"},
{"Id": 3, "BankName"="Bank of DS"},
{"Id": 4, "BankName"="Bank of SR"},
]

的jqGrid：

jQuery(document).ready(function () {
        jQuery("#employeeSalarysGrid").jqGrid({
            height: 250,
            url: 'http://localhost:50570/api/Test',
            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: 'BankId', index: 'BankId', align: "center", editable: true, edittype: "select", 
               editoptions: {
                    dataUrl: 'http://localhost:50570/api/Test/GetBanks',
                    buildSelect: function (data) {
                        var response = jQuery.parseJSON(data);
                        var s = '<select>';
                        if (response && response.length) {
                            for (var i = 0, l = response.length; i < l; i++) {
                                var bank  = response[i];
                                s += "<option value=" + bank.BankId + ">" + bank.Name + "</option>";
                            }
                        }
                        return s + "</select>";                        
                    }
                }
            },                
            { name: 'EmployeeName', align: "center", editable: true },
            { name: 'JoiningDate', align: "center", editable: true, formatter: 'date', formatoptions: { newformat: 'd-M-y' }, },
            { 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"
        });

EmployeeName列需要类似的实现。

期待获得指导。

谢谢，

Abhilash

如何在视图模式下显示jqGrid中的下拉文本

0 个答案: