穿梭框組件文檔 - layui.transfer

                    穿梭框組件的初衷來源于 layui 社區的擴展組件平臺,并且在 layui 2.5.0 的版本中開始登場。其適用的業務場景多樣,不妨一試。
                    模塊加載名稱:transfer
                    快速使用

                    transfer 組件可以進行數據的交互篩選

                    <!DOCTYPE html>
                    <html>
                    <head>
                      <meta charset="utf-8">
                      <title>穿梭框組件</title>
                      <link rel="stylesheet" href="../src/css/layui.css">
                    </head>
                    <body>
                      <div id="test1"></div>
                      <script src="../src/layui.js"></script>
                      <script>
                      layui.use('transfer', function(){
                        var transfer = layui.transfer;
                       
                        //渲染
                        transfer.render({
                          elem: '#test1'  //綁定元素
                          ,data: [
                            {"value": "1", "title": "李白", "disabled": "", "checked": ""}
                            ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
                            ,{"value": "3", "title": "賢心", "disabled": "", "checked": ""}
                          ]
                          ,id: 'demo1' //定義索引
                        });
                      });
                      </script>
                    </body>
                    </html>
                          
                    基礎參數

                    目前 transfer 組件提供以下基礎參數,可根據需要進行相應的設置

                    參數選項 說明 類型 默認值
                    elem 指向容器選擇器 String/Object -
                    title 穿梭框上方標題 Array ['標題一', '標題二']
                    data 數據源 Array [{}, {}, …]
                    parseData 用于對數據源進行格式解析 Function 詳見數據源格式解析
                    value 初始選中的數據(右側列表) Array -
                    id 設定實例唯一索引,用于基礎方法傳參使用。 String -
                    showSearch 是否開啟搜索 Boolean false
                    width 定義左右穿梭框寬度 Number 200
                    height 定義左右穿梭框高度 Number 340
                    text 自定義文本,如空數據時的異常提示等。
                    text: {
                      none: '無數據' //沒有數據時的文案
                      ,searchNone: '無匹配數據' //搜索無匹配數據時的文案
                    }             
                                  
                    Object -
                    onchange 左右數據穿梭時的回調 Function 詳見穿梭時的回調
                    數據源格式解析

                    數據格式解析的回調函數,用于將任意數據格式解析成 transfer 組件規定的數據格式,以下是合法的數據格式如下:

                    [
                      {"value": "1", "title": "李白", "disabled": "", "checked": ""}
                      ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
                      ,{"value": "3", "title": "賢心", "disabled": "", "checked": ""}
                    ]
                          

                    然而很多時候你返回的數據格式可能并不符合規范,比如:

                    [
                      {"id": "1", "name": "李白"}
                      ,{"id": "2", "name": "杜甫"}
                      ,{"id": "3", "name": "賢心"}
                    ]
                          

                    那么您需要將其解析成 transfer 組件所規定的數據格式:

                    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 //是否選中
                        }
                      }
                    });
                          
                    左右穿梭的回調

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

                    transfer.render({
                      elem: '#text'
                      ,data: [] //數據源
                      ,onchange: function(data, index){
                        console.log(data); //得到當前被穿梭的數據
                        console.log(index); //如果數據來自左邊,index 為 0,否則為 1
                      }
                    });
                          
                    基礎方法

                    基礎用法是組件關鍵組成部分,目前所開放的所有方法如下:

                    var transfer = layui.transfer;
                     
                    transfer.set(options); //設定全局默認參數。options 即各項基礎參數
                    transfer.getData(id); //獲得右側數據
                    transfer.reload(id, options); //重載實例
                        
                    獲得右側數據

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

                    transfer.render({
                      elem: '#test'
                      ,data: []
                      ,id: 'demo1' //定義索引
                    });
                     
                    //獲得右側數據
                    var getData = transfer.getData('demo1'); 
                          
                    實例重載

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

                    transfer.render({
                      elem: '#test'
                      ,data: []
                      ,id: 'demo1' //定義索引
                    });
                     
                     //可以重載所有基礎參數
                    transfer.reload('demo1', {
                      title: ['新列表1', '新列表2']
                    });
                          
                    結語

                    穿梭框組件極易上手,在浩瀚的業務需求中,值得一用。

                    layui - 用心與你溝通

                    亚洲图色