0

JSON を HTML テーブルにレンダリングしようとしています。しかし、難しいのは、必要に応じて JSON をループし、複数の列をレンダリングするようにすることです。

以下の例では、私が欲しいのはこれです：

欲しい結果

結果募集 

<table>
<tr><th>AppName</th><td>App 1</td><td>App 2</td></tr>
<tr><th>Last Modified</th><td>10/1/2012</td><td></td></tr>
<tr><th>App Logo</th><td>10/1/2012</td><td></td></tr>
blahblah
</table>

<table>
<tr><th>AppName</th><td>App 1</td></tr>
blahblah
</table>

JSON の例

"Records": [
    {
        "AppName": "App 1",
        "LastModified": "10/1/2012, 9:30AM",
        "ShipTo_Name": "Dan North",
        "ShipTo_Address": "Dan North",
        "ShipTo_Terms": "Dan North",
        "ShipTo_DueDate": "Dan North",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    },
    {
        "AppName": "App 2",
        "AppLogo": "http://www.google.com/logo.png",
        "LastModified": "10/1/2012, 9:30AM",
        "BillTo_Name": "Steve North",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    }
],
"Records": [
    {
        "AppName": "App 1",
        "LastModified": "10/1/2012, 9:30AM",
        "ShipTo_Name": "222",
        "ShipTo_Address": "333 ",
        "ShipTo_Terms": "444",
        "ShipTo_DueDate": "5555",
        "Items 1": [
            {
                "Item_Name": "Repairs",
                "Item_Description": "Repair Work"
            }
        ]
    }
],

私が今使っているコード

function CreateComparisonTable (arr,level,k) {
    var dumped_text = "";
    if(!level) level = 0;

    //The padding given at the beginning of the line.
    var level_padding = "";
    for(var j=0;j<level+1;j++) level_padding = "--";

    if(typeof(arr) == 'object') { //Array/Hashes/Objects
        for (var item in arr) {
            var value = arr[item];
            if (typeof(value) == 'object') { //If it is an array,
                if(item !=0) {
                    dumped_text += '<tr><td>' + item + '<br>';
                    dumped_text += CreateComparisonTable(value,level+1);
                    dumped_text += '</td></tr>';
                } else {
                    dumped_text += CreateComparisonTable(value,level, value.length);
                }
            } else {
              dumped_text += '<tr><td>' + level_padding + item + '</td><td>' + value + '</td></tr>';
            }
        }
    } 
    return dumped_text;
}

ここでJsfiddle

4

4 に答える 4

1

jQueryのプラグインであるDataTablesは、このシナリオに適した候補であり、コードに「組み込まれた」多くの機能があります。

私はそれを使用しました、そしてそれは私がそれに投げたほとんどすべてを処理しました。

于 2012-10-12T18:23:06.640 に答える
0

jtemplates をお勧めします。jQuery プラグインhttp://jtemplates.tpython.com/これは強力なテンプレート言語で、コードはどこにでも保存できます。ページ内のインラインで、別のファイルで最適な場所に配置します。ASPクラシックによく似ています。見てみる

{#template MAIN}
 <div id="header">{$T.name}</div>
 <table>
 {#foreach $T.table as r}
  {#include row root=$T.r}
 {#/for}
 </table>
{#/template MAIN}

{#template row}
 <tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
  <td>{$T.name.bold()}</td>
  <td>{$T.age}</td>
  <td>{$T.mail.link('mailto:'+$T.mail)}</td>
 </tr>
{#/template row}
于 2012-10-12T18:31:40.223 に答える
0

Mustacheなどのテンプレート言語の使用を検討することをお勧めします。

この質問は役に立つかもしれません: How to structure JSON and build HTML via jQuery

于 2012-10-12T18:14:22.637 に答える
0

私が作成したjsfiddleのこの比較表を見てください。ドロップダウン メニューから選択イベントが検出されると、個々のセルが動的に入力されます。おそらく、フィドルをフォークして、コードの一部を使用して、テーブルでやりたいことを達成できます。

于 2012-10-12T18:51:55.863 に答える