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 適合展示對數據沒有排序要求的業務
不然，你右側的數據初始化讀取後的展示，會不符合選定的結果
好在，作爲簡單業務，倒是也沒有太大要求

• 注意，多看官方提供的文檔吧，作爲 “拿來主義” 的一員，有的用就不錯咯！…