2011-01-10 17 views
0

Ich versuche, eine Tabelle mit jqGrid anzuzeigen. Kann mir jemand erklären, warum das nicht funktioniert? Ich kann keinen Tisch sehen und bekomme keinen JavaScript Fehler! Sie können diesen Code in einer HTML-Datei kopieren und einfügen und es sollte funktionieren (wenn das Problem gelöst ist)jqGrid zeigt keine Tabelle an

Danke

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html width="100%" height="100%"> 
<head> 
    <title>payments search</title> 
    <script src="http://www.trirand.com/blog/jqgrid/js/jquery.js" type="text/javascript"></script> 
    <script src="http://www.trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> 
    <script src="http://www.trirand.com/blog/jqgrid/js/jquery.layout.js" type="text/javascript"></script> 
    <script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $.jgrid.no_legacy_api = true; 
     $.jgrid.useJSON = true; 
    </script> 
    <script src="http://www.trirand.com/blog/jqgrid/js/ui.multiselect.js" type="text/javascript"></script> 
    <script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <script src="http://www.trirand.com/blog/jqgrid/js/jquery.tablednd.js" type="text/javascript"></script> 
    <script src="http://www.trirand.com/blog/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script> 
    <link rel="Stylesheet" type="text/css" href="http://www2.test.org.uk/OpenSocialSamples/visualiser.css" /> 
    <script type="text/javascript"> 
     jQuery("#list4").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"} 
     ]; 
     for(var i=0;i<=mydata.length;i++) 
      jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]); 
    </script> 
</head> 
<body width="100%" height="100%" style="margin: 0px; padding: 0.5em;"> 
    <table id="list4"></table> 
</body> 
</html> 

Antwort

1

Es gibt einige Fehler in Ihrem Code. Die Hauptprobleme sind, dass Sie keine CSS-Dateien enthalten, die wirklich benötigt werden und nicht jQuery(document).ready(function() {/*you code here*/}); verwenden, um zu warten, bis das Dokument geladen ist. Um weniger Wörter zu schreiben, habe ich alle Probleme behoben und den Code geändert, um data Parameter anstelle von weniger effektiv addRowData zu verwenden.

Sie können das feste Beispiel live here sehen.