當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

016-穿梭框

發布時間：2025/4/17 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 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組件所規定的數據格式:

4. 左右穿梭的回調函數 - onchange

4.1. 當數據在左右穿梭時觸發, 回調返回當前被穿梭的數據:

5. 獲得右側數據

5.1. 穿梭框的右側數據通常被認為是選中數據, 因此你需要得到它并提交到后臺:

6. 實例重載

6.1. 重載一個已經創建的組件實例, 被覆蓋新的基礎屬性:

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. 效果圖

總結

以上是生活随笔為你收集整理的016-穿梭框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。