使用layui table达到穿梭框效果

效果"/>

使用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>