当前位置：文江博客话题详情

如何使用 ruby on Rails 加载 slickgrid

发布于 2024-10-17 04:10:35 字数 239 浏览 2 评论 0原文

我想使用 slickgrid 在 Rails 应用程序上有一个网格。

我认为我最初的问题是没有关于在哪里或如何使用 sql 数据库中的数据加载网格的最佳实践。

在 *.html.erb 文件中，我是否使用 javascript 并嵌入 ruby 代码（这是否可能）？

有没有人使用 slickgrid 或类似的东西以及 Ruby on Rails 应用程序？

任何简单的编码示例都将受到高度赞赏！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖公主 2024-10-24 04:10:35

我使用这篇文章动态生成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 中。但是，目前我确实遇到了挂起问题列选择器（我希望你不需要它）。

I used this post to generate a JavaScript file dynamically. It looks like:

var columns = ...
var options = ...

$(function() {
  var data = [];
  data[0] = {...};
  data[1] = {...};
  data[2] = {...};
  ...
  var grid = new Slick.Grid($("#my_grid"), data, columns, options);
});

I was be able to load data from database into the SlickGrid. However, currently I do experience a hang problem with the columnpicker (I hope you don't need it).

回复收藏 0 原文

梦回梦里 2024-10-24 04:10:35

有几种方法可以将数据输入 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/ 访问此

内容我们有办法获取数据，我们可以使用 JavaScript 在浏览器端提取数据。我的示例将使用 jQuery，但任何 JavaScript 框架都将有一种简单的方法来进行 AJAX 调用。

请注意，SlickGrid 需要一个地方来放置您的数据。因此，我假设您的 HTML 中有这样一行：

# 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/

There are a couple of ways to get the data into SlickGrid. The easiest is probably an AJAX call. If the data is static you could embed it in the page, but that's probably less useful and more difficult than just doing it with AJAX.

The first thing you'll need is a route you can access that will return your data to the browser, preferably in JSON format so it's easy to handle on the client side.

Assuming the data you want to return is just a simple collection we'll use the example of a Users list.

class UsersController < ApplicationController
  def index
    @users = User.all

    respond_to { |format|
      format.json { render :json => @users }
    }

  end
end

We'll assume you can get to this at the URL http://example.com/users/

Now that we have a way to get the data we can pull the data on the browser side using JavaScript. My example is going to use jQuery, but any JavaScript framework is going to have an easy way to make an AJAX call.

Note that SlickGrid needs a place to put your data. So I'll assume you have a line like this in your 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();
  });

});

You can get more examples of how to use SlickGrid from the Github repository:
https://github.com/mleibman/SlickGrid/wiki/_pages

For more on how to do AJAX calls with jQuery here's the docs for the more general jQuery.ajax() function:
http://api.jquery.com/jQuery.ajax/

And the getJSON function that I used specifically:
http://api.jquery.com/jQuery.getJSON/

回复收藏 0 原文