繼續使用上一個項目
1.新建model student teacher ctrl+alt+g -> scaffold
class CreateStudents < ActiveRecord::Migration
def change
create_table :students do |t|
t.string :name
t.integer :age
t.references :teacher, index: true
t.text :remark
t.timestamps
end
end
end
class CreateTeachers < ActiveRecord::Migration
def change
create_table :teachers do |t|
t.string :name
t.integer :age
t.text :remark
t.timestamps
end
end
end
2.安裝simple_form wice_grid
#forms
gem 'simple_form', :git => 'git://github.com/plataformatec/simple_form.git'
#grid
gem 'wice_grid'
3.執行bundle install
4.生成simple_form wice_grid 配置文件
rails generate simple_form:install
rails g wice_grid:install
5.在application.js和application.css引入樣式
//= require wice_grid
*= require wice_grid
6.simple_form wice_grid 的i18n,新建文件config/locales/zh-CN.activerecord.yml
zh-CN:
activerecord:
models:
person: 人員
department: 部門
student: 學生
teacher: 老師
attributes:
errors:
models:
person:
attributes:
email:
blank: 請填寫電子郵箱
password:
blank: 請填寫密碼
too_short: 密碼長度要多於8位
reset_password_token:
invalid: 這個鏈接已經失效的,請用最新的鏈接
simple_form:
labels:
defaults:
remark: 備註
created_at: 創建時間
updated_at: 更新時間
attachment: 附件
cu_attachment: 已有附件
peoson:
name: 姓名
age: 年齡
sex: 性別
deaprtment: 所屬部門
phone: 電話
department:
name: 部門名稱
parent: 上級部門
remark: 備註
student:
name: 姓名
age: 年齡
teacher: 所屬教師
remark: 備註
teacher:
name: 姓名
age: 年齡
remark: 備註
log:
handler: 姓名
handle_type: 操作類型
content: 記錄
remark: 備註
date:
order:
- :year
- :month
- :day
wice_grid:
show_filter_tooltip: 顯示過濾
hide_filter_tooltip: 隱藏過濾
csv_export_tooltip: 輸出CSV檔
filter_tooltip: 過濾
reset_filter_tooltip: 清除過濾
boolean_filter_true_label: "是"
boolean_filter_false_label: "否"
previous_label: «
next_label: »
# Title of the icon clicking on which will show the calendar to set the FROM date.
date_selector_tooltip_from: 從
# Title of the icon clicking on which will show the calendar to set the TO date.
date_selector_tooltip_to: 至
# The title of the checkox to turn on negation
negation_checkbox_title: 排除
# link to switch to show all records
show_all_records_label: 顯示全部
# tooltip for the link to switch to show all records
show_all_records_tooltip: 顯示全部記錄
# Warning message shown when the user wants to switch to all-records mode
all_queries_warning: 確定要顯示全部記錄?
# link to paginated view
switch_back_to_paginated_mode_label: 回到分頁顯示
# tooltip for the link to paginated view
switch_back_to_paginated_mode_tooltip: 切換到分頁顯示
# Title of the date string.
date_string_tooltip: 按下以清除
saved_query_panel_title: 查詢存儲
save_query_button_label: 儲存查詢狀態
saved_query_deletion_confirmation: 確定刪除?
saved_query_deletion_link_title: 刪除查詢
saved_query_link_title: 讀取查詢
validates_uniqueness_error: 已存在相同名稱的查詢
validates_presence_error: 請爲此查詢命名
query_deleted_message: 查詢已刪除
query_saved_message: 查詢已儲存
select_all: 全選
deselect_all: 全清
7.使用simple_form顯示form表單,修改views/students/_form.html.erb
<%= simple_form_for(@student, html: {class: 'form-horizontal',id: 'student_form' }) do |f| %>
<%= f.error_notification %>
<div class="row-fluid">
<div class="form-inputs">
<%= f.input :name, required: true, input_html: {required: true, autofocus: true} %>
<%= f.input :age %>
<%= f.association :teacher, collection: @teachers, include_blank: false, required: true %>
<%= f.input :remark, as: :text %>
</div>
</div>
<div class="form-actions">
<%= f.button :submit, class: 'btn btn-primary' %>
</div>
<% end %>
8.修改studnets_controller中方法
class StudentsController < ApplicationController
before_action :set_student, only: [:update, :destroy]
before_action :before_show_edit, only: [:show, :edit]
# GET /students
# GET /students.json
def index
@students = initialize_grid(Student.select("students.*, teachers.name AS teacher_name").joins(:teacher), order: 'id', order_direction: 'asc', per_page: 2)
end
# GET /students/1
# GET /students/1.json
def show
end
# GET /students/new
def new
@student = Student.new
@teachers = Teacher.all
end
# GET /students/1/edit
def edit
@teachers = Teacher.all
end
# POST /students
# POST /students.json
def create
@student = Student.new(student_params)
respond_to do |format|
if @student.save
format.html { redirect_to @student, notice: 'Student was successfully created.' }
format.json { render action: 'show', status: :created, location: @student }
else
format.html { render action: 'new' }
format.json { render json: @student.errors, status: :unprocessable_entity }
end
end
end
# PATCH/PUT /students/1
# PATCH/PUT /students/1.json
def update
respond_to do |format|
if @student.update(student_params)
format.html { redirect_to @student, notice: 'Student was successfully updated.' }
format.json { head :no_content }
else
format.html { render action: 'edit' }
format.json { render json: @student.errors, status: :unprocessable_entity }
end
end
end
# DELETE /students/1
# DELETE /students/1.json
def destroy
@student.destroy
respond_to do |format|
format.html { redirect_to students_url }
format.json { head :no_content }
end
end
def before_show_edit
@student = Student.select("students.*, teachers.name AS teacher_name").joins(:teacher).find(params[:id])
end
private
# Use callbacks to share common setup or constraints between actions.
def set_student
@student = Student.find(params[:id])
end
# Never trust parameters from the scary internet, only allow the white list through.
def student_params
params.require(:student).permit(:name, :age, :teacher_id, :remark)
end
end
9.使用wice_grid展示student列表,修改views/students/index.html.erb
<h1>Listing students</h1>
<div id="students">
<%= grid(@students, show_filters: :when_filtered) do |g|
g.column name: '編號', attribute: 'id', ordering: true, filter: false
g.column name: "#{t 'simple_form.labels.student.name'}", attribute: 'name'
g.column name: "#{t 'simple_form.labels.student.age'}", attribute: 'age'
g.column name: "#{t 'simple_form.labels.student.teacher'}", attribute: 'teacher_id' do |c|
c.teacher_name if c.teacher
end
g.column name: "#{t 'simple_form.labels.student.teacher'}", attribute: 'name', model: Teacher do |c|
c.teacher.name
end
g.column name: "#{t 'simple_form.labels.student.remark'}", attribute: 'remark'
g.column do |c|
grid_operator(:student_path, c.id)
end
end %>
</div>
<br>
<%= link_to 'New Student', new_student_path %>
10.修改helpers/application_helper.rb文件
module ApplicationHelper
#表格的操作列
#path:地址
#id: id
#do_*: 分別控制是否顯示 查看,編輯和刪除
def grid_operator(path, id, do_show = true, do_edit = true, do_delete = true)
show, edit, delete = '', '', ''
show = link_to send(path, id), class: [:btn, 'btn-mini', 'btn-success'], title: "#{t 'common.show'}" do
raw "<i class='icon-search bigger-120'></i>"
end if do_show
edit = link_to send("edit_#{path.to_s}", id), class: [:btn, 'btn-mini', 'btn-info'], title: "#{t 'common.edit'}" do
raw "<i class='icon-edit bigger-120'></i>"
end if do_edit
delete = link_to send(path, id), confirm: '確認刪除?', method: :delete, title: "#{t 'common.delete'}",class: [:btn, 'btn-mini', 'btn-danger'] do
raw "<i class='icon-trash bigger-120'></i>"
end if do_delete
return raw(show+" "+edit+" "+delete)
end
end
11.修改config/application.rb,使用i18
# config.i18n.default_locale = :de
config.i18n.default_locale = 'zh-CN'
12.執行rake命令 db:migrate ,啓動服務器
13.在views/people/index.html.erb中添加student列表的鏈接
<br>
學生列表<%= link_to 'student_list', students_path %>
<br>
教師列表<%= link_to 'teacher_list', teachers_path %>
14.顯示效果
form表單---simple_form
list表單---wice_grid
15.更多信息請查看 simple_form wice_grid
16.項目源碼將在以後得文章中給出。