rails simple_form wice_gird

繼續使用上一個項目

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.項目源碼將在以後得文章中給出。


發佈了37 篇原創文章 · 獲贊 7 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章