layui框架学习（28：穿梭框模块）

  Layui模块中的穿梭框模块transfer主要支撑穿梭框组件的显示、交互等操作。所谓穿梭框是指左右各有一个复选框列表，可以将左侧选中的项目移动到右边，后者将右侧的选中项移回左边的控件，其样式类似下图所示（参考文献5-6）。

  穿梭框模块transfer的基本用法及效果如下所示：

	 <div id="test"></div>
	 <script>
		  layui.use('transfer', function(){
			var transfer = layui.transfer;
		   
			//渲染
			transfer.render({
			  elem: '#test' ,
			  title:['中国古代发明','中国四大发明']
			  ,data: [
				{"value": "1", "title": "汉字", "disabled": "", "checked": ""}
				,{"value": "2", "title": "火药", "disabled": "", "checked": ""}
				,{"value": "3", "title": "造纸术", "disabled": "", "checked": ""}
				,{"value": "4", "title": "活字印刷术", "disabled": "", "checked": ""}
				,{"value": "5", "title": "指南针", "disabled": "", "checked": ""}
				,{"value": "6", "title": "人痘接种法", "disabled": "", "checked": ""}
				,{"value": "7", "title": "造纸术", "disabled": "", "checked": ""}
				,{"value": "8", "title": "算筹", "disabled": "", "checked": ""}
				,{"value": "9", "title": "珠算", "disabled": "", "checked": ""}
				,{"value": "10", "title": "丝绸", "disabled": "", "checked": ""}
			  ]
			  ,id: 'demo'
			  value:['2','3','4','5']
			});
		  });
	  </script>

  基础参考elem指定穿梭框所属容器，一般都是div元素。
  基础参数title指定穿梭框两侧的标题，一维数组，第一个值为左侧标题第二个值为右侧标题。
  基础参数data指定穿梭框的数据源，穿梭框左侧数据加上右侧数据的合集即为data。data有格式要求，如下图所示，其中title属性为显示值，value为实际值，disabled设置该条记录是否能被选中并移动到另一侧，checked属性设置该条记录是否默认勾选。如果data值不符合下面的格式要求，则需要设置parseData函数，用以解析每条记录与下面各个属性的对应关系。

  基础参数value设置穿梭框右侧的默认显示值，一维数组，只需设置data中每条记录的value属性值即可。
  基础参数showSearch设置是否显示搜索框。取值主要有3个：false（不开启搜索）、true （开启搜索且不区分大小写）、cs （开启搜索，且区分大小写）。每类值的显示效果如下所示：

  基础参数width和height设置左右穿梭框宽度和高度。
  基础参数text设置检索数据为空和显示数据为空时的显示文本，none属性设置显示数据为空时的文本，默认为无数据，searchNone设置检索数据为空时的文本，默认为无匹配数据。其设置代码及显示效果如下：

	text:{none:"本框无数据",searchNone:"检索内容无匹配数据"}

  基础参数id设置穿梭框的唯一标识，可以调用transfer.getData(id)函数获取穿梭框右侧的数据即可，右侧数据也即用户选择的数据。示例代码及程序效果如下所示：

	  <div id="test"></div><br />
	  <button class="get_data">获取用户选择的数据</button>
	  <script>
		  layui.use(['transfer','layer'], function(){
			var transfer = layui.transfer;
			var layer = layui.layer;
			var $ = layui.jquery;
		   
			transfer.render({
			  elem: '#test'  ,
			  title:['中国古代发明','中国四大发明']
			  ,data: [
				{"value": "1", "title": "汉字", "disabled": "", "checked": ""}
				,{"value": "2", "title": "火药", "disabled": "", "checked": ""}
				,{"value": "3", "title": "造纸术", "disabled": "", "checked": ""}
				,{"value": "4", "title": "活字印刷术", "disabled": "", "checked": ""}
				,{"value": "5", "title": "指南针", "disabled": "", "checked": ""}
				,{"value": "6", "title": "人痘接种法", "disabled": "", "checked": ""}
				,{"value": "7", "title": "造纸术", "disabled": "", "checked": ""}
				,{"value": "8", "title": "算筹", "disabled": "", "checked": ""}
				,{"value": "9", "title": "珠算", "disabled": "", "checked": ""}
				,{"value": "10", "title": "丝绸", "disabled": "", "checked": ""}
				,{"value": "11", "title": "测试AA", "disabled": "", "checked": ""}
				,{"value": "12", "title": "测试aa", "disabled": "", "checked": ""}
			  ]
			  ,id: 'demo' ,
			  value:['2','3','4','5'],
			  showSearch:'cs',
			  text:{none:"本框无数据",searchNone:"检索内容无匹配数据"}
			});
			
			$('.get_data').on('click', function(){
			   layer.alert(JSON.stringify(transfer.getData('demo')));
			  });
		  });
	  </script>

  
  
  
  
  
  

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]http://www.hzhcontrols.com/new-1251402.html
[6]https://img-blog.csdnimg.cn/img_convert/5000a15f73ce70e1b24991ee2418cf8b.png