JQGrid数据未显示 [英] JQGrid data not being displayed
问题描述
我的jqrid有此代码.但是数据没有显示在网格中.生成了网格，但网格中未显示任何数据.另外，我已经应用了错误控制，但是这没有错误.代码如下:
I have this code for my jqrid. But the data is not getting displayed in grid. The grids gets generated but no data is being shown in the grid. Also I have applied error control but that gives me no error. The code is as follows:
$(document).ready(function () {
'use strict';
var expHeadVal = "12345:Party;12346:Miscellaneous;12347:Conveyance;12348:Staff Welfare";
var webForm = document.forms[0];
var i = 0;
var mydata = "";
var jsonData = {
"records": "4",
"userData":{
},
"rows":[
{"id":"1", "sdate":"2013-03-22","expHead":"Party","expAmt":"1000","expReason":"Yes","expRemark":"FedEx"},
{"id":"2", "sdate":"2013-03-21","expHead":"Conveyance","expAmt":"200","expReason":"Yes","expRemark":"FedEx"},
{"id":"3", "sdate":"2013-03-20","expHead":"Conveyance","expAmt":"165","expReason":"Yes","expRemark":"FedEx"},
{"id":"4", "sdate":"2013-03-11","expHead":"Staff Welfare","expAmt":"1653","expReason":"Yes","expRemark":"FeEx"}
]
}
// alert (jsonData.rows[3].id);
var $grid = $("#View1"),
initDateWithButton = function (elem) {
if (/^\d+%$/.test(elem.style.width)) {
// remove % from the searching toolbar
elem.style.width = '';
}
// to be able to use 'showOn' option of datepicker in advance searching dialog
// or in the editing we have to use setTimeout
setTimeout(function () {
$(elem).datepicker({
dateFormat: 'dd-M-yy',
showOn: 'button',
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
inst.input.focus();
}
});
$(elem).next('button.ui-datepicker-trigger').button({
text: false,
icons: {primary: 'ui-icon-calculator'}
}).find('span.ui-button-text').css('padding', '0.1em');
}, 100);
},
numberTemplate = {
formatter: 'number',
align: 'right',
sorttype: 'number',
editable: true,
searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }},
dateTemplate = {
align: 'center',
sorttype: 'date',
editable: true,
formatter: 'date',
formatoptions: { newformat: 'd-M-Y' },
datefmt: 'd-M-Y',
editoptions: { dataInit: initDateWithButton, size: 11 },
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: initDateWithButton,
size: 11, // for the advanced searching dialog
attr: {size: 11} // for the searching toolbar
}
},
lastSel;
$grid.jqGrid({
datatype: "local",
data: jsonData,
jsonReader : {
// userdata: "userData",
root: "rows",
repeatitems: false,
// id: "1",
records: "records"
},
// data: jsonData,
colNames: ['Date','Expense Head','Amount', 'Reason','Remarks'],
colModel: [
// {name:'id', index:'id', width:15, editable:false, key: true, hidden: true},
{name:'sdate', index:'sdate', width:200, template: dateTemplate },
{name:'expHead', index:'expHead', width:150, editable:true, sorttype:'number',sortable:true, edittype:"select", editoptions:{value:expHeadVal}},
{name:'expAmt', index:'expAmt', width:100, editable:true, template: numberTemplate, summaryType:'sum' },
{name:'expReason', index:'expReason', width:200, editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"30"}},
{name:'expRemark', index:'expRemark', width:200,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"30"}}],
loadtext: "Loading...",
sortname: ['Col0','Col1'],
pager: '#pView1',
caption: "Expense Table",
gridview: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
viewrecords: true,
sortorder: 'desc',
height: '100%',
editurl: 'clientArray',
beforeSelectRow: function (rowid) {
if (rowid !== lastSel) {
$(this).jqGrid('restoreRow', lastSel);
lastSel = rowid;
}
return true;
},
ondblClickRow: function (rowid, iRow, iCol, e) {
var p = this.p, $this = $(this);
// if the row are still non-selected
if ((p.multiselect && $.inArray(rowid, p.selarrrow) < 0) || rowid !== p.selrow)
{ $this.jqGrid("setSelection", rowid, true); }
$this.jqGrid('editRow', rowid, true, function () {
if (e.target.disabled)
{ e.target.disabled = false; }
$("input, select", e.target).focus();
});
return;
},
loadComplete: function () {
alert("OK");
},
loadError: function (jqXHR, textStatus, errorThrown) {
alert('HTTP status code: ' + jqXHR.status + '\n' +
'textStatus: ' + textStatus + '\n' +
'errorThrown: ' + errorThrown);
alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
}
});
$grid.jqGrid('gridResize', { minWidth: 450, minHeight: 150 });
$grid.jqGrid('navGrid', '#pView1', {refreshstate: 'current', edit: false, add: false, del: false});
$grid.jqGrid('inlineNav',"#pView1");
});
有人可以告诉我这里缺少什么吗?
Can anybody tell me what is missing here?
谢谢您的帮助.
悉达多
推荐答案
您应该将data: jsonData更改为data: jsonData.rows，因为您使用的是datatype: "local".
You should change data: jsonData to data: jsonData.rows because you use datatype: "local".
顺便说一句，在datatype: "local"的情况下将不使用jsonReader选项. jsonData.rows中的数据格式已经与datatype: "local"的输入数据的默认格式相对应.如果确实需要用另一种数据格式填充具有datatype: "local"的jqGrid，则应使用localReader选项而不是jsonReader(请参阅
By the way jsonReader option will not used in case of datatype: "local". The format of data in jsonData.rows already corresponds default format of input data for datatype: "local". If you do will need to fill jqGrid having datatype: "local" with another format of data you should use localReader option instead of jsonReader (see the documentation).
这篇关于JQGrid数据未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
