slickgrid를 사용하여 레일 어플리케이션에 그리드를 만들고 싶습니다.slickgrid를로드하기 위해 레일에 루비를 사용하는 방법
내 초기 문제 SQL 데이터베이스에서 데이터가있는 그리드를로드하는 위치 또는 방법에 대한 최선의 방법이 없다고 생각합니다.
* .html.erb 파일에서 javascript와 embed ruby code를 사용합니까?
slickgrid를 사용하거나 레일즈 응용 프로그램에서 루비를 사용하는 사람이 있습니까?
간단한 코딩 예제는 높이 평가됩니다!
나는 this post을 사용하여 JavaScript 파일을 동적으로 생성했습니다. 모양은 다음과 같습니다.
var columns = ...
var options = ...
$(function() {
var data = [];
data[0] = {...};
data[1] = {...};
data[2] = {...};
...
var grid = new Slick.Grid($("#my_grid"), data, columns, options);
});
데이터베이스에서 SlickGrid로 데이터를로드 할 수있었습니다. 그러나, 현재 나는 columnpicker와 함께 hang problem을 경험한다 (나는 당신이 그것을 필요로하지 않기를 바란다).
SlickGrid로 데이터를 가져 오는 데는 몇 가지 방법이 있습니다. 가장 쉬운 방법은 아마도 AJAX 호출 일 것입니다. 데이터가 정적이라면 페이지에 임베드 할 수 있지만 AJAX로 작업하는 것보다 덜 유용하고 어렵습니다.
가장 먼저해야 할 일은 클라이언트 측에서 처리하기 쉽도록 데이터를 브라우저로, 가능한 JSON 형식으로 반환하는 액세스 할 수있는 경로입니다.
반환하려는 데이터가 단순한 컬렉션 일 경우 사용자 목록의 예를 사용합니다.
class UsersController < ApplicationController
def index
@users = User.all
respond_to { |format|
format.json { render :json => @users }
}
end
end
우리는 지금 우리가 자바 스크립트를 사용하여 브라우저 측에서 데이터를 가져 수있는 데이터를 얻을 수있는 방법이 있다는 URL http://example.com/users/
에서이 얻을 수 있습니다 가정합니다. 내 예제에서는 jQuery를 사용하지만 모든 JavaScript 프레임 워크에서는 AJAX 호출을 쉽게 만들 수 있습니다.
SlickGrid에는 데이터를 저장할 위치가 필요합니다. 수행하는 방법에 대한 자세한 내용은 https://github.com/mleibman/SlickGrid/wiki/_pages
: <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을 사용하는 방법에 대한 더 많은 예제를 얻을 수 있습니다 : 그래서 당신은 당신의 HTML에서이 같은 라인을 가지고 가정합니다 jQuery를가 여기에 AJAX 호출 더 일반적인 jQuery.ajax에 대한 문서() 함수 : http://api.jquery.com/jQuery.ajax/
내가 특별히 사용해서 getJSON 기능 : http://api.jquery.com/jQuery.getJSON/
브라우저에서 데이터를 Json 형식으로로드 할 수 있습니다. 그래서, 나는 그것을 "user_data"배열로 파싱하는데 사용했다. 예. localhost : 3000/users.json
var user_data = < % = @ users.to_json.html_safe %>;