jquery 穿梭框插件可以排序 easyui穿梭框

转载

mob64ca141275de 2023-11-24 09:04:31

文章标签 jquery 穿梭框插件可以排序 js html 数据 css 文章分类 jQuery 前端开发

本文是自己对layui.transfer 穿梭框的基本使用总结，未涉及到的内容可以在layui.transfer官方文档中查找。下图为穿梭框的基本样式，效果还是不错的，能够满足系统中多种场景下的需求，它可以进行数据的交互筛选。

jquery 穿梭框插件可以排序 easyui穿梭框_css

1、基础效果实现

<!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'  //绑定元素
      ,title: ['候选文人', '获奖文人']  //自定义标题
      //,width: 150 //定义宽度
      ,height: 210 //定义高度
      ,data: [//定义数据源
        {"value": "1", "title": "李白"}
        ,{"value": "2", "title": "杜甫"}
        ,{"value": "3", "title": "苏轼"}
        ,{"value": "4", "title": "李清照", "checked" : true}//checked 是否选中
        ,{"value": "5", "title": "鲁迅", "disabled": true}//disabled 是否禁用 
        ,{"value": "6", "title": "巴金"}
        ,{"value": "7", "title": "冰心"}
        ,{"value": "8", "title": "矛盾"}
        ,{"value": "9", "title": "贤心"}
      ]  //disabled 是否禁用  checked 是否选中
      ,id: 'demo1' //定义索引 重新加载reload或者获取右侧数据时可以用到
    });
  });
  </script>
</body>
</html>

2、数据源格式解析

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 //是否选中
    }
  }
});

3、初始化右侧数据

jquery 穿梭框插件可以排序 easyui穿梭框_jquery 穿梭框插件可以排序_02

<!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": "瓦罐汤"}
        ,{"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": "狼牙土豆"}
      ]
      ,value: ["1", "3", "5", "7", "9", "11"]//初始化右侧数据
    });
  });
  </script>
</body>
</html>

4、显示搜索框

jquery 穿梭框插件可以排序 easyui穿梭框_jquery 穿梭框插件可以排序_03

<!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'
      ,title: ['候选文人', '获奖文人']
      ,showSearch: true //显示搜索框
      ,data: [
        {"value": "1", "title": "李白"}
        ,{"value": "2", "title": "杜甫"}
        ,{"value": "3", "title": "苏轼"}
        ,{"value": "4", "title": "李清照", "checked" : true}
        ,{"value": "5", "title": "鲁迅", "disabled": true}
        ,{"value": "6", "title": "巴金"}
        ,{"value": "7", "title": "冰心"}
        ,{"value": "8", "title": "矛盾"}
        ,{"value": "9", "title": "贤心"}
      ]  
      ,id: 'demo1'
    });
  });
  </script>
</body>
</html>

5、左右穿梭的回调

jquery 穿梭框插件可以排序 easyui穿梭框_css_04

<!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'
      ,title: ['候选文人', '获奖文人']
      ,data: [
        {"value": "1", "title": "李白"}
        ,{"value": "2", "title": "杜甫"}
        ,{"value": "3", "title": "苏轼"}
        ,{"value": "4", "title": "李清照", "checked" : true}
        ,{"value": "5", "title": "鲁迅", "disabled": true}
        ,{"value": "6", "title": "巴金"}
        ,{"value": "7", "title": "冰心"}
        ,{"value": "8", "title": "矛盾"}
        ,{"value": "9", "title": "贤心"}
      ]  
      ,onchange: function(obj, index){
      var arr = ['左边', '右边'];
      layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
    }
    });
  });
  </script>
</body>
</html>

6、获取右侧数据

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>穿梭框组件</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
  <div id="test1"></div>
  <button>获取右侧数据</button>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('transfer', function(){
    var transfer = layui.transfer;
  
    //渲染
    transfer.render({
      elem: '#test1'
      ,title: ['候选文人', '获奖文人']
      ,data: [
        {"value": "1", "title": "李白"}
        ,{"value": "2", "title": "杜甫"}
        ,{"value": "3", "title": "苏轼"}
        ,{"value": "4", "title": "李清照", "checked" : true}
        ,{"value": "5", "title": "鲁迅", "disabled": true}
        ,{"value": "6", "title": "巴金"}
        ,{"value": "7", "title": "冰心"}
        ,{"value": "8", "title": "矛盾"}
        ,{"value": "9", "title": "贤心"}
      ]  
      ,id: 'demo1'
    }
    });

    var getData = transfer.getData('demo1'); 
    $("button").click(function(){
        alert(getData )
    })
  });
  </script>
</body>
</html>

7、重新加载

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>穿梭框组件</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
  <div id="test1"></div>
  <button>重新加载</button>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('transfer', function(){
    var transfer = layui.transfer;
  
    //渲染
    transfer.render({
      elem: '#test1'
      ,title: ['候选文人', '获奖文人']
      ,data: [
        {"value": "1", "title": "李白"}
        ,{"value": "2", "title": "杜甫"}
        ,{"value": "3", "title": "苏轼"}
        ,{"value": "4", "title": "李清照", "checked" : true}
        ,{"value": "5", "title": "鲁迅", "disabled": true}
        ,{"value": "6", "title": "巴金"}
        ,{"value": "7", "title": "冰心"}
        ,{"value": "8", "title": "矛盾"}
        ,{"value": "9", "title": "贤心"}
      ]  
      ,id: 'demo1'
    }
    });

    var getData = transfer.getData('demo1'); 
    $("button").click(function(){
        transfer.reload('demo1', {
          title: ['候选文人1', '获奖文人1']
          ,value: ['2', '5', '9']
          ,showSearch: true
        });
    })
  });
  </script>
</body>
</html>

8、基础参数一览表

参数选项	说明	类型	默认值
elem	指向容器选择器	String/Object	-
title	穿梭框上方标题	Array	['标题一', '标题二']
data	数据源	Array	[{'key','value'},{},{}]
parseData	用于对数据源进行格式解析	Function	,parseData: function(res){ return { "value": res.id //数据值 ,"title": res.name //数据标题 ,"disabled": res.disabled //是否禁用 ,"checked": res.checked //是否选中 } }
value	初始选中的数据（右侧列表）	Array	-
id	设定实例唯一索引，用于基础方法传参使用。	String	-
showSearch	是否开启搜索	Boolean	false
width	定义左右穿梭框宽度	Number	200
height	定义左右穿梭框高度	Number	340
text	自定义文本，如空数据时的异常提示等。 `text: { none: '无数据' //没有数据时的文案 ,searchNone: '无匹配数据' //搜索无匹配数据时的文案 }`	Object	-
onchange	左右数据穿梭时的回调	Function	function(obj, index){ var arr = ['左边', '右边']; layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据 }