- 下面的代码是我的 JQGRID 代码,我使用 JsonReader 在网格中绑定数据。还可以找到下面发布的图片。
2.我的服务响应是 JSON,所以我使用 JSON Reader,如果我更改为“localReader”,数据不绑定。
jQuery(document).ready(function () {
$("#datagrid").jqGrid({
url: service url,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
type: "GET",
datatype: "json",
colNames:['Id','MID','Status','VendorID','VendorName','InvoiceNo','DocDate','Amount','DocNo','Type','DueDate','ClDoc','Text','UserName','Currency','ConCode','Region','Stat','Process','Comb','Comments'],
colModel:[
{name:'id',index:'id', width:50,sortable:true},
{name:'mid',index:'mid', width:50, sortable:true},
{name:'status',index:'status', width:70, sortable:true},
{name:'vendorid',index:'vendorid', width:90, sortable:false,align:"left"},
{name:'vendorname',index:'vendorname', width:170, sortable:false,align:"left"},
{name:'invoiceno',index:'invoiceno', width:130, sortable:false,align:"left"},
{name:'docdate',index:'docdate', width:100, sortable:false},
{name:'amount',index:'amount', width:80, sortable:false,align:"Right"},
{name:'docno',index:'docno', width:100, sortable:false},
{name:'typee',index:'typee', width:50, sortable:false},
{name:'duedate',index:'duedate', width:100, sortable:false},
{name:'cldoc',index:'cldoc', width:80, sortable:false},
{name:'text',index:'texxt', width:70, sortable:false},
{name:'username',index:'username', width:100, sortable:false},
{name:'currency',index:'currency', width:80, sortable:false},
{name:'concode',index:'concode', width:80, sortable:false},
{name:'region',index:'region', width:70, sortable:false},
{name:'stat',index:'stat', width:60, sortable:false},
{name:'process',index:'process', width:60, sortable:false},
{name:'combination',index:'combination', width:60, sortable:true},
{name:'comments',index:'comments', width:150, height:20, edittype:'textarea', sortable:false, editable: true,
editoptions: {disabled: false, size:50, resizable:true}}
],
jsonReader: {
repeatitems: false, // To Bind the Data in Grid.
id: "id",
root: function (obj) { return obj; }, // To Bind the Data in Grid.
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.length; },
subgrid: {
root: "rows",
cell: "cell",
repeatitems: false, // To Bind the Data in SubGrid.
id: "id",
root: function (obj) { return obj; } // To Bind the Data in SubGrid.
}
},
rowNum:20,
rowList:[20,30,40,50],
loadonce: true, // If True, all pages will be loaded, else only 1 page will be displayed.
pager: '#navGrid',
sortable: true,
sortname: 'mid',
viewrecords: true,
showOn: 'button',
multiselect:true, // Enabling Checkbox.
sortorder: 'asc',
//prmNames: {rows: 'max'},
prmNames: {rows: 'max', search: null},
height: 290,
width: 1222,
shrinkToFit: false, // For Horizontal Scrollbar.
toolbar: [true,"bottom"], // For appending Buttons in Toolbar.
rownumbers: true // To display No.of rows.
});
});