flexgridでJSONを読んで動的なかっこいい動的な表を作る

まず基本バージョン、とりあえずだせるように

(0)JSONを作る
JSONは""でじゃないとだめ。
JSONの説明: http://hakuhin.jp/js/json.html
grid2.txt を書きをCGIフォルダに保存
を参考に．http://jquery.keicode.com/ext/flexigrid2.php　

{

"page":"1",

"total":"3",

"rows":[

{

"id":"1",

"cell":[ "Column1-1", "Column1-2", "Column1-3", "Column1-4"]

},

{

"id":"2",

"cell":[ "Column2-1", "Column2-2", "Column2-3", "Column2-4"]

},

{

"id":"3",

"cell":[ "Column2-1", "Column2-2", "Column2-3", "Column2-4"]

}

]

}

(1)ＪＳＯＮを出力するcgiをいい加減につくる

#!/bin/sh
echo "Content-type: application/json; charset=utf-8"
echo ""
cd /cgi-bin
cat grid2.txt

（２）表示ファイルをつくる．jquery等のパスは適時直す．

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テーブル+Flexigrid+Ajax</title>

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="javascript" type="text/javascript" src="base/js/jquery-1.11.1.js"></script>

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<link href="base/css/flexigrid.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="base/js/flexigrid.js"></script>

<script type="text/javascript">
$(document).ready(function()
{

$("#test_table").flexigrid({
  url: '/cgi-bin/grid2.sh',
  dataType: 'json',

  colModel: [
    {display:'ID',name:'iid',width:40,sortable:true,align:'left'},
    {display:'タイトル',name:'title',width:250,sortable:true,align:'left'},
    {display:'カテゴリ',name:'category',width:150,sortable:true,align:'left'},
    {display:'更新日',name:'pubdate',width:150,sortable:true,align:'left'}
  ],
  rp: 3,
  width: 500,
  height: 400,
  onError: function(res,status,e) {
          alert('err: ' + e + '\n' + 'status: ' + status + '\n' + res.responseText);
        }
});
});

</script>

</head>

<body>

<table id="test_table" style="display:none"></table>

</body>
</html>

エラーチェックのときに参考
http://d.hatena.ne.jp/ugon105/20100417/1271489472
エラーメッセージの表示のさせ方を参考にエラーメッセージをだす．
>>
onError: function(res,status,e) {
alert('err: ' + e + '\n' + 'status: ' + status + '\n' + res.responseText);
}