jqGrid でカスタムフォーマットを使用してみた。(追記)

まず初めに、この記事で書いている内容を実行してもまともに動きません。
取りあえずまともに動かしたい人は以下の記事を参考にしてみてください。morio.hateblo.jp

JSでExcelのような描画云々するのに便利なものはないか、、、と調べているとあるじゃないですか！

その名も「jqGrid」！
~~今更感のあるライブラリ~~

さてやりたいことは、以下

・データはajaxで取得
・ページング
・フィルタリング
・ソート
・フォーマッターの使用
・ボタンを押した際のデータのリロード ← イマココ

jqGridでもAjaxで取得やら云々かんぬん出来るみたいだけど、
今回はAjaxでデータを取得して正常に取得できた場合は、
通信した後に、jqGridで描画という感じにしてみた。

あと、日本語だと初期表示で枠はみ出したりと残念な感じになるので、少しフォントサイズは修正済み

[
{"test_id":"10","test_name":"テスト名1"},
{"test_id":"11","test_name":"テスト名2"},
{"test_id":"12","test_name":"テスト名3"},
{"test_id":"13","test_name":"テスト名4"},
{"test_id":"14","test_name":"テスト名5"},
{"test_id":"15","test_name":"テスト名6"},
{"test_id":"16","test_name":"テスト名7"},
{"test_id":"17","test_name":"テスト名8"},
{"test_id":"18","test_name":"テスト名9"},
{"test_id":"19","test_name":"テスト名10"},
{"test_id":"20","test_name":"テスト名11"},
{"test_id":"21","test_name":"テスト名12"},
{"test_id":"22","test_name":"テスト名13"},
{"test_id":"23","test_name":"テスト名14"}
]

test.html

<html>
  <head>
    <link type="text/css" media="screen" href="/jqgrid/css/jquery-ui.min.css" rel="stylesheet" />
    <link type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" rel="stylesheet" />
    <script type="text/javascript" src="/jqgrid/js/jquery-1.11.0.min.js" ></script>
    <script type="text/javascript" src="/jqgrid/js/jquery.jqGrid.min.js" ></script>
    <script type="text/javascript" src="/jqgrid/js/i18n/grid.locale-ja.js" ></script>
    <script type="text/javascript">
    $(function(){
      $("#test").click(function(){
        var text=$("#text").val();;
        console.log(text);
        $.ajax({
          type: 'GET',
          scriptCharset: 'utf-8',
          url: "../test.json?id=" + text,
          dataType:'json',
          success: function(res){
            var resultData = res;
            console.log(resultData);
            $("#list").jqGrid({
                data: resultData,
                datatype: "local",
                colNames:['ID', '名前'],
                colModel:[
                    {name:'test_id'},
                    {name:'test_name', formatter:linkFormatter},
                ],
                multiselect: false,
                pager : 'pager', // ページング
                rowNum : 10,
                height: 100,
                width: 500,
                caption: 'テスト表示'
            });
            // リロード処理(いかんせんこれでよいのか、、、)
            $("#list").jqGrid().setGridParam({
                data: resultData,
                datatype: "local",
                colNames:['ID', '名前'],
                colModel:[
                    {name:'test_id'},
                    {name:'test_name', formatter:linkFormatter},
                ],
                multiselect: false,
                pager : 'pager', // ページング
                rowNum : 10,
                height: 100,
                width: 500,
                caption: 'テスト表示'
            }).trigger("reloadGrid");

            // フィルタリング
            $("#list").filterToolbar({
              defaultSearch:'cn'
            });
          },
          error:function(){
            console.log('取得に失敗しました。');
          }
        });
      });
    });

    // リンクを作成する処理
    function linkFormatter(cellvalue, options, rowObject){
      return '<a href="test/' + rowObject.test_id + '">' + cellvalue + '</a>';
    }
    </script>

    <style>
      .ui-jqgrid-sortable{
          font-size:12px;
      }
      #input_pager{
          font-size:12px;
      }
      #list{
          font-size:12px;
      }
    </style>
</head>
<body>
    <input type="text" id="text" />
    <input type="button" id="test" />

  <table id="list"></table>
  <div id="pager" class="pager"></div>
</body>
</html>