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"
            });
        }
    }
})