SelectPage 组件详细参数分析

HTML 结构解析

<input
    id="c-archives_ids_text"
    data-rule=""
    data-source="cms/archives/index"
    data-multiple="true"
    data-field="title"
    class="form-control selectpage sp_input sp_combo_input"
    name="row[archives_ids]_text"
    type="text"
    value="115,116,117,141"
    autocomplete="off"
    novalidate="novalidate"
    style="width: 0.75em;">​

1. 基础属性

• id="c-archives_ids_text" : 唯一标识符，用于 JavaScript 操作和样式定位
• type="text" : 基础的文本输入框类型
• name="row[archives_ids]_text" : 表单提交时的字段名，注意这是文本显示字段

2. 数据属性（data-*）

• data-source="cms/archives/index" : 数据源 URL，指定从哪里获取选项数据
• data-multiple="true" : 允许多选功能
• data-field="title" : 指定显示字段为 "title"
• data-rule="" : 验证规则（当前为空）

3. 类名

• form-control : Bootstrap 的表单控件样式
• selectpage : 标识这是一个 SelectPage 组件
• sp_input : SelectPage 输入框样式
• sp_combo_input : SelectPage 组合输入框样式

4. 其他属性

• value="115,116,117,141" : 当前选中的值，多个 ID 用逗号分隔
• autocomplete="off" : 禁用浏览器自动完成功能
• novalidate="novalidate" : 禁用 HTML5 默认验证
• style="width: 0.75em;" : 自定义宽度样式
  

• 功能实现根据配置，这个 SelectPage 实例具有以下功能特点：

5. 多选功能

5. data-multiple="true" // 启用多选功能

• 允许用户选择多个文章（archives）
• 选中的值以逗号分隔存储
• 当前已选中四个项目：115、116、117、141

6. 数据源配置

data-source="cms/archives/index" // 指定数据源URL

• 从 cms/archives/index 接口获取文章列表
• 返回的数据会被 SelectPage 组件处理和显示

7. 显示字段配置

​data-field="title" // 指定显示字段

• 使用文章的 title 字段作为显示文本
• 实际值可能是文章的 ID
  

• SelectPage 初始化过程

• 当页面加载时，SelectPage 组件会通过以下步骤初始化：

1. 基础配置获取

1. var config = {
       table: 
   $element.data("table") || "fa_cms_archives",
       key: $
   element.data("key-field") || "id",
       value: 
   $element.data("show-field") || "title",
       source: $
   element.data("source")
   };

1. SelectPage 插件初始化

1. $element.selectPage({
       data: config.source,          // 数据源URL
       keyField: config.key,         // 键字段 (id)
       showField: config.value,      // 显示字段 (title)
       searchField: config.value,    // 搜索字段
       pagination: true,             // 启用分页
       multiple: true,              // 启用多选
       // ... 其他配置
   });

1. 数据请求参数

1. params: function () {
       return {
           source_table: config.table,
           keyField: config.key,
           showField: config.value,
           search_field: config.value,
           orderBy: config.key
       };
   }

1. 数据交互流程

1. 初始加载

• 组件初始化时，会根据 value 属性中的 ID 列表（115,116,117,141）
• 向服务器发送请求获取这些 ID 对应的标题文本

2. 搜索过程

• 用户输入搜索文本时，组件向 cms/archives/index 发送请求
• 服务器返回匹配的文章列表
• 组件将结果显示在下拉列表中

3. 选择过程

• 用户从下拉列表中选择项目
• 选中的值会更新到隐藏的值字段
• 显示字段会显示选中项目的标题