zoukankan      html  css  js  c++  java
  • 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' 行。
  • 相关阅读:
    Agile software architecture design document style..( sketches and no UMLs)
    spring mvc 使用Optional
    API reference for many languages..
    Java 8: Lambdas和新的集合Stream API
    Java 8 Stream API Example Tutorial
    小团队开发管理工具:gitlab+redmine+testlink+jenkins
    达到一定高度,回到头部的代码
    一款非常简单的android音乐播放器源码分享给大家
    高仿精仿开心网应用android源码
    很不错的安卓FadingActionBar控件源码
  • 原文地址:https://www.cnblogs.com/iwangzheng/p/5430075.html
Copyright © 2011-2022 走看看