Jqgrid setup error - this.p is undefined
I am trying to set up jqgrid for the first time, my js imports are as follows,
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.12.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.multiselect.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="js/jquery.searchFilter.js" type="text/javascript"></script>
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script src="js/grid.loader.js" type="text/javascript"></script>
I am getting an error that says "this.p is undefined in line 137". I am not sure if I am missing some imports. Any thoughts on this would be great.
Thanks, Abi
@The corrected import after Oleg's comments,
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.12.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
Still does not seem to be working :(
The modified full code:
<html>
<head>
<title>.: Sample :.</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.12.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<script>
/*if ($()) {
}*/
$(document).ready(function(){
for(var i=0;i<=mydata.length;i++){
$("#table1").jqGrid('addRowData',i+1,mydata[i]);
}
}
)
jQuery("#table1").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:开发者_开发百科"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
</script>
</head>
<body>
<div id="outerDiv" style="border: 0px solid #060606; width: 100%; height: 100%;">
<div style="border: 0px solid #060606; width: 100%; height: 25%;">Put whatever you want in here</div>
<div style="border: 0px solid #060606; width: 100%; height: 23%;">
<div style="border: 0px solid #060606; width: 50%; height: 99%;float:left;">
<table id="table1"></table>
</div>
<div style="border: 0px solid #060606; width: 50%; height: 99%;float:right;">
Div Right
</div>
</div>
<div style="border: 0px solid #060606; width: 100%; height: 23%;">
<div style="border: 0px solid #060606; width: 50%; height: 99%;float:left;">
Div Left
</div>
<div style="border: 0px solid #060606; width: 50%; height: 99%;float:right;">
Div Right
</div>
</div>
<div style="border: 0px solid #060606; width: 100%; height: 23%;">
<div style="border: 0px solid #060606; width: 50%; height: 99%;float:left;">
Div Left
</div>
<div style="border: 0px solid #060606; width: 50%; height: 99%;float:right;">
Div Right
</div>
</div>
<div style="border: 0px solid #060606; width: 100%; height: 6%;">
</div>
</div>
</body>
</html>
You should remove jquery.searchFilter.js, jquery.tablednd.js and grid.loader.js and add loading grid.locale-en.js before the jquery.jqGrid.min.js.
If you do want to use grid.loader.js you should examine the file contain and insert after grid.loader.js only the JS files which are not included in the grid.loader.js. The rule is: no jqGrid modules allowed be loaded twice.
UPDATED: You need make some changes in your main JavaScript. The results of my suggestions you can see here.
What should you do:
- add
<!DOCTYPE ...before<html>element. - place the whole your JavaScript code inside of
$(document).ready(function(){(not only call ofaddRowData). - It is more effectife to use data: mydata prameter of jqGrid as to use addRowData method.
- To have full valide strict HTML code I included
<tr><td/></tr>inside of<table>element. How you can verify on validator.w3.org the modified code from http://www.ok-soft-gmbh.com/jqGrid/Abhishek.htm has no validation errors. - I don't quite understand HTML page design which you use. Nevertheless I added
clear:both;style for the first div after the<table>to go on the next line.
加载中,请稍侯......
精彩评论