layui穿梭框

html代码

<form class="layui-form" lay-filter="layui-form" action="" style="margin: 1.5rem 3rem">
        <input type="hidden" name="id" id="id" value="${entity.id }">
        <input type="hidden" id="ids1" value="${ids1 }">
        <input type="hidden" id="ids2" value="${ids2 }">
        
            <div class="layui-fluid" style="margin-top: 15px;">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md5">
                        <table class="layui-hide" id="left_tab" lay-filter="left"></table>
                    </div>
                    <div class="layui-col-md2 btn-height">
                        <div style="margin-bottom: 10px;">
                            <button class="layui-btn  layui-btn-disabled left-btn" type="button">
                                <i class="layui-icon">&#xe602;</i>
                            </button>
                        </div>
                        <div >
                            <button class="layui-btn layui-btn-disabled right-btn" type="button">
                                <i class="layui-icon">&#xe603;</i>
                            </button>
                        </div>
                    </div>
                    <div class="layui-col-md5">
                        <table class="layui-hide" id="right_tab" lay-filter="right"></table>
                    </div>
                </div>
            </div>
        
        
             <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit="" lay-filter="demo">立即提交</button>
                </div>
             </div>
        </form>

js代码

<script>
    layui.use('table', function(){
        var table = layui.table,$ = layui.$;
        var height = 490; //固定表格高度
        //计算按钮的高度
        var btn_height = height /2 -44;
        $('.btn-height').css('padding-top',btn_height).css('text-align','center')
        
        //左边表格
        table.render({
            elem: '#left_tab'
            ,url: '${pageContext.request.contextPath}/manage/questionnaire/transfer'
            ,where:{ids:$("#ids1").val()}
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', 80, sort: true, fixed: true}
                ,{field:'problem', title: '题目'}
               
            ]]
            ,response: {
              statusName: 'flag' //数据状态的字段名称，默认：code
              ,statusCode: 200 //成功的状态码，默认：0
              ,msgName: 'message' //状态信息的字段名称，默认：msg
              ,countName:'totalCount' //数据总数的字段名称，默认：count
            } 
            ,request: {
              pageName: 'page.pageNo' //页码的参数名称，默认：page
              ,limitName: 'page.pageSize' //每页数据量的参数名，默认：limit
            } 
            ,id: 'left_table_id'
            ,page: true
            ,height: height
        });
        //右边表格
        table.render({
            elem: '#right_tab'
            ,url: '${pageContext.request.contextPath}/manage/questionnaire/transfer'
            ,where:{ids:$("#ids2").val()}
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', 80, sort: true, fixed: true}
                ,{field:'problem', title: '题目'}
             
            ]]
            ,method:'post'
            ,response: {
                  statusName: 'flag' //数据状态的字段名称，默认：code
                  ,statusCode: 200 //成功的状态码，默认：0
                  ,msgName: 'message' //状态信息的字段名称，默认：msg
                  ,countName:'totalCount' //数据总数的字段名称，默认：count
                } 
            ,request: {
                pageName: 'page.pageNo' //页码的参数名称，默认：page
                ,limitName: 'page.pageSize' //每页数据量的参数名，默认：limit
              } 
            ,data: []
            ,id: 'right_table_id'
            ,page: true
            ,height: height
        });

        layui.sessionData('tabData',{ key: 'ids1',value: $("#ids1").val().split(",") })
        layui.sessionData('tabData',{ key: 'ids2',value: $("#ids2").val().split(",") })
        var ids1 = layui.sessionData('tabData').ids1;
        var ids2 = layui.sessionData('tabData').ids2;
        console.log(ids1);
        console.log(ids2);
        
        //监听左表格选中
        table.on('checkbox(left)', function(obj){
            btnIf(getTableData('left_table_id'),'.left-btn')
        });
        //监听右表格选中
        table.on('checkbox(right)', function(obj){
            btnIf(getTableData('right_table_id'),'.right-btn')
        });
        //移动按钮是否隐藏显示
        function btnIf(data,btn){
            if(data && data.length){
                $(btn).removeClass('layui-btn-disabled')
            }else{
                $(btn).addClass('layui-btn-disabled')
            }
        }
        //公共方法
        function getTableData(id){
            var checkStatus = table.checkStatus(id)
                ,data = checkStatus.data;
            return data;
        }
        //重载左边表格
        function reloadTable() {debugger
            var ids1 = layui.sessionData('tabData').ids1;
            var id_str1 = ids1.join(',');
            var ids2 = layui.sessionData('tabData').ids2;
            var id_str2 = ids2.join(',');
            table.reload('left_table_id', {
                page:{curr:1}
                ,method:'post'
                ,where: {
                    ids: id_str1
                }
            });
            table.reload('right_table_id', {
                page:{curr:1}
                ,method:'post'
                ,where: {
                    ids: id_str2
                }
            });
        }
        //左按钮点击移动数据
        $('.left-btn').on('click',function(){
            if(!$(this).hasClass('layui-btn-disabled')){
                $('.left-btn,.right-btn').addClass('layui-btn-disabled')
                var data = getTableData('left_table_id');debugger
                //查询缓存2是否存在数据
                var ids2 = layui.sessionData('tabData').ids2;
                  //查询缓存1存在的数据
                var ids1 = layui.sessionData('tabData').ids1;
                $.each(data,function(k,v){
                    ids2.push(v.id)
                });
                $.each(data,function(k,v){
                    ids1.splice($.inArray(v.id.toString(),ids1),1) //删除选中的
                });
                //存储缓存2
                layui.sessionData('tabData',{key: 'ids2',value: ids2});
                //存储缓存1
                layui.sessionData('tabData',{key: 'ids1',value: ids1});
                reloadTable();
            }
        })
        //右按钮点击移动数据
        $('.right-btn').on('click',function () {
            if(!$(this).hasClass('layui-btn-disabled')){
                $('.left-btn,.right-btn').addClass('layui-btn-disabled')
                var data = getTableData('right_table_id');
                  //查询缓存2是否存在数据
                var ids2 = layui.sessionData('tabData').ids2;
                  //查询缓存1存在的数据
                var ids1 = layui.sessionData('tabData').ids1;
                $.each(data,function(k,v){
                    ids1.push(v.id)
                });
                $.each(data,function(k,v){
                    ids2.splice($.inArray(v.id,ids2),1) //删除选中的
                });
                //存储缓存2
                layui.sessionData('tabData',{key: 'ids2',value: ids2});
                //存储缓存1
                layui.sessionData('tabData',{key: 'ids1',value: ids1});
                reloadTable();
            }
        })
        //左表双击事件
        table.on('rowDouble(left)', function(obj){
            var ids1 = layui.sessionData('tabData').ids1;
            var ids2 = layui.sessionData('tabData').ids2;
            ids2.push(obj.data.id)
            ids1.splice($.inArray(obj.data.id,ids1),1) //删除选中的
            layui.sessionData('tabData',{ key: 'ids1',value: ids1 })
            layui.sessionData('tabData',{ key: 'ids2',value: ids2 })
            reloadTable()
        });
        //右表双击事件
        table.on('rowDouble(right)', function(obj){
            var ids1 = layui.sessionData('tabData').ids1;
            var ids2 = layui.sessionData('tabData').ids2;
            ids1.push(obj.data.id)
            ids2.splice($.inArray(obj.data.id,ids2),1) //删除选中的
            layui.sessionData('tabData',{ key: 'ids1',value: ids1 })
            layui.sessionData('tabData',{ key: 'ids2',value: ids2 })
            reloadTable()
        });
    });
</script>

注意传到后台的是已逗号分隔的id字符串，然后进行查询

如果无效果可能是button按钮没有加 type="button"

没有加会默认是submit提交重新原页面刷新

使用sessionData是临时数据，刷新页面就会重置，如果希望一直存在

使用layui.data('tabData',{})方法