SlickGrid にデータを取得するには、いくつかの方法があります。最も簡単なのは、おそらく AJAX 呼び出しです。データが静的な場合はページに埋め込むことができますが、それはおそらく AJAX で行うよりも有用性が低く、より困難です。
最初に必要なのは、クライアント側で処理しやすいように、できれば JSON 形式でデータをブラウザーに返すアクセス可能なルートです。
返したいデータが単純なコレクションであると仮定して、Users リストの例を使用します。
class UsersController < ApplicationController
def index
@users = User.all
respond_to { |format|
format.json { render :json => @users }
}
end
end
URL http://example.com/users/でこれにアクセスできると仮定します。
データを取得する方法ができたので、JavaScript を使用してブラウザー側でデータを取得できます。私の例では jQuery を使用しますが、どの JavaScript フレームワークにも AJAX 呼び出しを行う簡単な方法があります。
SlickGrid にはデータを置く場所が必要であることに注意してください。したがって、HTML に次のような行があると仮定します。<div id="slickGrid"></div>
# We need to wait for the DOM to be loaded so we wrap our AJAX call in a
# jQuery call that's the equivalent of document.ready()
jQuery(function() {
# getJSON is a jQuery convenience function for doing an AJAX call
# that fetches some JSON data.
jQuery.getJSON('http://example.com/users', function(data) {
grid = new Slick.Grid("#slickGrid", data, columns, options);
$("#slickGrid").show();
});
});
Github リポジトリから SlickGrid の使用例をさらに取得できます:
https://github.com/mleibman/SlickGrid/wiki/_pages
jQuery で AJAX 呼び出しを行う方法の詳細については、より一般的な jQuery.ajax() 関数のドキュメントを参照してください:
http://api.jquery.com/jQuery.ajax/
具体的に使用した getJSON 関数:
http://api.jquery.com/jQuery.getJSON/