<del id="kmqwi"><b id="kmqwi"></b></del>
      <track id="kmqwi"><del id="kmqwi"></del></track>
    1. <table id="kmqwi"></table>
      <acronym id="kmqwi"><strong id="kmqwi"></strong></acronym>
    2. 
      
      <p id="kmqwi"><strong id="kmqwi"></strong></p>
    3. 穿梭框組件文檔 - 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 - 用心與你溝通

      亚洲图色