layui穿梭框使用
作者：互联网
《说明先引入layui组件框架》
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>穿梭框组件</title>
<link rel="stylesheet" href="${ctx}/layui/css/layui.css">
</head>
<body>
<div id="transfer" style="margin-top:25px;position:absolute;">
<div class="layui-card">
<div class="layui-card layui-form" lay-filter="component-form-element">
<div id="test1" class="demo-transfer"></div>
</div>
<div class="layui-btn-container" align="center">
<button type="button" class="layui-btn" lay-demotransferactive="getData">保存</button>
<button type="button" class="layui-btn" lay-demotransferactive="reload">重置</button>
</div>
</div>
</div>
<script src="${ctx}/layui/layui.js"></script>
<script>
layui.use(['transfer', 'layer', 'util'], function(){
var transfer = layui.transfer;
var $ = layui.$;
var layer = layui.layer;
var util = layui.util;
var userId='${sessionInfo.xxx}';
var roleId='${sessionInfo.xxx}';
var infoid='${sessionInfo.xxx}';
var dataLeft=new Array();//左边的数据
var dataRight=new Array();//右边的数据
$.ajax({
type: "post",
url: "${ctx}/xxx/xxx/xxx",
data: {userId:userId, infoid:infoid, roleId:roleId},
datatype: "json",
success: function (succ) {
if (succ.code == 0) {
dataRight=succ.rows
dataLeft=succ.proIds
//基础效果
transfer.render({
elem: '#test1'
,data: dataRight
,width:550
,height:500
,parseData: function (dataRight) {
return {
"value": dataRight.proId //数据值
, "title": dataRight.proName //数据标题
// , "disabled": res.disabled //是否禁用
// , "checked": res.checked //是否选中
}
}
,title: ['未选项目', '已选项目']
,id: 'key123' //定义唯一索引
,showSearch: true
,value:dataLeft
})
} else {
layer.msg(succ.msg);
}
}
});
//批量办法定事件
util.event('lay-demoTransferActive', {
getData: function(othis){
/* var index = layer.open(); */
/* var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 */
var getData = transfer.getData('key123'); //获取右侧数据
/* layer.alert(JSON.stringify(getData)); */
var proIds = [];
for (var p in getData) {//遍历json数组时，这么写p为索引，0,1
/* alert(getData[p].value); */
proIds.push(getData[p].value)
/* alert(proIds); */
}
$.ajax({
type: "post",
url: "${ctx}/xxx/xxx/xxx",
datatype: "json",
data: {userId:userId, proIds:proIds.toString()},
success: function (succ) {
if (succ.code == 0) {
/* parent.layer.close(index); //再执行关闭 */
window.parent.closeMsgWindow();
} else {
/* parent.layer.close(index); //再执行关闭 */
layer.msg(succ.msg);
}
}
});
}
,reload:function(){
//实例重载
transfer.reload('key123', {
data: dataRight
,parseData: function (dataRight) {
return {
"value": dataRight.proId //数据值
, "title": dataRight.proName //数据标题
// , "disabled": res.disabled //是否禁用
// , "checked": res.checked //是否选中
}
}
,value:dataLeft
,showSearch: true
})
}
});
});
</script>
</body>
</html>
标签：layer,dataRight,layui,xxx,succ,穿梭,使用,var 来源： https://www.cnblogs.com/mkchenchao/p/14767106.html