码迷,mamicode.com
首页 > 其他好文 > 详细

layui穿梭框使用

时间:2021-05-24 08:43:31      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ali   arch   定义   css   led   index   数据   else   tag   

《说明先引入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>

layui穿梭框使用

标签:ali   arch   定义   css   led   index   数据   else   tag   

原文地址:https://www.cnblogs.com/mkchenchao/p/14767106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!