1.install
gem 'wice_grid', '~> 3.6'
gem 'font-awesome-sass', '~> 4.3' #这个是字体标准库
2.执行以下命令，会生成文件：
config/initializers/wice_grid_config.rb
config/locales/wice_grid.yml
rails g wice_grid:install
- 在application.js文件添加 //= require wice_grid（前提是导入了jquery）
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require wice_grid
//= require_tree .
在 application.scss 添加：
@import "wice_grid";
@import "font-awesome-sprockets";
@import "font-awesome";
这里提一下，字体库相关 WiceGrid uses icons from Font Awesome
3.相关使用
Controller：
@tasks_grid = initialize_grid(GradeSchool)
@tasks_grid = initialize_grid(GradeSchool.where(grade: 1))
views:
<%= grid(@grade_schools) do |g|
g.column name: 'ID' do |task|
task.name
end
g.column name: 'Title' do |task|
task.grade_text
end
g.column name: 'Description' do |task|
task.enrolled_text
end
g.column do |task|
link_to('Edit', edit_grade_school_path(task))
end
end -%>
下面是简单的测试截图:
image.png
tips: g.column 相关参数属性：
attribute 对应数据库表相关字段
ordering：true/false 排序
filter: true/false 过滤
......
grid 相关参数属性：
#the filter is shown when the current table is the result of filtering
when_filtered : always/no
# 排序
order: 'tasks.title', order_direction: 'desc'
initialize_grid 相关参数属性
initialize_grid(GradeSchool, per_page: 40)
initialize_grid(GradeSchool,conditions: ["active =?", 1],include:[])
详细可自己实践测试
githab相关链接：https://github.com/leikind/wice_grid/
demo 链接: http://wicegrid.herokuapp.com/basics3
