Layui transfer

layui-穿梭框

基本功能源代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>穿梭框组件</title><link rel="stylesheet" href="layui/css/layui.css">
</head>
<body><div id="test1"></div><div id="test2"></div><button type="button" class="layui-btn"id="a">重载</button><button type="button" class="layui-btn"id="b">获取</button><script src="layui/layui.js"></script><script>layui.use(['layer','transfer'],function(){$=layui.$;$('#b').click(function(){var getData = transfer.getData('demol1'); layer.msg(JSON.stringify(getData));})$('#a').click(function(){transfer.reload('demol1', {title: ['新列表1', '新列表2'],elem: '#test1' ,data:[{"id":"1","name":"李白1"},{"id":"2","name":"杜甫1"},{"id":"3","name":"贤心1"}]
});})var transfer=layui.transfer;transfer.render({elem:'#test1'
//      ,data:[
//      {"value":"1","title":"李白","disbled":"","checked":""},
//      {"value":"2","title":"杜甫","disbled":"","checked":""},
//      {"value":"3","title":"贤心","disbled":"","checked":""}
//      ],title:['浪漫派','现实派'],data:[{"id":"1","name":"李白1"},{"id":"2","name":"杜甫1"},{"id":"3","name":"贤心1"}],parseData: function(res){return{"value":res.id,"title":res.name,"disbled":res.disbled,"checked":res.checked}},"value":['2','3'],id:'demol1',"showSearch":true,"width":300,"height":300,text:{none:'呀唏勒',searchNone:'what are you 弄啥嘞？'},onchange:function(data,index){console.log(data);console.log(index);}});transfer.render({elem: '#test2'  //绑定元素,data: [{"value": "1", "title": "李白", "disabled": "", "checked": ""},{"value": "2", "title": "杜甫", "disabled": "", "checked": ""},{"value": "3", "title": "贤心", "disabled": "", "checked": ""}],id: 'demol2' //定义索引});transfer.set(options);});</script>
</body>
</html>

基础功能

title:['','',''.......]穿梭框上方标题
data:[{'':'','':''....},{'':'','':''....},{'':'','':''....}...]数据源，用来存数据
parseData–用于对数据源进行格式解析

transfer.render({elem: '#text1',data: [{"id": "1", "name": "李白"},{"id": "2", "name": "杜甫"},{"id": "3", "name": "贤心"}],parseData: function(res){return {"value": res.id //数据值,"title": res.name //数据标题,"disabled": res.disabled  //是否禁用,"checked": res.checked //是否选中}}
});

"value":['','',''.....]初始选中的数据（右侧列表）
id:''设定实例唯一索引，用于基础方法传参使用。
"showSearch":trun/flase是否开启搜索
"width":定义左右穿梭框宽度，默认200
"height":定义左右穿梭框高度，默认340
text–自定义文本，如空数据时的异常提示等。

text: {none: '无数据' //没有数据时的文案,searchNone: '无匹配数据' //搜索无匹配数据时的文案
}

onchange–左右数据穿梭时的回调

transfer.render({elem: '#text',data: [] //数据源,onchange: function(data, index){console.log(data); //得到当前被穿梭的数据console.log(index); //如果数据来自左边，index 为 0，否则为 1}
});

获取右侧数据

$=layui.$;$('#b').click(function(){var getData = transfer.getData('demol1'); layer.msg(JSON.stringify(getData));//强转为json`})

重载一个已经创建的组件实例，被覆盖新的基础属性

$=layui.$;$('#a').click(function(){transfer.reload('demol1', {title: ['新列表1', '新列表2'],elem: '#test1' ,data:[{"id":"1","name":"李白1"},{"id":"2","name":"杜甫1"},{"id":"3","name":"贤心1"}]});})

Layui transfer相关推荐

ThinkPHP5 集成使用 Layui 穿梭框（transfer）控件
背景最近在做后台业务处理时,接触到了 Layui 中的一个穿梭框 transfer 控件的使用: 个人觉得效果还是挺满意的: 但是毕竟是在 ThinkPHP5 框架下进行的集成,不能不适合部分同行理 ...
Layui组件: transfer穿梭框
定义穿梭框容器 <div id="transferDiv" style="width: 600px;height: 400px;"></div ...
LayUI前框框架普及版
LayUI 一.课程目标 1. [了解]LayUI框架 2. [理解]LayUI基础使用 3. [掌握]LayUI页面元素 4. [掌握]LayUI内置模块二.LayUI基本使用 2.1 概念 la ...
Layui 设置多个穿梭框，并增加上移下移置顶置底功能
Layui 设置多个穿梭框,并增加上移下移置顶置底功能介绍针对layui穿梭框进行了一些修改,增加上移下移置顶置底功能,设置了右侧框的排序功能,按序取值,按序加载的功能. 基于layui 2.5. ...
前端ui框架layUI
layUI layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. https://www.layui.co ...
layui穿梭框和layui表格数据交互
<style>/*树形菜单--分割线内文字*/.diseasea{position: relative;left:180px; /*右*/color: #005cbf}/*表单信息--分割 ...
layUI穿梭框获取穿梭值（整理）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>la ...
使用EasyExcel实现Excel的导入导出
文章目录前言一.EasyExcel是什么? 二.使用步骤 1.导入依赖 2.编写文件上传配置 3.配置表头对应实体类 4.监听器编写 5.控制层 6.前端代码总结前言在真实的开发者场景中,经 ...
Wtm携手LayUI -- .netcore 开源生态我们是认真的！
经过WTM团队和LayUI团队多次深入协商,双方于2019年7月29日在北京中国国际展览中心正式达成战略合作意向,双方签署了战略合作框架协议,LayUI团队承诺使用WTM框架的任何项目都可以免费使用其 ...

Layui transfer

layui-穿梭框

Layui transfer相关推荐

最新文章

热门文章