110 lines
3.8 KiB
HTML
110 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>layUI穿梭框</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, maximum-scale=1"/>
|
|
<link rel="stylesheet" href="../layui-v2.8.18/layui/css/layui.css" media="all"/>
|
|
</head>
|
|
<body>
|
|
<div class="layui-btn-container" style="margin-left: 40%">
|
|
<button type="button" class="layui-btn" lay-demotransferactive="getData">
|
|
保存
|
|
</button>
|
|
</div>
|
|
<div id="test7" class="demo-transfer"></div>
|
|
</body>
|
|
|
|
<script src="../js/jquery/jquery-3.6.0.js"></script>
|
|
<script src="../layui-v2.8.18/layui/layui.js"></script>
|
|
<script>
|
|
layui.use(["transfer", "layer", "util"], function () {
|
|
var $ = layui.$,
|
|
transfer = layui.transfer,
|
|
layer = layui.layer,
|
|
util = layui.util;
|
|
|
|
//模拟数据
|
|
var data1 = [
|
|
{ value: "1", title: "李白" },
|
|
{ value: "2", title: "杜甫" },
|
|
{ value: "3", title: "苏轼" },
|
|
{ value: "4", title: "李清照" },
|
|
{ value: "5", title: "鲁迅", disabled: true },
|
|
{ value: "6", title: "巴金" },
|
|
{ value: "7", title: "冰心" },
|
|
{ value: "8", title: "矛盾" },
|
|
{ value: "9", title: "贤心" },
|
|
];
|
|
|
|
var data2 = ["6", "7"];
|
|
var values = data2;
|
|
|
|
//实例调用
|
|
transfer.render({
|
|
elem: "#test7",
|
|
data: data1,
|
|
id: "key123", //定义唯一索引
|
|
width: 300, //定义宽度
|
|
height: 500, //定义高度
|
|
showSearch: true, //显示搜索框
|
|
title: ["未选人员", "已选人员"],
|
|
value: data2, //右侧数据直接初始化
|
|
onchange: function (data, index) {
|
|
var arrD = new Array();
|
|
$.each(data, function (k, v) {
|
|
arrD.push(v.title);
|
|
});
|
|
var name = arrD.join(",");
|
|
},
|
|
});
|
|
|
|
//批量办法定事件 -----保存方法
|
|
util.event("lay-demoTransferActive", {
|
|
getData: function (othis) {
|
|
var getData = transfer.getData("key123"); //获取右侧数据
|
|
var ids = new Array();
|
|
var titles = new Array();
|
|
for (var i = 0; i < getData.length; i++) {
|
|
ids.push(getData[i].value);
|
|
titles.push(getData[i].title);
|
|
|
|
}
|
|
if (ids.sort().toString() == values.sort().toString()) {
|
|
return layer.msg("穿梭配置没有改变，请勿重复提交！", { icon: 5 });
|
|
}
|
|
layer.confirm("确定要修改穿梭配置吗？", function (index) {
|
|
alert(titles);
|
|
editVerify(ids);
|
|
});
|
|
},
|
|
});
|
|
|
|
//提交后台
|
|
function editVerify(ids) {
|
|
$.ajax({
|
|
type: "POST",
|
|
traditional: true,
|
|
data: { ids: ids },
|
|
url: "${pageContext.request.contextPath}/autoVerify/editVerify",
|
|
success: function (result) {
|
|
var resultContent = result.msg;
|
|
var resultSuccess = result.success;
|
|
layer.open({
|
|
content: resultContent,
|
|
btn: ["确定"],
|
|
yes: function (index, layero) {
|
|
if (true == resultSuccess) {
|
|
window.location.reload(); //刷新页面
|
|
}
|
|
layer.close(index);
|
|
},
|
|
});
|
|
},
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</html> |