layui使用穿梭框

HTML

<div class="layui-card">
        <div class="layui-card layui-form" lay-filter="component-form-element">
            <div id="test7" class="demo-transfer"></div>
        </div>
        <div class="layui-btn-container">
            <button type="button" class="layui-btn" lay-demotransferactive="getData">保存</button>
            <button type="button" class="layui-btn" lay-demotransferactive="reload">重置</button>
        </div>
    </div>
    

javascript

 layui.use(['transfer', 'layer', 'util'], function () {
        var $ = layui.$
            , transfer = layui.transfer
            , layer = layui.layer
            , util = layui.util;
            
         //模拟右边默认选中数据
		var data_right=['2', '5', '9'];
		 //模拟左边数据
        var data_left = [
            {"value": "1", "title": "李白"}
            , {"value": "2", "title": "杜甫"}
            , {"value": "3", "title": "苏轼"}
            , {"value": "4", "title": "李清照"}
            , {"value": "5", "title": "鲁迅"}
            , {"value": "6", "title": "巴金"}
            , {"value": "7", "title": "冰心"}
            , {"value": "8", "title": "矛盾"}
            , {"value": "9", "title": "贤心"}
        ]
      
        var dataLeft=new Array();//左边的数据
        var dataRight=new Array();//右边的数据
        $.ajax({
            type: "post",
            url: "/",
            datatype: "json",
            success: function (succ) {
                if (succ.code == "1") {
                    layer.msg(succ.msg);
                    dataRight=succ.data.dataRight
                    dataLeft=succ.data.dataLeft
                    //基础效果
                    transfer.render({
                        elem: '#test7'
                        ,data: dataRight
                        ,title: ['商品列表', '展台商品']
                        ,id: 'key123' //定义唯一索引
                        ,showSearch: true
                        ,value:dataLeft
                    })

                } else if (succ.code == "0") {
                    layer.msg(succ.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('服务器响应超时,请刷新后重试...');
                layer.close(index);
            }
        });

       
		
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                var getData = transfer.getData('key123'); //获取右侧数据
                layer.alert(JSON.stringify(getData));

                $.ajax({
                    type: "post",
                    url: "/",
                    datatype: "json",
                    data: {
                        hellId: hellId
                        ,json:JSON.stringify(getData)
                    },
                    success: function (succ) {
                        if (succ.code == "1") {
                            layer.msg(succ.msg);
                        } else if (succ.code == "0") {
                            layer.msg(succ.msg);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.msg('服务器响应超时,请刷新后重试...');
                        layer.close(index);
                    }
                });
            }
            ,reload:function(){
                //实例重载
                transfer.reload('key123', {
                    value:dataLeft
                    ,showSearch: true
                })
            }
        });
    });