<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>自定义列</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<!-- <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all"> -->
|
<!-- <link rel="stylesheet" href="../../css/layui.min.css"> -->
|
<link rel="stylesheet" href="/layui-v2.7.6/layui/css/layui.css">
|
</head>
|
<body>
|
<div class="layui-fluid">
|
<div class="layui-card">
|
<div class="layui-card-body">
|
<div id="transferTest" class="demo-transfer"></div>
|
<div class="layui-btn-container" style="margin-top: 20px;float: right;margin-right: 20px;">
|
<button type="button" class="layui-btn" lay-demotransferactive="saveCols">确定</button>
|
<button type="button" class="layui-btn" lay-demotransferactive="resetCols">重置列</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- <script src="../../layuiadmin/layui/layui.js"></script> -->
|
<!-- <script src="http://cdn.staticfile.org/layui/2.7.6/layui.min.js"></script> -->
|
<script src="/layui-v2.7.6/layui/layui.js"></script>
|
<script src="../../js/jquery-3.5.1.min.js"></script>
|
<script src="../../js/jquery.cookie.js"></script>
|
<script src="../../js/public.js"></script>
|
<script>
|
layui.config({
|
base: '../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index' //主入口模块
|
}).use(['transfer', 'layer', 'util'], function() {
|
var transfer = layui.transfer
|
,layer = layui.layer
|
,util = layui.util
|
,index1 = parent.layer.getFrameIndex(window.name);
|
|
var Href = getQueryString("Href");
|
var ColsSysArr = decodeURIComponent(getQueryString("ColsSysArr"));
|
|
var colsSysData
|
var colsUserData
|
var param={
|
Href:Href,
|
ColsSysArr:ColsSysArr
|
};
|
sendData(IP + "/Sys/GetTableColsSys", param, 'post', function(res) {
|
if (res.code == 0) { //成功
|
colsSysData=eval(res.data.colsSys);
|
colsUserData=eval(res.data.colsUser);
|
let selectedTransfers = [];
|
//渲染
|
transferRightSort(colsSysData,'value',colsUserData)
|
transfer.render({
|
elem: '#transferTest' //绑定元素
|
, title: ['可添加的列', '已添加的列（可上下拖动调整顺序）']
|
, data: colsSysData
|
,value:colsUserData
|
,width: 400
|
,height:520
|
, id: 'demo1' //定义索引
|
, onchange: function (data, index) {
|
if (index === 0) {
|
// 加入
|
selectedTransfers.push(data)
|
} else {
|
// 移除
|
selectedTransfers.splice(data)
|
}
|
$("#transferTest div[data-index='1'] ul li").attr("draggable", "true");
|
//console.log(data); //得到当前被穿梭的数据
|
//console.log(index); //如果数据来自左边，index 为 0，否则为 1
|
}
|
});
|
$("#transferTest div[data-index='1'] ul li").attr("draggable", "true");
|
loadDrag()
|
} else { //不成功
|
layer.msg('获取物品信息失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function() {});
|
}
|
});
|
|
//批量办法定事件
|
util.event('lay-demoTransferActive', {
|
saveCols: function(othis){
|
var getData = transfer.getData('demo1'); //获取右侧数据
|
var param={
|
Href:Href,
|
ColsJson:JSON.stringify(getData),
|
ColsSysArr:ColsSysArr
|
};
|
sendData(IP + "/Sys/SaveClosUser", param, 'post', function(res){
|
if(res.code === 0){
|
parent.location.reload();
|
parent.layer.close(index1);
|
}else { //不成功
|
layer.msg('自定义列失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function() {});
|
}
|
});
|
},
|
resetCols: function(othis){
|
var param={
|
Href:Href,
|
ColsJson:'',
|
ColsSysArr:''
|
};
|
sendData(IP + "/Sys/SaveClosUser", param, 'post', function(res){
|
if(res.code === 0){
|
parent.location.reload();
|
parent.layer.close(index1);
|
}else { //不成功
|
layer.msg('重置列失败！', {
|
icon: 2,
|
time: 2000 //2秒关闭（如果不配置，默认是3秒）
|
}, function() {});
|
}
|
});
|
}
|
|
});
|
|
//layui.transfer 实现穿梭框选择完后，可鼠标拖动调整选中后的列表顺序
|
function loadDrag() {
|
let list = document.querySelector("#transferTest div[data-index='1'] ul")
|
let currentLi
|
list.addEventListener('dragstart', (e) => {
|
e.dataTransfer.effectAllowed = 'move'
|
currentLi = e.target
|
// setTimeout(() => {
|
// currentLi.classList.add('moving')
|
// })
|
})
|
|
list.addEventListener('dragenter', (e) => {
|
e.preventDefault()
|
if (e.target === currentLi || e.target === list) {
|
return
|
}
|
let liArray = Array.from(list.childNodes)
|
let currentIndex = liArray.indexOf(currentLi)
|
let targetIndex = liArray.indexOf(e.target)
|
//禁止拖动和取消
|
if(currentLi.firstChild.disabled || e.target.firstChild.disabled){
|
return;
|
}
|
if (currentIndex < targetIndex) {
|
if (e.target.nodeName === 'LI') {
|
list.insertBefore(currentLi, e.target.nextElementSibling)
|
}
|
} else {
|
if (e.target.nodeName === 'LI') {
|
list.insertBefore(currentLi, e.target)
|
}
|
}
|
})
|
// list.addEventListener('dragover', (e) => {
|
// e.preventDefault()
|
// })
|
// list.addEventListener('dragend', (e) => {
|
// currentLi.classList.remove('moving')
|
// })
|
}
|
|
//layui 解决穿梭框transfer右侧数据赋值排序错误
|
function transferRightSort(arr1, attr, arr2) {
|
var arr = [];
|
for (var i = 0; i < arr2.length; i++) {
|
var index = ArrayIndexOF(arr1,attr,arr2[i]);
|
arr.push(arr1[index]);
|
arr1.splice($.inArray(arr1[index],arr1),1);
|
}
|
arr1.push.apply(arr1,arr);
|
}
|
|
function ArrayIndexOF(arr, attr, value) {
|
//检测value在arr中出现的位置
|
for(var i = 0; i < arr.length; i++) {
|
if(arr[i][attr] === value) {
|
return i;
|
}
|
}
|
return -1;
|
}
|
|
});
|
</script>
|
</body>
|
</html>
|
