點擊收藏彈出窗口
圖片.png
彈出窗口如下：
首先是點擊觸發(fā)事件：
$("#collectionButton").click(function(){
layer.open({
type: 2,
//title: '收藏管理 (考生姓名：張無忌)',
title: '收藏管理 <span style="color: red; font-size: large;" >'+'(考生姓名：'+studentName+')'+'</span>', //將姓名設(shè)置為紅色
shadeClose: true, //彈出框之外的地方是否可以點擊
offset: '10%',
area: ['60%', '80%'],
content: '/gkzytb/plan1?studentId='+studentId
// content: '/gkzytb/franchiser/rigthColumnJsonList'
});
});
中轉(zhuǎn)的controller引润，通過此controller來跳轉(zhuǎn)到一個頁面，在這個頁面渲染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");//跳轉(zhuǎn)到這個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>內(nèi)蒙古高考志愿規(guī)劃-鄂爾多斯市微聯(lián)網(wǎng)絡(luò)科技有限責(zé)任公司</title>
<meta name="keywords" content="內(nèi)蒙古高考志愿規(guī)劃，原金鑰匙高考志愿指導(dǎo)站帮辟，高考志愿填報速址，專業(yè)測評，生涯規(guī)劃由驹，高考提分芍锚，升學(xué)測評"/>
<meta name="description" content="內(nèi)蒙古最專業(yè)高考志愿填報規(guī)劃平臺，歷時八年鉆研，采用三年數(shù)據(jù)精準(zhǔn)定位并炮，面對面一對一指導(dǎo)默刚，網(wǎng)站系統(tǒng)，手工excel系統(tǒng)逃魄，模擬演練系統(tǒng)免費開放" />
<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>專業(yè)表</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">專業(yè)表內(nèi)容主題</div>
<div class="layui-tab-item">意向內(nèi)容主題</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}', //數(shù)據(jù)接口
cellMinWidth : 95, //全局定義所有常規(guī)單元格的最小寬度
page : true, //開啟分頁
height : "full-125", //設(shè)定容器高度
limits : [5,10,15,20], //每頁條數(shù)的選擇項荤西，默認(rèn)：[10,20,30,40,50,60,70,80,90]。
limit : 5, //每頁顯示的條數(shù)（默認(rèn)：10）伍俘。值務(wù)必對應(yīng) limits 參數(shù)的選項邪锌。
id : "plan1Table", //設(shè)定容器唯一 id。###此處特別重要癌瘾，一定不可以重復(fù)!!!
cols : [[ ////表頭
{type: "checkbox", fixed:"left", width:50},
{field: 'familyName', title: '科類', minWidth:100, align:"center"},
{field: 'univBatchName', title: '批次', minWidth:200, align:'center'},
{field: 'score', title: '分?jǐn)?shù)', align:'center'},
{field: 'number', title: '數(shù)量', align:'center'}
,{title: '操作', minWidth:175, templet:'#delete',fixed:"right",align:"center"}
]]
});
//監(jiān)聽工具條
table.on('tool(plan)', function(obj){ //注：tool是工具條事件名觅丰，test是table原始容器的屬性 lay-filter="對應(yīng)的值"
var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)
var layEvent = obj.event; //獲得 lay-event 對應(yīng)的值（也可以是表頭的 event 參數(shù)對應(yīng)的值）
var tr = obj.tr; //獲得當(dāng)前行 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('是否確認(rèn)刪除？', function(index){
obj.del(); //刪除對應(yīng)行（tr）的DOM結(jié)構(gòu)柳弄，并更新緩存
layer.close(index);
//向服務(wù)端發(fā)送刪除指令
$.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}', //數(shù)據(jù)接口
cellMinWidth : 95, //全局定義所有常規(guī)單元格的最小寬度
page : true, //開啟分頁
height : "full-125", //設(shè)定容器高度
limits : [5,10,15,20], //每頁條數(shù)的選擇項舶胀，默認(rèn)：[10,20,30,40,50,60,70,80,90]概说。
limit : 5, //每頁顯示的條數(shù)（默認(rèn)：10）碧注。值務(wù)必對應(yīng) limits 參數(shù)的選項。
id : "plan1Table", //設(shè)定容器唯一 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: '分?jǐn)?shù)', align:'center'},
{field: 'number', title: '數(shù)量', align:'center'}
,{title: '操作', minWidth:175, templet:'#delete',fixed:"right",align:"center"}
]]
});
//監(jiān)聽工具條
table.on('tool(plan)', function(obj){ //注：tool是工具條事件名萍丐，test是table原始容器的屬性 lay-filter="對應(yīng)的值"
var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)
var layEvent = obj.event; //獲得 lay-event 對應(yīng)的值（也可以是表頭的 event 參數(shù)對應(yīng)的值）
var tr = obj.tr; //獲得當(dāng)前行 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('是否確認(rèn)刪除？', function(index){
obj.del(); //刪除對應(yīng)行（tr）的DOM結(jié)構(gòu)放典，并更新緩存
layer.close(index);
//向服務(wù)端發(fā)送刪除指令
$.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>
