正在进入ing...

Layui 穿梭轴 transfer 使用笔记

发布时间:2021-04-03 浏览量: 929 文章分类: 前端相关

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