首页layui.transfer 如何定义初始状态下两边都有数据两边都有数据，完整的html示例

layui.transfer 如何定义初始状态下两边都有数据两边都有数据，完整的html示例

时间: 2024-03-19 09:46:24 浏览: 116

这是一个完整的 HTML 示例，展示了如何在 layui.transfer 中定义初始状态下左右两边都有数据： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui.transfer示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css"> </head> <body> <div class="layui-container" style="margin-top: 30px;"> <div class="layui-row"> <div class="layui-col-md6"> <fieldset class="layui-elem-field layui-field-title"> <legend>左边列表</legend> </fieldset> <div id="demo1"></div> </div> <div class="layui-col-md6"> <fieldset class="layui-elem-field layui-field-title"> <legend>右边列表</legend> </fieldset> <div id="demo2"></div> </div> </div> </div> <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script> <script> layui.use(['transfer', 'util'], function(){ var transfer = layui.transfer, util = layui.util; // 初始状态下左右两边都有数据 var data = { 'left': [ { 'value': '1', 'title': '选项1' }, { 'value': '2', 'title': '选项2' }, { 'value': '3', 'title': '选项3' } ], 'right': [ { 'value': '4', 'title': '选项4' }, { 'value': '5', 'title': '选项5' } ] }; // 渲染 transfer transfer.render({ elem: '#demo1', // 绑定元素 data: data, // 数据 title: ['可选项', '已选项'], // 标题 id: 'demo1', // ID width: 200, // 宽度 height: 400, // 高度 parseData: function(res){ // 解析返回的数据 return { 'code': res.code, // 状态码 'msg': res.msg, // 消息 'data': res.data // 数据 }; } }); }); </script> </body> </html> ``` 这个示例中，我们创建了一个 layui.transfer 实例，并且在 data 属性中定义了初始状态下左右两边都有数据。在页面加载时，左边和右边的列表都会显示对应的数据项。

阅读全文