016-穿梭框

layui Transfer组件详解与使用示例

最新推荐文章于 2025-09-24 11:55:34 发布

原创

最新推荐文章于 2025-09-24 11:55:34 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了layui的Transfer组件，包括其基本参数、数据源格式解析回调函数`parseData`、左右穿梭回调函数`onchange`、获取右侧数据的方法、实例重载以及全局默认参数设置。通过示例代码展示了如何渲染、配置和操作Transfer组件，以实现数据筛选和交互功能。

1. transfer组件可以进行数据的交互筛选。模块加载名称: transfer。

2. 基础参数

2.1. 目前transfer组件提供以下基础参数, 可根据需要进行相应的设置:

3. 数据源格式解析的回调函数 - parseData

3.1. 用于将任意数据格式解析成transfer组件规定的数据格式, 以下是合法的数据格式如下:

[
	{"value": "1", "title": "李白", "disabled": "", "checked": ""}
	,{"value": "2", "title": "杜甫", "disabled": "", "checked": "true"}
	,{"value": "3", "title": "李清照", "disabled": true, "checked": ""}
	,{"value": "4", "title": "李冶", "disabled": "", "checked": ""}
	,{"value": "5", "title": "薛涛", "disabled": "", "checked": ""}
	,{"value": "6", "title": "刘采春", "disabled": "", "checked": ""}
]

3.2. 然而很多时候你返回的数据格式可能并不符合规范, 那么您需要将其解析成transfer组件所规定的数据格式:

<script type="text/javascript">
	layui.use(['transfer'], function() {
		var transfer = layui.transfer;

		// 渲染
	    transfer.render({
	    	elem: '#test1'  // 指向容器选择器
	    	,title: ['诗人', '女诗人'] // 穿梭框上方标题