layui_穿梭框元件（transfer）

穿梭框元件（transfer）

• 元件介紹
• 元件舉例
• • 基礎效果
  • • 代碼
    • 效果
  • 定義标題及資料源
  • • 代碼
    • 效果
  • 初始右側資料集合
  • • 代碼
    • 效果
  • 顯示搜尋框
  • • 代碼
    • 效果
  • 穿梭時的回調
  • • 代碼
    • 效果
• 注意事項

元件介紹

這篇部落格素材的由來是我在玩一個小遊戲的時候，它的原理很像穿梭框，而且我覺得在開發中，穿梭框還挺有用的，于是我就去找了layui官網的文檔來學習，并且将它分享出來

子產品加載名稱：transfer

基礎的參數：

基礎方法：

方法	含義
transfer.set(options);	設定全局預設參數。options 即各項基礎參數
transfer.getData(id);	獲得右側資料
transfer.reload(id, options);	重載執行個體

元件舉例

基礎效果

代碼

js檔案

elem:加id

data:資料

layui.use(['transfer', 'layer', 'util'], function(){
  var $ = layui.$
  ,transfer = layui.transfer
  ,layer = layui.layer
  ,util = layui.util;
  
  //模拟資料
  var data1 = [
    {"value": "1", "title": "李白"}
    ,{"value": "2", "title": "杜甫"}
    ,{"value": "3", "title": "蘇轼"}
    ,{"value": "4", "title": "李清照"}
    ,{"value": "5", "title": "魯迅", "disabled": true}
    ,{"value": "6", "title": "巴金"}
    ,{"value": "7", "title": "冰心"}
    ,{"value": "8", "title": "沖突"}
    ,{"value": "9", "title": "賢心"}
  ]
  
  ,data2 = [
    {"value": "1", "title": "瓦罐湯"}
    ,{"value": "2", "title": "油酥餅"}
    ,{"value": "3", "title": "炸醬面"}
    ,{"value": "4", "title": "串串香", "disabled": true}
    ,{"value": "5", "title": "豆腐腦"}
    ,{"value": "6", "title": "驢打滾"}
    ,{"value": "7", "title": "北京烤鴨"}
    ,{"value": "8", "title": "烤冷面"}
    ,{"value": "9", "title": "毛血旺", "disabled": true}
    ,{"value": "10", "title": "肉夾馍"}
    ,{"value": "11", "title": "臊子面"}
    ,{"value": "12", "title": "涼皮"}
    ,{"value": "13", "title": "羊肉泡馍"}
    ,{"value": "14", "title": "冰糖葫蘆", "disabled": true}
    ,{"value": "15", "title": "狼牙洋芋"}
  ]
  	//基礎效果
	transfer.render({
    elem: '#test1'
    ,data: data1
  })

 });
           

jsp頁面

效果

定義标題及資料源

代碼

js檔案

elem:加id

data:資料

title: 自定義标題

height: 定義高度

layui.use(['transfer', 'layer', 'util'], function(){
  var $ = layui.$
  ,transfer = layui.transfer
  ,layer = layui.layer
  ,util = layui.util;
  
  //模拟資料
  var data1 = [
    {"value": "1", "title": "李白"}
    ,{"value": "2", "title": "杜甫"}
    ,{"value": "3", "title": "蘇轼"}
    ,{"value": "4", "title": "李清照"}
    ,{"value": "5", "title": "魯迅", "disabled": true}
    ,{"value": "6", "title": "巴金"}
    ,{"value": "7", "title": "冰心"}
    ,{"value": "8", "title": "沖突"}
    ,{"value": "9", "title": "賢心"}
  ]
  
  ,data2 = [
    {"value": "1", "title": "瓦罐湯"}
    ,{"value": "2", "title": "油酥餅"}
    ,{"value": "3", "title": "炸醬面"}
    ,{"value": "4", "title": "串串香", "disabled": true}
    ,{"value": "5", "title": "豆腐腦"}
    ,{"value": "6", "title": "驢打滾"}
    ,{"value": "7", "title": "北京烤鴨"}
    ,{"value": "8", "title": "烤冷面"}
    ,{"value": "9", "title": "毛血旺", "disabled": true}
    ,{"value": "10", "title": "肉夾馍"}
    ,{"value": "11", "title": "臊子面"}
    ,{"value": "12", "title": "涼皮"}
    ,{"value": "13", "title": "羊肉泡馍"}
    ,{"value": "14", "title": "冰糖葫蘆", "disabled": true}
    ,{"value": "15", "title": "狼牙洋芋"}
  ]
  //定義标題及資料源
  transfer.render({
    elem: '#test2'
    ,title: ['候選文人', '獲獎文人']  //自定義标題
    ,data: data1
    ,height: 210 //定義高度
  })

 });
           

jsp頁面

效果

初始右側資料集合

代碼

js檔案

elem:加id

data:資料

value：右側初始資料的value

transfer.render({
    elem: '#test3'
    ,data: data2
    ,value: ["1", "3", "5", "7", "9", "11"]
  })
           

jsp頁面

效果

顯示搜尋框

代碼

js檔案

elem:加id

data:資料

title:自定義标題

showSearch：是否開啟搜尋

//顯示搜尋框
  transfer.render({
    elem: '#test4'
    ,data: data1
    ,title: ['文本墨客', '獲獎文人']
    ,showSearch: true
  })
           

jsp頁面

效果

穿梭時的回調

代碼

js檔案

//穿梭時的回調
  transfer.render({
    elem: '#test6'
    ,data: data1
    ,onchange: function(obj, index){
      var arr = ['左邊', '右邊'];
      layer.alert('來自 <strong>'+ arr[index] + '</strong> 的資料：'+ JSON.stringify(obj)); //獲得被穿梭時的資料
    }
  })
           

jsp頁面

效果

注意事項

資料格式一定要合法

合法的資料：

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

導css檔案和js檔案，路徑，檔案名，位置都要弄清楚

如果沒有css檔案和js檔案的話可以去下載下傳：

下載下傳連結