Item 表单页面的 Select2 相关业务逻辑

Select2 插件官网:https://select2.github.io/

Select2 初始化说明:
代码在 public/javascripts/subchannel_items.js 中的 $("#subchannel_item_showable_id").select2 行。

select2 方法中的参数说明:
theme:指定 CSS 主题,Bootstrap 主题 Github 地址:https://github.com/select2/select2-bootstrap-theme
escapeMarkup:用来转义下拉列表中 HTML 代码的函数。这里重写,表示不转义。
language:设置提示文字。这里重写了搜索无结果(noResult)时的提示文字为一个链接,用来添加内容使用。
tempateResult:下拉列表中每一相的渲染模板,当是视频时,显示 video_id 和 show_id
ajax:发送一个 GET Ajax 请求,从数据库获取下拉列表内容
url:通过不同的 showable_type 确定
data:请求后端时传递的参数。
structure:后端返回 json 的格式要求
page:分页页数
q[xxxxxxxxxx]:ransack 使用的搜索参数
transport:select2 中 Ajax 请求处理逻辑,这里需要处理 Ajax 响应的 Header 中的 ‘X-Total-Count’ 和 ‘X-Per-Page’        用来后续进行分页逻辑处理
processResult:对 Ajax 中请求返回的 data,以及查询请求参数 params 进行处理,返回生成下拉类表需要的数据

Select2 的下拉列表实际就是请求了对应资源的 index action。如 VideosController 中的 index action,新创建了 index.json.jbuilder 和 _video.json.jbuilder view。其中 _video.json.jbuilder 中通过 params[:structure] 来确定返回的 json 格式。index action 使用 api_paginator 方法来设置分页相关的 Header。

当搜索的内容不存在,点击“添加一个”时的逻辑:
代码在 public/javascripts/subchannel_items.js 中的  $(document).on('click', '#add-subchannel-item-showable' 行。

当搜索的内容存在,选择时从媒资接口更新相关的明星或视频信息
代码在 public/javascripts/subchannel_items.js 中的  $("#subchannel_item_showable_id").on('select2:select' 行。
原文地址:https://www.cnblogs.com/iwangzheng/p/5430075.html