016-穿梭框
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: ['詩人', '女詩人'] // 穿梭框上方標題,id: 'poet-transfer' // 設定實例唯一索引, 用于基礎方法傳參使用 ,data: [{"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": ""}]// 對data數據解析。如果data數據不合法, 這個方法可以用來返回合法數據。,parseData: function(res){ return {"value": res.value // 數據值,"title": res.title // 數據標題,"disabled": res.disabled // 是否禁用,"checked": res.checked // 是否選中}}}); }); </script>4. 左右穿梭的回調函數 - onchange
4.1. 當數據在左右穿梭時觸發, 回調返回當前被穿梭的數據:
<script type="text/javascript">layui.use(['transfer'], function() {var transfer = layui.transfer;// 渲染transfer.render({elem: '#test1' // 指向容器選擇器,title: ['詩人', '女詩人'] // 穿梭框上方標題,id: 'poet-transfer' // 設定實例唯一索引, 用于基礎方法傳參使用,onchange: function(data, index){console.log(data); // 得到當前被穿梭的數據console.log(index); // 如果數據來自左邊index為0, 否則為1}});}); </script>5. 獲得右側數據
5.1. 穿梭框的右側數據通常被認為是選中數據, 因此你需要得到它并提交到后臺:
<script type="text/javascript">layui.use(['transfer'], function() {var transfer = layui.transfer;// 渲染transfer.render({elem: '#test1' // 指向容器選擇器,title: ['詩人', '女詩人'] // 穿梭框上方標題,id: 'poet-transfer' // 設定實例唯一索引, 用于基礎方法傳參使用});// 獲得右側數據var getData = transfer.getData('poet-transfer'); }); </script>6. 實例重載
6.1. 重載一個已經創建的組件實例, 被覆蓋新的基礎屬性:
<script type="text/javascript">layui.use(['transfer'], function() {var transfer = layui.transfer;// 渲染transfer.render({elem: '#test1' // 指向容器選擇器,title: ['詩人', '女詩人'] // 穿梭框上方標題,id: 'poet-transfer' // 設定實例唯一索引, 用于基礎方法傳參使用});// 可以重載所有基礎參數transfer.reload('poet-transfer', {title: ['新列表1', '新列表2']});}); </script>7. 設定全局默認參數
var transfer = layui.transfer;transfer.set(options); // 設定全局默認參數。options即各項基礎參數。8. 例子
8.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>穿梭框 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div id="test1"></div><script type="text/javascript">layui.use(['transfer'], function() {var transfer = layui.transfer;// 渲染transfer.render({elem: '#test1' // 指向容器選擇器,title: ['詩人', '女詩人'] // 穿梭框上方標題,id: 'poet-transfer' // 設定實例唯一索引, 用于基礎方法傳參使用,showSearch: true,width: 300,height: 500,text: {none: '無數據' // 沒有數據時的文案,searchNone: '無匹配數據' // 搜索無匹配數據時的文案} ,data: [{"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": ""}],value: ["5", "6"]// 對data數據解析。如果data數據不合法, 這個方法可以用來返回合法數據。,parseData: function(res){ return {"value": res.value // 數據值,"title": res.title // 數據標題,"disabled": res.disabled // 是否禁用,"checked": res.checked // 是否選中}},onchange: function(data, index){console.log(data); // 得到當前被穿梭的數據console.log(index); // 如果數據來自左邊index為0, 否則為1}});// 獲得右側數據var getData = transfer.getData('poet-transfer'); }); </script></body> </html>8.2. 效果圖
總結
- 上一篇： 015-图片文件上传
- 下一篇： 017-颜色选择器