当前博客：38-快码FOF中文编程layui教学-组件：穿梭框

245 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：请输入个性签名___________

穿梭框适用于权限管理、商品管理、业务细分、客户管理等场景，在业务等方面很常见。

layui内置的穿梭框，使用简单，可以完美胜任使用穿梭框的场景。

简单穿梭框代码：

<区块 id="演示"></区块>
<脚本>
	新建对象 lay_穿梭框({
		[lay_穿梭框.配置.绑定元素]: "#演示", //绑定元素
		[lay_穿梭框.配置.id]: "演示1",
		[lay_穿梭框.配置.数据]: [
			{
				[lay_穿梭框.菜单.id]: "1",
				[lay_穿梭框.菜单.标题]: "李白",
				[lay_穿梭框.菜单.禁用]: "",
				[lay_穿梭框.菜单.选中]: "",
			},
			{
				[lay_穿梭框.菜单.id]: "2",
				[lay_穿梭框.菜单.标题]: "杜甫",
				[lay_穿梭框.菜单.禁用]: "",
				[lay_穿梭框.菜单.选中]: "",
			},
			{
				[lay_穿梭框.菜单.id]: "3",
				[lay_穿梭框.菜单.标题]: "贤心",
				[lay_穿梭框.菜单.禁用]: "",
				[lay_穿梭框.菜单.选中]: "",
			},
		],
		[lay_穿梭框.配置.选中值]: ["1"],
	});
</脚本>

代码效果展示：

完整参数代码示例：

<区块 id="演示2"></区块>
<脚本>
	新建对象 lay_穿梭框({
		[lay_穿梭框.配置.绑定元素]: "#演示2", //绑定元素
		[lay_穿梭框.配置.id]: "演示2",
		[lay_穿梭框.配置.标题]: ["诗人", "古代诗人"],
		[lay_穿梭框.配置.显示搜索]: 真,
		[lay_穿梭框.配置.宽度]: "400px",
		[lay_穿梭框.配置.高度]: "500px",
		[lay_穿梭框.配置.数据]: [
			{
				[lay_穿梭框.菜单.id]: "1",
				[lay_穿梭框.菜单.标题]: "李白",
				[lay_穿梭框.菜单.禁用]: "",
				[lay_穿梭框.菜单.选中]: "",
			},
			{
				[lay_穿梭框.菜单.id]: "2",
				[lay_穿梭框.菜单.标题]: "杜甫",
				[lay_穿梭框.菜单.禁用]: "",
				[lay_穿梭框.菜单.选中]: "",
			},
			{
				[lay_穿梭框.菜单.id]: "3",
				[lay_穿梭框.菜单.标题]: "冰心",
				[lay_穿梭框.菜单.禁用]: 真,
				[lay_穿梭框.菜单.选中]: "",
			},
			{
				[lay_穿梭框.菜单.id]: "4",
				[lay_穿梭框.菜单.标题]: "莫言",
				[lay_穿梭框.菜单.禁用]: 真,
				[lay_穿梭框.菜单.选中]: "",
			},
			{
				[lay_穿梭框.菜单.id]: "5",
				[lay_穿梭框.菜单.标题]: "贤心",
				[lay_穿梭框.菜单.禁用]: "",
				[lay_穿梭框.菜单.选中]: "",
			},
			{
				[lay_穿梭框.菜单.id]: "6",
				[lay_穿梭框.菜单.标题]: "李清照",
				[lay_穿梭框.菜单.禁用]: "",
				[lay_穿梭框.菜单.选中]: 真,
			},
		],
		[lay_穿梭框.配置.选中值]: ["1", "2"],
		[lay_穿梭框.配置.文本]: {
			[lay_穿梭框.文本.无数据]: "暂无数据!",
			[lay_穿梭框.文本.搜索无匹配]: "查无此人!",
		},
		[lay_穿梭框.配置.改变]: 定义函数 (数据, 方向) {
			// 方向 0 是左边,1 是右边
			方向 = ["左边", "右边"][方向];
			lay_弹出层.消息框("来自 <重要文本>" + 方向 + "</重要文本> 的数据：" + JSON类.到可读JSON文本(数据)); //获得被穿梭时的数据
		},
	});
// 获取右侧数据
	局部变量 数据 = lay_穿梭框.获取数据("演示2");
	lay_弹出层.消息框(JSON类.到可读JSON文本(数据));
</脚本>

代码效果示例：