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 隐藏域中
> 最后,通过表单的数据提交,进行后台相关数据处理!
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();
});
});
cms/video/ajaxGetCollUserVideos
获取的数据:[{"value":10,"title":"滚滚滚"},{"value":7,"title":"王德顺 多棒啊啊"},
{"value":6,"title":"你愁啥?"},{"value":3,"title":"只为破纪录!法国小镇聚集3500名“蓝精灵”"},
{"value":2,"title":"马的屁股不要乱打"}]
通过对个人业务的处理分析,
发现,transfer 适合展示对数据没有排序要求的业务
不然,你右侧的数据初始化读取后的展示,会不符合选定的结果
好在,作为简单业务,倒是也没有太大要求