一度生成したHandsontableを後からajaxを使って更新させてみる＠自分確認用

9592 ワード
Handsontable JavaScript JavaScript テキストリンク

Handsontableというエクセルに似た機能使えるJSのライブラリがあったので、ちょっと使ってみる。

グリッド系のライブラリの中ではすごく優秀そうな印象。

サンプルソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Handsontable</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/assets/js/handsontable.full.min.js"></script>
<script src="/assets/js/script.js"></script>

<link rel="stylesheet" href="/assets/css/handsontable.full.min.css" />
</head>
<body>


<div id="grid">
</div>

</body>
</html>


$(function(){

    var grid = document.getElementById('grid');
    var data = [];
    for (var i=0; i<20; i++) {
        var row = [];
        for (var j=0; j<20; j++) {
            row.push('読込中');
        }
        data.push(row);
    }

    var table = new Handsontable(grid, {
        data: data,
        colHeaders: true,
        // colHeaders: function(index) {
        //     return ['列A','列B','列C','列D'][index];
        // },
        columnSorting: true,
        sortIndicator: true,
        comments: true,
        cell: [
            {col: 1, row: 1, comment: 'テストコメント2'}
        ],
        fixedColumnsLeft: 2,
        fixedRowsTop: 2
    });

    $.ajax({
        url: 'sample.php',
        type:'get',
        dataType: 'json',
        timeout:1000,
        success: function(data) {
            table.setDataAtCell(1, 1, data.num);
        },
        error: function(data) {
            alert(data);
        }
    });


    /*
    * JSONデータ（リスト）をパースする関数です。
    */
    function jsonParser(data) {
        var message = "";
        var count = 0;
        $(data.error).each( function() {
            message = message + data.error[count].code;
            message = message + ' ： ';
            message = message + data.error[count].message;
            message = message + '<br/>';
            count++;
        });
        return message;
    }

});

まとめ

とりあえず値は適当ですが、後からセルの書き換えに成功。