Day 28 -- Rails 实作 Ransack 简易搜寻及排序功能

承接上一篇 实作 Rails-i18n语言选项在Bootstrap4 导览列,我们同样可以
在导览列navbar里找到以下程序码:

https://ithelp.ithome.com.tw/upload/images/20201013/20120868FN1W0qmQDo.png

确认导览列安装没有问题後,下一步就是把 ransack gem 给它装上去罗!

简易设定

在你的controller里设定如下:
https://ithelp.ithome.com.tw/upload/images/20201013/20120868tVLDkvUpNe.png

接着设定 view ( navbar.html.erb )

https://ithelp.ithome.com.tw/upload/images/20201013/20120868KgCZo0crIY.png

输入 ‘买菜’ 测试一下是否正常运行

https://ithelp.ithome.com.tw/upload/images/20201013/201208685nmhof3NUK.png

https://ithelp.ithome.com.tw/upload/images/20201013/20120868SeXQbA3BJW.png

测试搜寻功能没有问题,但是如果点选新增或编辑任务时会喷错误讯息
https://ithelp.ithome.com.tw/upload/images/20201013/20120868xMe2iAKdjI.png

错误讯息表示:没有提供Ransack::Search 实体给 search_form_for
既然找不到Ransack::Search 实体,那就做出来给它吧!

解法不只一种,这里的做法是在 application_controller.rb 里设定Ransack::Search 的实体,以及要rails在run controller下的action前,要先跑指定的method
https://ithelp.ithome.com.tw/upload/images/20201013/20120868rVehNxJCoo.png

除了搜寻功能外,排序也是很容易做到的,在 index.html.erb 里,照着 Ransack 提供的

sort_link 方法<%= sort_link(@q, :name) %>

依需要排序的项目做设定就可以了
https://ithelp.ithome.com.tw/upload/images/20201013/201208686UPlxhlRua.png

画面会是这样,可以依 ‘任务ID’ 及 ‘任务结束时间’ 来做排序

https://ithelp.ithome.com.tw/upload/images/20201013/20120868oZt6hnMkbQ.png
差不多这样就完成了,最後要注意的是如果有用simple_form的话,记得要config/application.rb 档内,做以下设定:(require ’rails/all’ 要放在最下面)

require File.expand_path('../boot', __FILE__)
ENV['RANSACK_FORM_BUILDER'] = '::SimpleForm::FormBuilder'
require 'rails/all'

参考资料:

使用 Ransack 帮你完成後端搜寻与 Sorting
activerecord-hackery/ransack


<<:  [DAY29]番外篇-使用fetch传送表单资料

>>:  语音服务-文字转换语音范例(text-to-speech)

安全控制(security controls)

双重控制、职责分离、权限分离和 M of N Control 是用於防止欺诈和错误的安全控制。但是,...

不只懂 Vue 语法:什麽是 Virtual DOM?Vue 如何利用 Virtual DOM?

问题回答 当我们更新资料和渲染画面时会频繁地新增和删除 DOM 元素,造成效能问题。因此,不论是 V...

8. 你的薪水是怎麽决定的?

前言 这篇是蛮有趣的演讲,因为讲的是hiring manager怎麽决定你的薪水,所以我猜大部分人...

Day1 30天学会React,其实一点都不难

Hi! 时光飞逝,又过了一年,我又来自虐了,距离上次绞尽脑汁生出铁人赛文章也有一年多的时间了 废话,...

Day02:Send Event(发送事件)

全文同步於个人 Docusaurus Blog 在上一章中,已将 client 端和 server ...