你提供的这段代码是一个使用 **
Layui 框架** 编写的 JavaScript 函数，用于渲染一个“穿梭框”（Transfer）组件。我们来逐行详细解释这个函数的含义
和作用。
---
### ✅ 完整函数解析
```javascript
function on
Render(cfg) {
layui.transfer
.render({
elem: '#player-show-transfer',
data: player_device_list,
title: ['未过滤', '已过滤'],
width: 320,
height: 420,
id: 'player_show_transfer',
parseData: function(res) {
return {
"value": res
.id,
"title": res
.name
};
},
value: cfg
.filterPlayers,
showSearch: true
});
layui.form.render();
}
```
---
## 🔍 一、函数定义：`function on
Render(cfg)`
- 这是一个名为 `on
Render` 的函数。
- 它接收一个参数 `cfg`，通常是一个配置对象，包含一些运行时的数据（比如用户选择的值等）。
- 目的是根据传入的配置重新渲染页面上的某个组件。
---
## 🔍 二、`
layui.transfer
.render({
...})` —— 渲染
Layui 穿梭框
[
Layui](https://www
.layui.com/) 是一个前端 UI 框架，`transfer` 是其中的“穿梭框”组件，常用于权限分配、多选数据管理等场景。
`
layui.transfer
.render(options)` 是用来初始化或刷新这个组件的方法。
下面我们逐个分析每个配置项：
---
### 1
. `elem: '#player-show-transfer'`
- **作用**：指定要绑定穿梭框的 HTML 元素。
- `'#player-show-transfer'` 是一个 CSS 选择器，表示 ID 为 `player-show-transfer` 的 DOM 元素。
- 示例 HTML：
```html
<div id="player-show-transfer"></div>
```
---
### 2
. `data: player_device_list`
- **作用**：设置穿梭框左侧的全部可选项数据。
- `player_device_list` 应该是一个数组，形如：
```js
[
{ id: 1, name: "设备A" },
{ id: 2, name: "设备B" },
{ id: 3, name: "玩家X" }
]
```
- 注意：这些原始数据字段是 `id`
和 `name`，但
Layui 默认期望 `value`
和 `title`，所以需要下面的 `parseData` 转换。
---
### 3
. `title: ['未过滤','已过滤']`
- 设置左右两个面板的标题：
- 左边：`未过滤`
- 右边：`已过滤`
- 用户可以通过按钮把左边的项移到右边，实现“过滤”功能。
---
### 4
. `width: 320, height: 420`
- 设置穿梭框的宽高（单位：px）
- 宽度 320px，高度 420px
---
### 5
. `id: 'player_show_transfer'`
- 给这个穿梭框实例起一个唯一标识符。
- 后续可以通过这个 `id` 来获取值或操作它，例如：
```js
var val =
layui.transfer
.getData('player_show_transfer');
```
---
### 6
. `parseData: function(res) {
... }`
- **作用**：将原始数据（如 `id`, `name`）转换成
Layui 所需的标准格式。
- 因为 `player_device_list` 中的字段是 `id`
和 `name`，而
Layui 默认识别 `value`
和 `title`，所以必须映射一下。
```js
parseData: function(res){
return {
"value": res
.id, // 把 res
.id 映射为 value
"title": res
.name // 把 res
.name 映射为 title
};
}
```
✅ 这样
Layui 就能正确显示
和处理数据了。
> 💡 提示：如果
不写 `parseData`，且原始数据
不是 `{value:
..., title:
...}` 格式，就会显示异常或空白。
---
### 7
. `value: cfg
.filterPlayers`
- **作用**：设置右侧“已过滤”区域的默认选中项。
- `cfg
.filterPlayers` 应该是一个数组，包含当前应该出现在右边的 `value` 值，例如：
```js
cfg
.filterPlayers = [1, 3]; // 表示 id 为 1
和 3 的设备已经在右边
```
- 这样页面加载时，这些项会自动被移动到右侧。
---
### 8
. `showSearch: true`
- 在左右两个面板上方显示搜索框，允许用户输入关键词筛选列表中的项目。
---
## 🔍 三、`
layui.form.render();`
```js
layui.form.render();
```
- 通知
Layui 重新渲染所有表单元素（包括
下拉框、
复选框、
单选框等）。
- 虽然这里主要用的是 `transfer`，但有时其他表单控件也可能受影响，调用此方法确保界面更新。
- 特别是在动态插入或修改 DOM 后，必须手动调用 `
form.render()` 才能使样式生效。
---
## ✅ 总结：这个函数整体做了什么？
> **功能描述：**
>
> 根据传入的配置 `cfg`，使用
Layui 框架渲染一个“玩家/设备过滤穿梭框”，让用户可以从“未过滤”列表中选择一些项目，移动到“已过滤”列表中，并支持搜索。
| 功能点 | 实现方式 |
|--------|----------|
| 显示所有可选项 | `data: player_device_list` |
| 显示初始已选项目 | `value: cfg
.filterPlayers` |
| 正确解析数据字段 | `parseData` 映射 `id→value`, `name→title` |
| 支持搜索 | `showSearch: true` |
| 自定义宽高与标题 | `width`, `height`, `title` |
| 更新表单视图 | `
layui.form.render()` |
---
## ✅ 使用场景举例
假设你在做一个视频播放系统，要设置哪些“播放端”显示在首页：
- 左边列出所有播放设备（未过滤）
- 右边是选中的设备（已过滤，将在首页展示）
- 管理员可以拖动或点击按钮进行筛选
- 页面加载时根据 `cfg
.filterPlayers` 恢复上次的选择状态
---
扫一扫
1540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
