2010-07-07 6 views
0

mon jqGrid ne s'affiche, quelqu'un peut-il trouver l'erreur dans mes code.I ont porté le code dans le code que aspx page.My estjqGrid ne s'affiche dans asp.net

<html xmlns="http://www.w3.org/1999/xhtml" > 

<head runat="server"> 
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.1.custom.css" /> 

<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" /> 
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/jquery.layout.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="js/ui.multiselect.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="js/jquery.tablednd.js" type="text/javascript"></script> 
<script src="js/jquery.contextmenu.js" type="text/javascript"></script> 


<style type="text/css">  
    body, html { font-size: 80%; }  
     </style> 


     <script type ="text/javascript" > 
      var mydata = [ 
    { id: "1", invdate: "2010-05-24", name: "test", note: "note", tax: "10.00", total: "2111.00" }, 
    { id: "2", invdate: "2010-05-25", name: "test2", note: "note2", tax: "20.00", total: "320.00" }, 
    { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", tax: "30.00", total: "430.00" }, 
    { id: "4", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00" }, 
    { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", tax: "20.00", total: "320.00" }, 
    { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", tax: "30.00", total: "430.00" }, 
    { id: "7", invdate: "2007-10-04", name: "test", note: "note", tax: "10.00", total: "210.00" }, 
    { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "21.00", total: "320.00" }, 
    { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
    { id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
    { id: "12", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
    { id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
    { id: "14", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
    { id: "15", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
    { id: "16", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
    { id: "17", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
    { id: "18", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
    { id: "19", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
    { id: "21", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
    { id: "22", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
    { id: "23", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
    { id: "24", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
    { id: "25", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
    { id: "26", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }, 
    { id: "27", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" }, 
    { id: "28", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" }, 
    { id: "29", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" } 
]; 
      jQuery("#list47").jqGrid({ 
       data: mydata, 
       datatype: "local", 
       height: 150, 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       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", formatter: "date" }, 
    { name: 'name', index: 'name', width: 100 }, 
    { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float", formatter: "number" }, 
    { 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 } 
], 
       pager: "#plist47", 
       viewrecords: true, 
       caption: "Manipulating Array Data" 
      }); 

     </script>  

</head> 

<body> 
    <form id="form1" runat="server"> 

    <table id="list47"></table> 
<div id="plist47"></div> 


    </form> 
</body> 
</html> 

Répondre

0

Vous devez mettre tout le code jqGrid à l'intérieur de l'événement ready, de sorte qu'il est appelé après a été chargé DOM de la page:

jQuery(document).ready(function(){ 
    var mydata = [ 

    ... 

     caption: "Manipulating Array Data" 
    }); 

});

+1

Exactement, Justin! Je veux aussi ajouter que neha pathare devrait inclure le script jquery-ui-1.8.1.custom.min.js mieux après jquery.js – Oleg