jqgrid不在网页中显示数据？

时间：2012-08-21 06:42:31

标签： asp.net jqgrid

我从这里下载jqgrid：http://www.trirand.net/download.aspx for asp.net.And我尝试在jqgrid clientside中加载数据。我使用以下程序在jqGrid中加载数据。我使用以下程序网页没有显示任何内容？我不知道问题在哪里？

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Untitled Page</title>

     <script type="text/javascript" src="js/trirand/jquery-1.7.2.min.js"></script>
     <script type="text/javascript" src="js/trirand/jquery.jqGrid.min.js"></script>
     <script type="text/javascript" src="js/trirand/i18n/grid.locale-en.js"></script>
     <link href="themes/ui.jqgrid.css" rel="stylesheet" type="text/css" media="screen"/>

    <script type="text/javascript">

    $(document).ready(function(e) {
    alert('ready');
    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:"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"}
    ];


  $("#listtable").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: "#listdiv",
     viewrecords: true,
       caption: "Manipulating Array Data"
});
    });

  </script>  

</head>
<body>
    <table id="listtable"></table>
    <div id="listdiv"></div>
    <div> 

    </div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

绝对是js文件的问题，请参阅下面的aspx代码。它工作正常。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. or /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demonstration how to fill local data with sorting and paging</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js"></script>

    <script type="text/javascript">



    $(document).ready(function () {
        alert('ready');
        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: "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" }

    ];


    $("#listtable").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: "#listdiv",
        viewrecords: true,
        caption: "Manipulating Array Data"
    });

    });


  </script>  
  </head>
  <body>

    <table id="listtable"></table>
    <div id="listdiv"></div>
    <div> 

    </div>
</body>
</html>
相关问题
最新问题