2012-02-07 4 views
0

JSONがサーバーから返されました。私はここに2つの最初のレコードを貼り付けます(長い)が、理論的には100年代になる可能性があります。JSONをテーブルとして出力する方法 - jQuery.tmpl?他に何か?

{ 
"1": { 
    "text": "First Thoughts and Feelings", 
    "filters": { 
     "2": { 
      "text": "% Postive", 
      "banners": { 
       "2": { 
        "text": "Ontario", 
        "val": "46.1907" 
       }, 
       "3": { 
        "text": "Quebec", 
        "val": "47.9016" 
       }, 
       "1": { 
        "text": "Total Respondents", 
        "val": "52.9057" 
       } 
      } 
     }, 
     "1": { 
      "text": "Net Positive", 
      "banners": { 
       "2": { 
        "text": "Ontario", 
        "val": "51.9106" 
       }, 
       "3": { 
        "text": "Quebec", 
        "val": "50.7760" 
       }, 
       "1": { 
        "text": "Total Respondents", 
        "val": "47.9157" 
       } 
      } 
     } 
    } 
}, 
"2": { 
    "text": "Purchase Intent", 
    "filters": { 
     "2": { 
      "text": "% Postive", 
      "banners": { 
       "2": { 
        "text": "Ontario", 
        "val": "54.5407" 
       }, 
       "3": { 
        "text": "Quebec", 
        "val": "53.9017" 
       }, 
       "1": { 
        "text": "Total Respondents", 
        "val": "49.7267" 
       } 
      } 
     }, 
     "1": { 
      "text": "Net Positive", 
      "banners": { 
       "2": { 
        "text": "Ontario", 
        "val": "51.7294" 
       }, 
       "3": { 
        "text": "Quebec", 
        "val": "52.7261" 
       }, 
       "1": { 
        "text": "Total Respondents", 
        "val": "52.9762" 
       } 
      } 
     } 
    } 
} 
} 

質問の欄(ルートテキスト)、フィルタ、および各バナーは基本的に存在する場合に、私は、テーブルにこのデータを載せていきたいと思います。私は、バナーの数が動的であることを考えると、このテーブルを移入するための最良の方法を把握しようとしている2可能性があり、20

可能性があり、この

よう
<thead> 
    <tr> 
     <th>Question</th> 
     <th>Filter</th> 
     <th>Ontario</th> 
     <th>Quebec</th> 
     <th>Total</th> 
    </tr>... 

をthead要素を作成したいです2つの質問、2つのフィルタ、それぞれ3つのバナーがある場合は、5つの列と4つの行(ヘッダーを除く)で構成される表が必要です。

Row 1 -> Q1 -> filter1 -> banner1 -> banner2 -> banner3 
Row 2 -> Q1 -> filter2 -> banner1 -> banner2 -> banner3 
Row 3 -> Q2 -> filter1 -> banner1 -> banner2 -> banner3 
Row 4 -> Q2 -> filter2 -> banner1 -> banner2 -> banner3 

は、理想的にはソート可能な、あまりにも私が推測するが、任意の列には、私が知っているのに、私はその後jQueuryと機能の種類を追加することができます。

私はそれを周りに私の頭をラップするのに問題があるようにこれを行う方法に関する提案を探しています。

+0

:https://github.com/dorey/jQuery-json2table –

+0

これは読み取り専用で、右?ユーザーはデータを編集できません。 – DOK

+0

データを編集しないでください。 – McB

答えて

1

私は迅速かつ簡単にソート可能、検索可能なテーブルに使用した最高の解決策の一つは、私はSlickGridで素晴らしい結果を得ていhttp://datatables.net/

+0

合意。データ型は、ソースとしてHTMLまたはAJAXのいずれかを受け入れることができます。これにより、柔軟性が向上します。 –

+0

これまでにこれをチェックしました。私の質問は、私のデータを動作するフォーマットに変換することです。私は、この形式でそれを理解するツールがあるか、それをより使いやすくするために何かがあるかどうかわかりません。 – McB

0

です。

いくつかのハイライト:

  • アダプティブ仮想スクロール( 極端な応答性を持つ行の数十万人を扱う)
  • 超高速レンダリング速度
  • 背景には、後のレンダリングのjQuery UIテーマをサポートより豊富なセル
  • 設定可能&カスタマイズ可能
  • フルキーボードナビゲーション
  • 列は&エディタ
  • &力フィット
  • プラグイン可能なセルフォーマッタ
  • 列の自動サイズ変更を非表示/編集するためのサポートを/リオーダー/ショーのサイズを変更し、新しい行を作成します。
  • グループ化、フィルタリング、カスタムアグリゲータなど
  • アドバンスドデタッチ&アンドゥ/リドゥをサポートするマルチフィールドエディタ。
  • 複数のビューが同じデータを編集できる場合に、同時編集を管理するための「GlobalEditorLock」。

そして、それらはlink to SO questionsです。探検する価値

関連する問題