016-穿梭框
1. transfer組件可以進(jìn)行數(shù)據(jù)的交互篩選。模塊加載名稱: transfer。
2. 基礎(chǔ)參數(shù)
2.1. 目前transfer組件提供以下基礎(chǔ)參數(shù), 可根據(jù)需要進(jìn)行相應(yīng)的設(shè)置:
3. 數(shù)據(jù)源格式解析的回調(diào)函數(shù) - parseData
3.1. 用于將任意數(shù)據(jù)格式解析成transfer組件規(guī)定的數(shù)據(jù)格式, 以下是合法的數(shù)據(jù)格式如下:
[{"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. 然而很多時(shí)候你返回的數(shù)據(jù)格式可能并不符合規(guī)范, 那么您需要將其解析成transfer組件所規(guī)定的數(shù)據(jù)格式:
<script type="text/javascript">layui.use(['transfer'], function() {var transfer = layui.transfer;// 渲染transfer.render({elem: '#test1' // 指向容器選擇器,title: ['詩人', '女詩人'] // 穿梭框上方標(biāo)題,id: 'poet-transfer' // 設(shè)定實(shí)例唯一索引, 用于基礎(chǔ)方法傳參使用 ,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數(shù)據(jù)解析。如果data數(shù)據(jù)不合法, 這個(gè)方法可以用來返回合法數(shù)據(jù)。,parseData: function(res){ return {"value": res.value // 數(shù)據(jù)值,"title": res.title // 數(shù)據(jù)標(biāo)題,"disabled": res.disabled // 是否禁用,"checked": res.checked // 是否選中}}}); }); </script>4. 左右穿梭的回調(diào)函數(shù) - onchange
4.1. 當(dāng)數(shù)據(jù)在左右穿梭時(shí)觸發(fā), 回調(diào)返回當(dāng)前被穿梭的數(shù)據(jù):
<script type="text/javascript">layui.use(['transfer'], function() {var transfer = layui.transfer;// 渲染transfer.render({elem: '#test1' // 指向容器選擇器,title: ['詩人', '女詩人'] // 穿梭框上方標(biāo)題,id: 'poet-transfer' // 設(shè)定實(shí)例唯一索引, 用于基礎(chǔ)方法傳參使用,onchange: function(data, index){console.log(data); // 得到當(dāng)前被穿梭的數(shù)據(jù)console.log(index); // 如果數(shù)據(jù)來自左邊index為0, 否則為1}});}); </script>5. 獲得右側(cè)數(shù)據(jù)
5.1. 穿梭框的右側(cè)數(shù)據(jù)通常被認(rèn)為是選中數(shù)據(jù), 因此你需要得到它并提交到后臺(tái):
<script type="text/javascript">layui.use(['transfer'], function() {var transfer = layui.transfer;// 渲染transfer.render({elem: '#test1' // 指向容器選擇器,title: ['詩人', '女詩人'] // 穿梭框上方標(biāo)題,id: 'poet-transfer' // 設(shè)定實(shí)例唯一索引, 用于基礎(chǔ)方法傳參使用});// 獲得右側(cè)數(shù)據(jù)var getData = transfer.getData('poet-transfer'); }); </script>6. 實(shí)例重載
6.1. 重載一個(gè)已經(jīng)創(chuàng)建的組件實(shí)例, 被覆蓋新的基礎(chǔ)屬性:
<script type="text/javascript">layui.use(['transfer'], function() {var transfer = layui.transfer;// 渲染transfer.render({elem: '#test1' // 指向容器選擇器,title: ['詩人', '女詩人'] // 穿梭框上方標(biāo)題,id: 'poet-transfer' // 設(shè)定實(shí)例唯一索引, 用于基礎(chǔ)方法傳參使用});// 可以重載所有基礎(chǔ)參數(shù)transfer.reload('poet-transfer', {title: ['新列表1', '新列表2']});}); </script>7. 設(shè)定全局默認(rèn)參數(shù)
var transfer = layui.transfer;transfer.set(options); // 設(shè)定全局默認(rèn)參數(shù)。options即各項(xiàng)基礎(chǔ)參數(shù)。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: ['詩人', '女詩人'] // 穿梭框上方標(biāo)題,id: 'poet-transfer' // 設(shè)定實(shí)例唯一索引, 用于基礎(chǔ)方法傳參使用,showSearch: true,width: 300,height: 500,text: {none: '無數(shù)據(jù)' // 沒有數(shù)據(jù)時(shí)的文案,searchNone: '無匹配數(shù)據(jù)' // 搜索無匹配數(shù)據(jù)時(shí)的文案} ,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數(shù)據(jù)解析。如果data數(shù)據(jù)不合法, 這個(gè)方法可以用來返回合法數(shù)據(jù)。,parseData: function(res){ return {"value": res.value // 數(shù)據(jù)值,"title": res.title // 數(shù)據(jù)標(biāo)題,"disabled": res.disabled // 是否禁用,"checked": res.checked // 是否選中}},onchange: function(data, index){console.log(data); // 得到當(dāng)前被穿梭的數(shù)據(jù)console.log(index); // 如果數(shù)據(jù)來自左邊index為0, 否則為1}});// 獲得右側(cè)數(shù)據(jù)var getData = transfer.getData('poet-transfer'); }); </script></body> </html>8.2. 效果圖
總結(jié)
- 上一篇： 015-图片文件上传
- 下一篇： 017-颜色选择器