ThinkPHP5 集成使用 Layui 穿梭框（transfer）控件

• 背景
  最近在做后台业务处理时，接触到了 Layui 中的一个穿梭框 transfer 控件的使用；
  个人觉得效果还是挺满意的；
  但是毕竟是在 ThinkPHP5 框架下进行的集成，不能不适合部分同行理解哦
  不过，还是在此进行整理一番，欢迎指摘 …

• Layui-穿梭框官方文档

框架： ThinkPHP5.1.2
系统： Nginx/centOS
浏览器：Google

①. 前端 Html代码展示

摘取核心html 代码如下：

    <div class="layui-form-item">
        <label class="layui-form-label">
            <span class="layui-badge-dot layui-bg-red"></span> 作者：</label>
        <div class="layui-input-inline">
            <select name="user_id" lay-filter="SelUser"  lay-search>
                {volist name="wjUserList" id="vo"}
                <option value="{$vo.id}" {$coll.user_id==$vo.id?"selected":""}>{$vo.nick_name}</option>
                {/volist}
            </select>
        </div>
    </div>
<div class="layui-form-item">
        <label class="layui-form-label">视频：</label>
        <div class="layui-input-block">
            <div id="transfer-videos" class="demo-transfer"></div>
        </div>
    </div>

设计的局部页面效果如下：

②. 设计思路理解

 > 通过提供的作者列表，点击后，发送 ajax 请求；
 > 获取返回的 json 数据 —— 作者的文章；
 > 然后，动态调用 transfer.reload（）方法，赋值穿梭框数据
 > 然后，通过 transfer 的监听事件，将选取的文章ID数据拼接存储在 input 隐藏域中
 > 最后，通过表单的数据提交，进行后台相关数据处理！

③. Javascript 代码

• 此处提过核心的 js 代码，主要都是根据自己的数据各种转化操作
  参见注释信息，应该可以理解我的操作过程

    layui.use(['form','transfer'], function () {
        var transfer = layui.transfer;
        var userVideos = $('.str_userVideos').val();
        //数据参考：userVideos = [{"value":12,"title":"看尴尬会"},{"value":11,"title":"通天塔"},{"value":9,"title":"王德顺 多棒啊啊"}]
        //console.log('userVideos:',userVideos);
        var userVideos2 =  eval('(' + userVideos + ')');
        //console.log('userVideos2:',userVideos2);
        var seled_videos = '{$coll.seled_videos}';
        //console.log('seled_videos:',seled_videos);
        var arrSel = seled_videos.split(',');
        //console.log('arrSel:',arrSel);
        //显示搜索框
        transfer.render({
            elem: '#transfer-videos'
            ,data: userVideos2
            ,value:arrSel
            ,title: ['待选', '已选']
            ,id:'key_seled_videos'
            ,showSearch: true
            ,onchange: function(obj, index){
                var getData = transfer.getData('key_seled_videos'); //获取右侧数据
                //获取被选中的id
                var arr_seled = [];
                $.each(getData,function (i,e) {
                    arr_seled.push(e.value);
                });
                var str_seled_videos = arr_seled.join();
                //console.log(str_seled_videos);
                $(".input_seled_videos").val(str_seled_videos);
                // layer.alert(JSON.stringify(getData));
            }
        });


        var form = layui.form;
        form.on('select(SelUser)', function (data) {
            var seledUser = data.value;
            $.post(
                "{:url('cms/video/ajaxGetCollUserVideos')}",
                {user_id:seledUser},
                function (result) {
                    $(".input_seled_videos").val('');
                    if(result.status == 1){
                        var userVideos = result.message;
                        var userVideos2 =  eval('(' + userVideos + ')');
                        transfer.reload('key_seled_videos', {
                            data: userVideos2
                            ,showSearch: true
                        })
                    }else{
                        //失败
                        layer.msg(result.message);
                        transfer.reload('key_seled_videos', {
                            data: []
                            ,showSearch: true
                        })
                    }
                },"JSON");
            form.render();
        });
    });

• ajax 请求 cms/video/ajaxGetCollUserVideos 获取的数据：

[{"value":10,"title":"滚滚滚"},{"value":7,"title":"王德顺 多棒啊啊"},
{"value":6,"title":"你愁啥？"},{"value":3,"title":"只为破纪录！法国小镇聚集3500名“蓝精灵”"},
{"value":2,"title":"马的屁股不要乱打"}]

④. 附录：

• 个人的一点小看法：

通过对个人业务的处理分析，
发现，transfer 适合展示对数据没有排序要求的业务
不然，你右侧的数据初始化读取后的展示，会不符合选定的结果
好在，作为简单业务，倒是也没有太大要求

• 注意，多看官方提供的文档吧，作为 “拿来主义” 的一员，有的用就不错咯！…