layui穿梭框渲染

	// 打开颜色穿梭框
    function openColorTransferModal(groupData) {
    	// groupData 传过来的颜色组所包含的颜色id和颜色名称
        // 查询所有颜色，用作渲染左边穿梭框
        $.post("${pageContext.request.contextPath}/systemSet/findColorAll",function (data) {
            // 遍历获取当前选中的颜色组的颜色id，用作右边穿梭框的值
            var opo = new Array();
            for(var m = 0; m<groupData.length;m++){
            	// 把颜色组中的颜色ID存入数组
                opo.push(groupData[m].colorId);
            }
            
            // 渲染layui穿梭框
            TransferBox=layTransfer.render({
                elem: '#colorShuttleBox',	
                parseData: function(data){	// 解析数据，如果没在控制器处理数据，就在此处处理数据
                    return {
                        "value": data.colorId, // 颜色ID
                        "title": data.colorName, // 颜色名称
                        "disabled": "",  //是否禁用
                        "checked": "" //是否选中
                    }
                },
                data:data,// 已经过上方解析的数据源
                title:['所有颜色名称','当前颜色组所含颜色'],	// 左右穿梭框标题
                // showSearch:true, // 开启搜索框
                text: {
                    none: '空空如也', //没有数据时的文案
                    searchNone: '无匹配数据' //搜索无匹配数据时的文案
                },
                value:opo	// 右边穿梭框的值
            })
        })
        
        // layui弹出层
        layModalson = layer.open({
            title: '颜色组资料',
            area: ['620px', '565px'],
            type: 1,
            content: $('#colorShuttleBoxModal')
        })

效果图：

layui穿梭框很简单，具体可参照layui官方文档使用
有问题欢迎留言哦！