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' 行。

Item 表单页面的 Select2 相关业务逻辑的更多相关文章

  1. AnjularJS系列2 —— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  2. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  3. 【AnjularJS系列2 】— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  4. javaWeb中怎么获取提交表单里面的值

    在javaWeb中如何获得html文件中的表单里面的值? <!DOCTYPE html> <html> <head> <meta charset=" ...

  5. 我和小美的撸码日记(3)之一句话搞定MVC表单页数据绑定与提交

    “尼玛哥,你今天有空么?” “今天周日呀,怎么会没空,你这是要约么?麻辣烫凉皮我都吃,在哪儿,我一会儿就到.” “约你妹呀,我昨天都加一天班了,东西到现在还没搞完,你给我快点过来呀,我需要你!” “别 ...

  6. 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交

    另外献上在<线体验Demo地址>希望大家也能从中得到一些启示. 地址:http://121.40.148.178:8080/ . username:guest,password:12345 ...

  7. Dynamics CRM 2015Online Update1 new feature之表单页Tabs切换

    CRM2011的界面相对于CRM4.0进行了比较大的改动,N久没见过4.0的界面了所以忘了表单是什么样子的了,但2011的表单中若含有多个tab的话,是可以通过左侧栏进行切换,话说2013的界面相对2 ...

  8. CURL模拟表单post提交及相关常用参数的使用(包括提交表单同时上传文件)

    转载自:https://blog.csdn.net/freedomwjx/article/details/43278157 (注:在curl前面加上time如time curl xxx,可以在最后显示 ...

  9. 让ie10/11支持非单页面的vue/es6

    为了满足某些客户的要求,最近让前端同学实现了ie 10(windows 7)/11(windows 10)支持多页面的vue/es6,基本参考如下: https://www.cnblogs.com/n ...

随机推荐

  1. JAVA中的NIO(二)

    一.内存文件映射 内存文件映射允许我们创建和修改那些因为太大而不能放入内存中的文件.有了内存文件映射,我们就可以假定整个文件都在内存中,而且可以完全把文件当作数组来访问. package com.dy ...

  2. [c#基础]DataTable的Select方法

    引言 可以说DataTable存放数据的一个离线数据库,将数据一下加载到内存,而DataReader是在线查询,而且只进形式的查询,如果后退一步,就不可能了,DataTable操作非常方便,但也有缺点 ...

  3. “耐撕”团队 2016.04.11 站立会议

    1. 时间 : 19:30--19:50. 共计20分钟. 2. 成员 : Z 郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客: ...

  4. nginx 下 location 配置解释

    当我们在使用负载均衡和反向代理的时候 我们会考到虚拟主机下面有着个配置 现在我们看一下反向代理的location 下面的配置实例: server { listen 80 ;    监听的端口号 ser ...

  5. .net架构设计读书笔记--第三章 第10节 命令职责分离(CQRS)简介(Introducing CQRS)

    一.分离查询命令 Separating commands from queries     早期的面向DDD设计方法的难点是如何设计一个类,这个类要包含域的方方面面.通常来说,任务软件系统方法调用可以 ...

  6. hdu1535 SPFA

    2边SPFA 然后求和 #include<stdio.h> #include<string.h> #include<queue> #define INF 10000 ...

  7. Java基础-String、StringBuffer、StringBuilder

    看下面这段代码: public class Main { public static void main(String[] args) { String string = ""; ...

  8. Throwable和Exception的区别

    Java语言要求java程序中(无论是谁写的代码)所有抛出(throw)的异常都必须是从Throwable派生而来.当然,实际的Java编程中,由于JDK平台已经为我们设计好了非常丰富和完整的异常对象 ...

  9. Cocos2d-X3.0 刨根问底(六)----- 调度器Scheduler类源码分析

    上一章,我们分析Node类的源码,在Node类里面耦合了一个 Scheduler 类的对象,这章我们就来剖析Cocos2d-x的调度器 Scheduler 类的源码,从源码中去了解它的实现与应用方法. ...

  10. 【BZOJ】【1009】 【HNOI2008】GT考试

    DP/KMP/矩阵乘法 好神的题啊……跪了跪了 $n\leq 10^9$是什么鬼……我们还是先不要考虑这个鬼畜的玩意了>_> 用类似数位DP的思路,我们可以想到一个DP方程:$f[i][j ...