layui是一款我个人觉得做后台非常优秀的框架了，特别是针对我这种对前端不是很熟悉的人，只要简单的拼凑一下HTML、引入一些对应的库就可以轻松高效的实现一个美观的管理后台。简直不要太舒服。

回归话题，是这次在接活的时候做一个客户的信息管理后台，其中有一项就是员工的技能管理，这里涉及一个员工有多项技能，我第一时间就想到了穿梭轴。但是实际使用的时候发现还是有一些小问题，耗费了一些时间仔细的研究了一下。这里做一个备忘。

我是购买了正版授权的layuiadmin双版本的，所以我的管理后台开发是基于layuiadmin-std也就是iframe版本。

引入transfer.js找不到

这个问题确实让我尴尬了很久，引入就直接报错了，因为我是在Django项目下开发的。也不知道是不是我当时本地保存的包版本太低，layuiadmin/modules/下面竟然没有transfer.js文件，这个直接网上找一个，在仍进来就可以了。

引入穿梭轴后页面样式错乱

左右的穿梭轴变成了上下的，这个最为恶心，本身前端就不是很熟悉，自己折腾了好久的样式，又是flex、又是float的。。折腾了半天，突然想到妈的，是不是我的版本太老了。去官网下载最新的layui覆盖layuiadmin/layui文件夹。清理缓存后解决。

#初始化页面加载 自己大概看一下就懂了。这个主要是应对新增的，比如我新增一个员工选择他的技能，可以用ajax方式获取数据后，可以使用transfer.render方法渲染进去。

 transfer.render({
	 elem: "#multiskill_category",
	 title: ['All Skill List', 'Skill Selected'],
	 data: res.data,
	 id: 'multiskill_category',
	 parseData: function (res) {
		 return {
			 "value": res.id,
			 "title": res.skills_name,
			 "disabled": "",
			 "checked": ""
		 }
	 }
 });

#渲染已存在的数据 这种情况主要是应对编辑已存在用户的，比如这个用户在添加的时候已经选择过x个技能了，然后再次编辑这个用户信息的时候，我们需要将以前选择的技能在渲染出来。 我说实话，我的方法，我觉得还是可以优化的，但是我也没找到比较好的方法（主要还是懒），至少这个方式跑起来是没有问题的。

$.ajax({
	.....
	success:function(res){
		// 正常的表单渲染
		from.val("EditorUserForm",{
			......
			// 这里就是正常渲染其他的一些填空数据什么的
		});

		if (res.data.multiskill_category.length > 0){
			// 说明这个用户是之前已经有技能的，需要渲染
			const jsonMultiskill = JSON.parse(res.data.multiskill_category);
			const UserSkillsList = [];
			// 循环用户已经被选择的技能列表，写入元组中
			for (index in jsonMultiskill){
				UserSkillsList.push(jsonMultiskill[index].value);
			}
			// 渲染穿梭轴
			transfer.render({
				elem:"#multiskill_category",
				data: multiskillSelectData,
				value:UserSkillsList,
				id:"multiskill_category"
			});
		} else {
			// 说明这个用户没有技能，直接给他一个新的完整穿梭轴即可
			transfer.render({
				elem:"选择id",
				data:穿梭轴数据,
				id:"multiskill_category"
			});
		}
	}
})