使用layui table达到穿梭框效果

由于自己文章写得transfer过于操蛋，现在直接使用两个table来实现transfer的功能，与layui的穿梭框不同的是，里面的值虽然也是一一对应的，但是右侧框是可以显示左侧框没有的值。且也不会因为左侧框的值变化右侧框也跟着变化

<script th:inline="javascript">
    // const index = parent.layer.getFrameIndex(window.name);
    /*<![CDATA[*/
    layui.use(['layer', 'form', 'upload', 'table'], function () {
        let layer = layui.layer,
            form = layui.form,
            table = layui.table,
            $ = layui.$;
        layui.config({
            base: '/'
        }).extend({
            authtree: 'authtree/authtree',
        });
        //----------------------------------------
        //穿梭框初始化
        let dataList, dataListLeft;
        // 执行一个 table实例
        let id = $("input[name='id']").val();
        $.ajax({
            type: "post",
            url: '/customer/list4Trans',// 数据接口
            async: false,
            cache: false,
            data: {
                id: id
            }, success: function (data) {
                dataList = data.data;
                table.render({
                    elem: '#dataList',
                    data: dataList
                    , title: '记录表'
                    , height: 320 // 开启分页
                    , method: 'post', // 默认get方式,
                    limit: 40
                    , cols: [[// 表头
                        {type: 'checkbox', fixed: 'index_id'}
                        , {field: 'title', title: '样品', width: 300, align: 'center', sort: true}
                    ]]
                });
            }
        });
        $.ajax({
            type: "post",
            // contentType: "application/json;charset=UTF-8",
            url: '/share/list4Trans',// 数据接口
            async: false,
            cache: false,
            data: {
                id: id
            }, success: function (data) {
                dataListLeft = deleteRepeat(data.data)
                table.render({
                    elem: '#dataListLeft'
                    , data: dataListLeft// 数据接口
                    , title: '记录表',
                    limit: data.count
                    , height: 320 // 开启分页
                    , cols: [[// 表头
                        {type: 'checkbox', fixed: 'index_id'}
                        , {field: 'title', title: '样品', width: 300, align: 'center', sort: true}
                    ]]
                });
            }
        });


        function deleteRepeat(dataLeft) {
            let dataRight = table.cache['dataList'];

            let flag = false;
            for (let k of dataRight) {
                //遍历左边框，并删除选中数据
                for (let h = dataLeft.length - 1; h >= 0; h--) {
                    if (k.value === dataLeft[h].value) {
                        dataLeft.splice(h--, 1);
                        flag = true;
                    }
                }
            }
            return dataLeft;
        }

 //重新渲染左侧table的数据
        function tableReloadLeft(data) {
            table.cache['dataListLeft'] = data;
            table.reload('dataListLeft', {
                data: data
            })
        }

  //重新渲染右侧table的数据
        function tableReloadRight(data) {
            table.cache['dataList'] = data;
            if (data.length===1)
            {
                $("#css").show();
            }else {
                $("#css").hide();
            }
            table.reload('dataList', {
                data: data
            });
        }

    //删除右边框选中的数据
        $("#remove").click(function () {
            let checkData = table.checkStatus('dataList');
            let i = 0;
            if (checkData.data.length > 0) {
                // console.log(checkData.data)

                let flag;
                for (let k of checkData.data) {
                    //遍历左边框，并删除选中数据

                    for (let h = dataList.length - 1; h >= 0; h--) {
                        if (k.value === dataList[h].value) {
                            dataList.splice(h--, 1);
                            flag = true;
                        }
                    }
                }
                //判断表格是否变化
                if (flag === true) {
                    tableReloadRight(dataList);
                    getDataLeft();
                    table.reload('dataListLeft', {
                        data: table.cache['dataListLeft']
                    });
                }
            }
        });



       //将左侧选中的数据添加到右侧table
        $("#add").click(function () {
            let checkData = table.checkStatus('dataListLeft');
            let i = 0;
            if (checkData.data.length > 0) {
                let flag;
                for (let k of checkData.data) {
                    //遍历左边框，并删除选中数据
                    flag = true;
                    for (let h = dataListLeft.length - 1; h >= 0; h--) {
                        if (k.value === dataListLeft[h].value) {
                            dataListLeft.splice(h--, 1);
                        }
                    }
                    //遍历右边框，添加选中数据
                    for (let h = dataList.length - 1; h >= 0; h--) {
                        if (k.value === dataList[h].value) {
                            flag = false;
                        }
                    }
                    if (flag === true) {
                        k.LAY_TABLE_INDEX = dataList.length;
                        dataList.push(k);
                    }
                }
                //判断表格是否变化
                if (flag) {
                    tableReloadLeft(dataListLeft);
                    console.log(dataList);
                    tableReloadRight(dataList);

                }

            }
        });

       //当筛选条件变化时。重新载入左侧table数据
        function getDataLeft() {
            let patternCateId = $("#patternCateId").val();
            $.ajax({
                type: "post",
                // contentType: "application/json;charset=UTF-8",
                url: '/share/list4Trans',// 数据接口
                async: false,
                cache: false,
                data: {
                    patternCateId: patternCateId
                }, success: function (data) {
                    table.cache['dataListLeft'] = deleteRepeat(data.data);
                    dataListLeft = deleteRepeat(data.data);
                }
            });
        }


        form.on('select(patternCate)', function () {
            getDataLeft();
            table.reload('dataListLeft', {
                data: table.cache['dataListLeft']
            });
        });//获取输入框的值
    });
    /*]]>*/
</script>