表格控件 wice_grid

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

3. 在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