0

「jq grid」を使用して一連のデータを表示しようとしています。そのために私は以下のコードを使用しましたが、データのない空の行のみを表示しています.このコードの何が問題なのか誰でもわかりますか?

ajaxを使ってデータを取得しています。したがって、「応答」は次のようなデータを取得します

{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"}

データを取得したら、分割して配列に追加します。次に、表示しようとします。

これは.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...........

最終的な写真は次のようになります。

データのないテーブル

4

1 に答える 1

1

tableData[i]文字列として持っているオブジェクトである必要があります。サブ文字列をjson文字列に変換する場合は、JSON.parseを試してオブジェクトに変更できます。
また、ajaxを使用してグリッドにデータを設定する場合、データ型としてローカルを使用する理由は、URLと別のデータ型を指定すると、jqgridはすでにajaxを使用してグリッドにデータを入力します。

于 2012-05-18T18:02:23.403 に答える