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"></i> </button> </div> <div > <button class="layui-btn layui-btn-disabled right-btn" type="button"> <i class="layui-icon"></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', width: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', width: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',{})方法