点击收藏弹出窗口
图片.png
弹出窗口如下：
首先是点击触发事件：
$("#collectionButton").click(function(){
layer.open({
type: 2,
//title: '收藏管理 (考生姓名：张无忌)',
title: '收藏管理 <span style="color: red; font-size: large;" >'+'(考生姓名：'+studentName+')'+'</span>', //将姓名设置为红色
shadeClose: true, //弹出框之外的地方是否可以点击
offset: '10%',
area: ['60%', '80%'],
content: '/gkzytb/plan1?studentId='+studentId
// content: '/gkzytb/franchiser/rigthColumnJsonList'
});
});
中转的controller，通过此controller来跳转到一个页面，在这个页面渲染layer的table表格
package com.thinkgem.jeesite.modules.volunteer.web;
import com.thinkgem.jeesite.common.web.BaseController;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping(value = "${frontPath}")
public class CollectionController extends BaseController {
@RequestMapping(value = "/plan1")
public ModelAndView plan1(String studentId, ModelAndView modelAndView) {
modelAndView.addObject("studentId",studentId);
modelAndView.setViewName("modules/table/plan1");//跳转到这个jsp页面来渲染表格
return modelAndView;
}
}
plan1.jsp页面，在这个页面渲染jlayer.table表格
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内蒙古高考志愿规划-鄂尔多斯市微联网络科技有限责任公司</title>
<meta name="keywords" content="内蒙古高考志愿规划，原金钥匙高考志愿指导站，高考志愿填报，专业测评，生涯规划，高考提分，升学测评"/>
<meta name="description" content="内蒙古最专业高考志愿填报规划平台，历时八年钻研，采用三年数据精准定位，面对面一对一指导，网站系统，手工excel系统，模拟演练系统免费开放" />
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
</head>
<body>
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this">方案一</li>
<li>方案二</li>
<li>专业表</li>
<li>意向</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<table id="plan" lay-filter="plan"></table>
</div>
<div class="layui-tab-item">
<table id="plan2" lay-filter="plan2"></table>
</div>
<div class="layui-tab-item">专业表内容主题</div>
<div class="layui-tab-item">意向内容主题</div>
</div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript" src="/static/layui/layui.js" ></script>
<script>
$(function(){
layui.use('element', function(){
var element = layui.element;
});
layui.use('table', function(){
var table = layui.table;
//方案一
table.render({
elem: '#plan',
url: '/gkzytb/franchiser/univcollection1?studentId=${studentId}', //数据接口
cellMinWidth : 95, //全局定义所有常规单元格的最小宽度
page : true, //开启分页
height : "full-125", //设定容器高度
limits : [5,10,15,20], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
limit : 5, //每页显示的条数（默认：10）。值务必对应 limits 参数的选项。
id : "plan1Table", //设定容器唯一 id。###此处特别重要，一定不可以重复!!!
cols : [[ ////表头
{type: "checkbox", fixed:"left", width:50},
{field: 'familyName', title: '科类', minWidth:100, align:"center"},
{field: 'univBatchName', title: '批次', minWidth:200, align:'center'},
{field: 'score', title: '分数', align:'center'},
{field: 'number', title: '数量', align:'center'}
,{title: '操作', minWidth:175, templet:'#delete',fixed:"right",align:"center"}
]]
});
//监听工具条
table.on('tool(plan)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'detail'){ //查看
window.open('/gkzytb/franchiser/yxyx?univBatchId='+data.univBatchId+'&familyId='+data.familyId+'&studentId='+data.studentId+'&programme='+data.programme);
} else if(layEvent === 'del'){ //删除
layer.confirm('是否确认删除？', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
$.post("/gkzytb/zytbs/deletePlan1",{
univBatchId:data.univBatchId,
familyId:data.familyId,
studentId:data.studentId,
programme:data.programme
},
function (data) {
if (data.code == 0) {
alert("删除成功");
}else {
alert("删除失败");
}
});
});
}
});
//方案二
table.render({
elem: '#plan2',
url: '/gkzytb/franchiser/univcollection2?studentId=${studentId}', //数据接口
cellMinWidth : 95, //全局定义所有常规单元格的最小宽度
page : true, //开启分页
height : "full-125", //设定容器高度
limits : [5,10,15,20], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
limit : 5, //每页显示的条数（默认：10）。值务必对应 limits 参数的选项。
id : "plan1Table", //设定容器唯一 id。
cols : [[ ////表头
{type: "checkbox", fixed:"left", width:50},
{field: 'familyName', title: '科类', minWidth:100, align:"center"},
{field: 'univBatchName', title: '批次', minWidth:200, align:'center'},
{field: 'score', title: '分数', align:'center'},
{field: 'number', title: '数量', align:'center'}
,{title: '操作', minWidth:175, templet:'#delete',fixed:"right",align:"center"}
]]
});
//监听工具条
table.on('tool(plan)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'detail'){ //查看
window.open('/gkzytb/franchiser/yxyx?univBatchId='+data.univBatchId+'&familyId='+data.familyId+'&studentId='+data.studentId+'&programme='+data.programme);
} else if(layEvent === 'del'){ //删除
layer.confirm('是否确认删除？', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
$.post("/gkzytb/zytbs/deletePlan1",{
univBatchId:data.univBatchId,
familyId:data.familyId,
studentId:data.studentId,
programme:data.programme
},
function (data) {
if (data.code == 0) {
alert("删除成功");
}else {
alert("删除失败");
}
});
});
}
});
});
});
</script>
<script type="text/html" id="delete">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看方案</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>
