2012-05-18 74 views
0

我試圖使用「jq grid」顯示一組數據。爲此,我使用下面的代碼,但它只顯示沒有數據的空行。可以找出任何人在這段代碼中出了什麼問題?jgrid未顯示陣列數據

我用ajax.So的「迴應」中獲取數據會得到這樣

{ID:"id1", Message: "Happy Birth Day", Date: "2012-05-24", Time: "14:18:00", status: "pending"}!{ID:"id3", Message: "Happy Birth Day", Date: "2012-05-24", Time: "14:18:00", status: "pending"} 

數據獲取數據後,將它和添加到array.Then試圖顯示它。

這是.jsp文件

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="grid/css/ui.jqgrid.css" /> 
    <script src="grid/js/i18n/grid.locale-en.js" type="text/javascript"></script> 
    <script src="grid/js/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Edit Scheduled SMS</title> 
    <script type="text/javascript"> 
    $(function(){ 
     $("#list").jqGrid({ 
     datatype: "local", 
      colNames:['ID','Message', 'Date','Time','status'], 
      colModel :[ 
       {name:'ID', index:'ID', width:60}, 
       {name:'Message', index:'Message', width:200}, 
       {name:'Date', index:'Date', width:90, align:'right'}, 
       {name:'Time', index:'Time', width:90, align:'right'}, 
       {name:'status', index:'status', width:80, align:'right'} 
      ], 
      pager: '#pager', 
      rowNum:10, 
      rowList:[10,20,30], 
      sortname: 'invid', 
      viewrecords: true, 
      gridview: true, 
      caption: 'Single SMS' 
     }); 
     $.ajax({ 
      type : "GET", 
      url : "ScheduledClass", 
      data : { 
       type : "getSingleScheduledMsg" 
      } 
     }) 
     .success(function(response,status){   
      tableResult = response; 
      var tableData = [];  
      tableData=tableResult.split("!"); 

      for(var i=0;i<tableData.length;i++) 
       jQuery("#list").jqGrid('addRowData',i+1,tableData[i]); 
     }) 
     .error(
      function() {//error !!!!!    
     }); 
    }); 
    </script> 
    </head> 
    <body> 
     <div id="wrapper" style="height: 100%;"> 
      <div id="content_box" style="width: 600px;"> 
       <div class="ui-widget"> 
        <div class="ui-widget-header">Edit Scheduled SMS</div> 
         <div> 
          <div class="ui-widget-content"> 
           <div style="padding: 10px 10px 10px 10px;"> 
            <Form name="EditScheduledSMS" method="post" 
             id="EditScheduledSMS style="display: inline;"> 
             <table id="list"><tr><td/></tr></table> 
             <div id="pager"></div> 
     ......//closing tags........... 

最後的畫面是這樣的:

A table without Data

回答

1

tableData[i]應該是你把它作爲一個字符串對象,如果您轉換您的子字符串json字符串,您可以嘗試JSON.parse將其更改爲對象。
另外,如果您使用ajax來填充網格,爲什麼使用本地作爲數據類型,如果您指定一個url和一個不同的數據類型,jqgrid已經使用ajax來填充網格。