当前位置：网站首页>Meeting OA project (III) -- my meeting (meeting seating and submission for approval)
Meeting OA project (III) -- my meeting (meeting seating and submission for approval)
2022-07-26 09:55:00 【An Li Jiu Ge】
Catalog
Preface
The previous article shared the meeting OA My meeting function of the project Inquire about 、 Cancel the meeting . This article will improve my conference function .
There is a difficulty in my meeting function ------ Meeting row .
One 、 Demand analysis
Why is there a meeting seating function ？
The position of the participants is exquisite , Not just sitting .
Invite people to dinner , The guest sits in the main seat ; Then the most important person in the meeting , People who make decisions should sit in the main position .
Meeting row ：
A meeting , The number of participants 、 How to arrange seats is exquisite .
Pictured ： I can sit here for four 、 Sit opposite three . Or there is no one on this side .
The leader suddenly wants to listen to the meeting , Is it necessary to add him to the meeting .
therefore , For row seats . Click row , The interface needs to have participants 、 Attendants and hosts . meanwhile 、 You can add seats .
The seat arrangement can drag the position .
Before sending for trial , We need to arrange our seats , There is no row seat. If you sit in the wrong position , The approver will offend others .
So there are no seats Cannot be submitted for approval .
Two 、 preparation
We need to arrange seats for the meeting , And the row seat can be dragged . Should we write the corresponding function by ourselves or search for information ？
To improve development efficiency , My choice is to find jQuery Is there a corresponding plug-in , Modify it , Change it to meet the needs of our project .
Which found jQuery Of Portal plug-in unit . But there is a big gap with our project needs .
the other one , The information found is more in line with our project .
Will find , every last “ seat ” Too small and overlapping . If there are many people to have a meeting , We can't tell . We make a series of modifications to it
It is much more suitable after modification . Splice the material with our code .
SQL analysis of sentences ：
We need to find out who will attend the corresponding meeting .
Participants ： Participants 、 Non voting attendees 、 host
find_in_set And in The difference between
stay mysql in in Can include a specified number , and find_in_set() For specific data types
3、 ... and 、 code
1、 Background coding
UserDao
package com.zking.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class UserDao extends BaseDao<User> {
public User login(User user) throws Exception {
String sql = "select * from t_oa_user where loginName = '"
+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'";
// according to sql Query qualified users , Usually only one piece of data is returned
List<User> users = super.executeQuery(sql, User.class, null);
return users == null || users.size() == 0 ? null : users.get(0);
// return super.executeQuery(sql, clz, pageBean);
}
// Query user information and corresponding roles , The role is through case when from
public List<Map<String, Object>> list(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "SELECT *\r\n" +
",(case rid \r\n" +
"when 1 then ' Administrators ' \r\n" +
"when 2 then ' The initiator ' \r\n" +
"when 3 then ' Approver ' \r\n" +
"when 4 then ' participants ' \r\n" +
"when 5 then ' Conference room manager ' \r\n" +
"else ' other ' end \r\n" +
") roleName \r\n" +
"from \r\n" +
"t_oa_user where 1 = 1 ";
String name = user.getName();
if(StringUtils.isNotBlank(name)) {
sql += " and name like '%"+name+"%'";
}
// Use when the attributes of the entity class completely include the column segments queried by the database
// super.executeQuery(sql, User.class, pageBean)
// return List<Map<String, Object>>, The corresponding is linked list query , A single entity class object does not completely contain the column segments of the query
return super.executeQuery(sql, pageBean);
}
// Query all users to bind the multi-function drop-down box
public List<Map<String, Object>> queryUserAll(User user,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql = "select id as value,name from t_oa_user";
return super.executeQuery(sql, pageBean);
}
public int add(User user) throws Exception {
String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
}
public int del(User user) throws Exception {
String sql = "delete from t_oa_user where id = ?";
return super.executeUpdate(sql, user, new String[] {"id"});
}
public int edit(User user) throws Exception {
String sql = "update t_oa_user set name = ?,loginName = ? ,pwd = ? where id = ?";
return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
}
public List<User> queryUserByMeetingId(Long meetingId) throws Exception{
String sql="select * from t_oa_user where FIND_IN_SET(id,"
+ "(select concat(canyuze,',',liexize,',',zhuchiren) uid "
+ "from t_oa_meeting_info where id="+meetingId+"))";
return super.executeQuery(sql, User.class, null);
}
}
UserAction
package com.zking.web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.BaseDao;
import com.zking.util.CommonUtils;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class UserAction extends ActionSupport implements ModelDriver<User> {
private User user = new User();
private UserDao userDao = new UserDao();
public String login(HttpServletRequest req, HttpServletResponse resp) {
try {
User u = userDao.login(user);
// The user record is found through the account name and password
if (u != null) {
// ResponseUtil.writeJson(resp, new R()
// .data("code", 200)
// .data("msg", " success "));
ResponseUtil.writeJson(resp, R.ok(200, " Login successful "));
req.getSession().setAttribute("user", u);
} else {
ResponseUtil.writeJson(resp, R.error(0, " Wrong username and password "));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " Wrong username and password "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
// User query
public String list(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> users = userDao.list(user, pageBean);
// Be careful ：layui Format of data table in
ResponseUtil.writeJson(resp, R.ok(0, " User data query succeeded " , pageBean.getTotal(), users));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " User data query failed "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
// Query all users to bind the multi-function drop-down box
public String queryUserAll(HttpServletRequest req, HttpServletResponse resp) {
try {
List<Map<String, Object>> users = userDao.queryUserAll(user, null);
// Be careful ：layui Format of data table in
ResponseUtil.writeJson(resp, R.ok(0, " Multi function drop-down box data query succeeded " , users));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " Multi function drop-down box data query failed "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
// rs yes sql Number of lines affected by statement execution
int rs = userDao.add(user);
if(rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, " User data added successfully "));
}else {
ResponseUtil.writeJson(resp, R.error(0, " Failed to add user data "));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " Failed to add user data "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
public String del(HttpServletRequest req, HttpServletResponse resp) {
try {
// rs yes sql Number of lines affected by statement execution
int rs = userDao.del(user);
if(rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, " User data deleted successfully "));
}else {
ResponseUtil.writeJson(resp, R.error(0, " User data deletion failed "));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " User data deletion failed "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
public String edit(HttpServletRequest req, HttpServletResponse resp) {
try {
// rs yes sql Number of lines affected by statement execution
int rs = userDao.edit(user);
if(rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, " User data modified successfully "));
}else {
ResponseUtil.writeJson(resp, R.error(0, " User data modification failed "));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " User data modification failed "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
public String queryUserByMeetingId(HttpServletRequest req,HttpServletResponse resp) throws Exception{
try {
String meetingId = req.getParameter("meetingId");
List<User> users = userDao.queryUserByMeetingId(Long.valueOf(meetingId));
CommonUtils.toJson(true, users, resp);
} catch (Exception e) {
CommonUtils.toJson(false," Failed to get the information of participants ", resp);
e.printStackTrace();
}
return null;
}
@Override
public User getModel() {
return user;
}
}
meetingInfoDao
package com.zking.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.zking.entity.MeetingInfo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class MeetingInfoDao extends BaseDao<MeetingInfo>{
// Conference information added
public int add(MeetingInfo t) throws Exception {
String sql = "insert into t_oa_meeting_info"
+ "(title,content,canyuze,liexize,zhuchiren,location,startTime,endTime,remark) "
+ "values(?,?,?,?,?,?,?,?,?)";
return super.executeUpdate(sql, t, new String[] {"title","content","canyuze","liexize","zhuchiren","location","startTime","endTime","remark"});
}
// My meeting 、 Other menus will be used .
private String getSQL() {
return "SELECT a.id,a.title,a.content,a.canyuze,a.liexize,a.zhuchiren,b.`name`,a.location\r\n" +
",DATE_FORMAT(a.startTime,'%Y-%m-%d %H:%i:%s') as startTime\r\n" +
",DATE_FORMAT(a.endTime,'%Y-%m-%d %H:%i:%s') as endTime\r\n" +
",a.state\r\n" +
",(case a.state\r\n" +
"when 0 then ' Cancel the meeting '\r\n" +
"when 1 then ' newly build '\r\n" +
"when 2 then ' To audit '\r\n" +
"when 3 then ' rejected '\r\n" +
"when 4 then ' To be opened '\r\n" +
"when 5 then ' Have in hand '\r\n" +
"when 6 then ' Start voting '\r\n" +
"else ' At the end of the meeting ' end\r\n" +
") as meetingState\r\n" +
",a.seatPic,a.remark,a.auditor,c.`name` as auditorName\r\n" +
"FROM t_oa_meeting_info a\r\n" +
"inner join t_oa_user b on a.zhuchiren = b.id\r\n" +
"left JOIN t_oa_user c on a.auditor = c.id where 1=1 ";
}
// My meeting
public List<Map<String, Object>> myInfos(MeetingInfo info, PageBean pageBean) throws Exception {
String sql = getSQL();
String title = info.getTitle();
if(StringUtils.isNotBlank(title)) {
sql += " and title like '%"+title+"%'";
}
// According to the current login user ID As a condition of the host field
sql+=" and zhuchiren="+info.getZhuchiren();
// According to the meeting ID null
// sql+=" order by a.id desc";
System.out.println(sql);
return super.executeQuery(sql, pageBean);
}
// Cancel the meeting
public int updateState(MeetingInfo info) throws Exception {
String sql = "update t_oa_meeting_info set state = 0 where id = ?";
return super.executeUpdate(sql, info,new String[] {"id"} );
}
// According to the meeting ID Update the seating pictures of the meeting
public int updateSeatPicById(MeetingInfo info) throws Exception {
String sql="update t_oa_meeting_info set seatPic=? where id=?";
return super.executeUpdate(sql, info, new String[] {"seatPic","id"});
}
// According to the meeting ID Update the approver of the meeting （ submit for censorship ）
public int updateAuditorById(MeetingInfo info) throws Exception {
String sql="update t_oa_meeting_info set auditor=?,state=2 where id=?";
return super.executeUpdate(sql, info, new String[] {"auditor","id"});
}
}
meetingInfoAction
package com.zking.web;
import java.util.Date;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.ConvertUtils;
import com.zking.dao.MeetingInfoDao;
import com.zking.entity.MeetingInfo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.Base64ImageUtils;
import com.zking.util.MyDateConverter;
import com.zking.util.PageBean;
import com.zking.util.PropertiesUtil;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class MeetingInfoAction extends ActionSupport implements ModelDriver<MeetingInfo>{
private MeetingInfo info = new MeetingInfo();
private MeetingInfoDao infoDao = new MeetingInfoDao();
@Override
public MeetingInfo getModel() {
// Register a converter
ConvertUtils.register(new MyDateConverter(), Date.class);
return info;
}
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
// rs yes sql Number of lines affected by statement execution
int rs = infoDao.add(info);
if(rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, " Conference information data added successfully "));
}else {
ResponseUtil.writeJson(resp, R.error(0, " Failed to add conference information data "));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " Failed to add conference information data "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
// My meeting
public String myInfos(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> list = infoDao.myInfos(info, pageBean);
// Be careful ：layui Format of data table in
ResponseUtil.writeJson(resp, R.ok(0, " My meeting data query succeeded " , pageBean.getTotal(), list));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " My meeting data query failed "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
// Cancel the meeting
public String del(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
int upd = infoDao.updateState(info);
// Be careful ：layui Format of data table in
if(upd > 0) {
ResponseUtil.writeJson(resp, R.ok(200, " The meeting was cancelled successfully "));
}else {
ResponseUtil.writeJson(resp, R.error(0, " Meeting cancellation failed "));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " Meeting cancellation failed "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
// According to the meeting id Update row seats
public String updateSeatPicById(HttpServletRequest req,
HttpServletResponse resp) throws Exception{
try {
//1. Save the seating image to the specified location and get the image path
//1) Define the path to save the meeting pictures
String serverPath=PropertiesUtil.getValue("serverPath");
String dirPath=PropertiesUtil.getValue("dirPath");
//2) Define the name of the meeting seating picture ( Finally, save it to the database table ), for example ：/uploads/xxxxx.jpg
String fileName=UUID.randomUUID().toString().replace("-", "")+".jpg";
//3) Splice into a complete path
String realPath=dirPath+fileName;
//4) Save the picture to the specified location
Base64ImageUtils.GenerateImage(info.getSeatPic().replace("data:image/png;base64,",""), realPath);
//2. According to the meeting ID Modify the meeting picture information
info.setSeatPic(serverPath+fileName);
infoDao.updateSeatPicById(info);
ResponseUtil.writeJson(resp, R.ok(200, " Update the seating pictures of the meeting successfully "));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " Failed to update the seating image of the meeting "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
// According to the meeting ID Update the approver of the meeting （ submit for censorship ）
public String updateAuditorById(HttpServletRequest req, HttpServletResponse resp) {
try {
int rs = infoDao.updateAuditorById(info);
if (rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, " The meeting was approved successfully "));
}else {
ResponseUtil.writeJson(resp, R.error(0, " Meeting approval failed "));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, " Meeting approval failed "));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
}
2、 Front end coding
seatPic.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="${pageContext.request.contextPath }/"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="static/js/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/js/layui/layui.js"></script>
<script type="text/javascript" src="static/js/plugins/html2canvas/html2canvas.js"></script>
<title> Meeting seating </title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100%;
/* background: red; */
}
.tips {
/* position: absolute; */
background: pink;
display: inline-block;
height: 60px;
/* width: 60px; */
line-height: 60px;
text-align: center;
margin: 5px;
padding: 0 10px;
}
.add {
position: fixed;
right: 10px;
top: 10px;
display:inline;
}
#tu {
width: 100%;
height: 100%;
/* background: lightblue; */
/*background: url('u=3318199716,2583790385&fm=26&gp=0.jpg');*/
}
.layui-input{
height:30px;
}
</style>
<body id="screen_body">
<div id="tu"></div>
<!-- Don't use layui Form inline mode , It can lead to canvas Of toDataURL() The data is data:, -->
<div class="add">
<div style="display:inline-block;">
<input id="dan_input" type="text" value="" class="layui-input">
</div>
<div style="display:inline-block;">
<button onclick="return addDanMu()" class="layui-btn layui-btn-sm"> Add seats </button><input id="jie_input" type="button" class="layui-btn layui-btn-sm" value=' download '>
</div>
</div>
</body>
<script type="text/javascript">
var $id = function(id) {
return document.getElementById(id);
}
// Drag and drop in the meeting row
var dragF = {
locked: false,
lastObj: undefined,
drag: function(obj) {
$id(obj).onmousedown = function(e) {
var e = e ? e : window.event;
if (!window.event) {
e.preventDefault();
} /* Block annotation <a href='/site/js-5791-1.html' target='_blank'><u> browser </u></a> Drag down a,img Default event for */
dragF.locked = true;
$id(obj).style.position = "absolute";
$id(obj).style.zIndex = "100";
if (dragF.lastObj && dragF.lastObj != $id(obj)) { /* Multi element dragging needs to restore the last element state */
dragF.lastObj.style.zIndex = "1";
}
dragF.lastObj = $id(obj);
var tempX = $id(obj).offsetLeft;
var tempY = $id(obj).offsetTop;
dragF.x = e.clientX;
dragF.y = e.clientY;
document.onmousemove = function(e) {
var e = e ? e : window.event;
if (dragF.locked == false) return false;
$id(obj).style.left = tempX + e.clientX - dragF.x + "px";
$id(obj).style.top = tempY + e.clientY - dragF.y + "px";
if (window.event) {
e.returnValue = false;
} /* prevent ie Next a,img Default event for */
}
document.onmouseup = function() {
dragF.locked = false;
}
}
}
}
</script>
<script type="text/javascript">
var layer;
layui.use(['layer'],function(){
layer=layui.layer;
// Initialize meeting seating ： According to the meeting ID Get the names of all participants （ host + Participants + People in attendance ）
initMeetingUsers();
// Draw pictures of meeting seating
$("#jie_input").on("click", function(event) {
$('.add').hide();
event.preventDefault();
html2canvas(document.getElementById("screen_body")).then(function(canvas) {
var dataUrl = canvas.toDataURL();
console.log(dataUrl);
var param = {};
param['seatPic'] = dataUrl;
param['id'] = '${param.id}';
param['methodName']='updateSeatPicById';
console.log(param);
// Here you need to upload the pictures of meeting seating
$.post('${pageContext.request.contextPath }/info.action',param,function(rs){
if(rs.success){
// Get the current status first iframe Layer index
var index = parent.layer.getFrameIndex(window.name);
// And then close it
parent.layer.close(index);
// Call the refresh method of the parent page
parent.query();
}else{
layer.msg(rs.msg,{icon:5},function(){});
}
},'json');
});
});
});
function initMeetingUsers(){
$.getJSON('${pageContext.request.contextPath }/user.action',{
'methodName':'queryUserByMeetingId',
'meetingId':'${param.id}'
},function(rs){
console.log(rs);
let data=rs.data;
$.each(data,function(i,e){
$('#dan_input').val(e.name);
addDanMu();
});
});
}
// Add meeting seating
function addDanMu() {
var dan = document.getElementById("dan_input").value;
if (dan == "") {
alert(" Please enter the seat number first ~");
return false;
} else {
document.getElementById("dan_input").value = ""; // Empty Bullet screen input box
// var br = document.createElement("BR"); // <br />
var node = document.createElement("DIV"); // <div>
var tipsArr = document.getElementsByClassName('tips');
var i;
// console.log(parseInt(tipsArr[tipsArr.length-1].id.substr(4))+1);
if (tipsArr.length == 0) {
i = 1
} else {
i = parseInt(tipsArr[tipsArr.length - 1].id.substr(4)) + 1;
}
// var aNode = document.createElement("P"); // <p>
node.setAttribute("class", "tips");
node.setAttribute("id", "tips" + i);
node.setAttribute("onmouseover", "dragF.drag('tips" + i + "');");
var textnode = document.createTextNode(dan); // Create a Text node , A barrage of user input , Deposit in Created Element nodes <p> in
// aNode.appendChild(textnode);
node.appendChild(textnode);
// document.body.appendChild(br);
// document.body.appendChild(node);
document.getElementById("tu").appendChild(node);
return true;
}
}
</script>
</html>myMeeting.js
let layer,table,$,form;
var row;
layui.use(['layer','table','jquery','form'],function(){
layer=layui.layer,
table=layui.table,
form=layui.form,
$=layui.jquery;
initTable();
// Query events
$('#btn_search').click(function(){
query();
});
// Initialize approver
initFormSelects();
// submit for censorship
$('#btn_auditor').click(function(){
$.post('info.action',{
'methodName':'updateAuditorById',
'id':$('#meetingId').val(),
'auditor':$('#auditor').val()
},function(rs){
if(rs.success){
// close dialog boxes
layer.closeAll();
// Refresh List
query();
}else{
layer.msg(rs.msg,{icon:5},function(){});
}
},'json');
return false;
});
});
//1. Initialize the data table
function initTable(){
table.render({ // Perform rendering
elem: '#tb', // Specify the original table element selector （ recommend id Selectors ）
height: 400, // Custom height
loading: false, // Whether to load the bar （ Default true）
cols: [[ // Set the header
{field: 'id', title: ' Conference number ', width: 90},
{field: 'title', title: ' The title of the meeting ', width: 120},
{field: 'location', title: ' Place of meeting ', width: 140},
{field: 'startTime', title: ' Starting time ', width: 120},
{field: 'endTime', title: ' End time ', width: 120},
{field: 'meetingState', title: ' Meeting status ', width: 120},
{field: 'seatPic', title: ' Meeting row ', width: 120,
templet: function(d){
if(d.seatPic==null || d.seatPic=="")
return " Not yet seated ";
else
return "<img width='120px' src='"+d.seatPic+"'/>";
}
},
{field: 'auditorName', title: ' Approved by ', width: 120},
{field: '', title: ' operation ', width: 200,toolbar:'#tbar'},
]]
});
}
//2. Click to query
function query(){
table.reload('tb', {
url: 'info.action', // Request address
method: 'POST', // Request mode ,GET perhaps POST
loading: true, // Whether to load the bar （ Default true）
page: true, // Pagination or not
where: { // Set additional parameters for asynchronous data interface , Arbitrarily set
'methodName':'myInfos',
'zhuchiren':$('#zhuchiren').val(),
'title':$('#title').val(),
},
request: { // Custom paging request parameter name
pageName: 'page', // Parameter name of page number , Default ：page
limitName: 'rows' // Parameter name of data volume per page , Default ：limit
},
done: function (res, curr, count) {
console.log(res);
}
});
// Toolbar events
table.on('tool(tb)', function(obj){ // notes ：tool Is the toolbar event name ,test yes table Properties of the original container lay-filter=" Corresponding value "
row = obj.data; // Get current row data
var layEvent = obj.event; // get lay-event Corresponding value （ It can also be in the header event The corresponding value of the parameter ）
var tr = obj.tr; // Get the current line tr Of DOM object （ If any ）
console.log(row);
if(layEvent === 'seat'){ // Meeting row
open(row.id);
} else if(layEvent === 'send'){ // submit for censorship
if(row.seatPic==null || row.seatPic==""){
layer.msg(' Please complete the meeting seating first , Then submit for approval ！',function(){});
return false;
}
// Before opening the submission page , Finish the meeting first ID Assignment of
$('#meetingId').val(row.id);
openLayerAudit();
} else if(layEvent==="back"){ // Feedback details
openLayerFeedBack(row.id);
} else {
layer.confirm(' Are you sure to cancel the meeting ?', {icon: 3, title:' Tips '}, function(index){
$.post('info.action',{
'methodName':'del',
'id':row.id
},function(rs){
if(rs.success){
// Call the query method to refresh the data
query();
}else{
layer.msg(rs.msg,function(){});
}
},'json');
layer.close(index);
});
}
});
}
// Open the meeting seating dialog box
function open(id){
layer.open({
type: 2,
title: ' Meeting row ',
area: ['460px', '340px'], // Wide and high
skin: 'layui-layer-rim', // Style class name
content: 'jsp/meeting/seatPic.jsp?id='+id,
});
}
// Meeting submission for approval
function openLayerAudit(){
// Each time you open it, you will initialize the submitter and set the default value
$('#auditor').val("");
// You have to re render
form.render('select');
// Pop-up dialog box
layer.open({
type: 1,
title:' Meeting submission for approval ',
area: ['426px', '140px'],
skin: 'layui-layer-rim',
content: $('#audit'),
});
}
// Initialize approver
function initFormSelects(){
$.getJSON('user.action',{
'methodName':'queryUserAll'
},function(rs){
console.log(rs);
let data=rs.data;
$.each(data,function(i,e){
$('#auditor').append(new Option(e.name,e.value));
});
// To render
form.render('select');
});
}Four 、 Effect display
First release a new meeting
Directly click send for approval
Row seat
Re submit for approval
边栏推荐
- 解释一下自动装箱和自动拆箱？
- 图解用户登录验证流程，写得太好了！
- [information system project manager] summary of essence of high-level series for the first time
- Rowselection emptying in a-table
- MySQL 5.7.25 source code installation record
- What is the principle of reflection mechanism?
- PHP one-time request lifecycle
- Mysql5.7.25 master-slave replication (one-way)
- Login module use case writing
- 新公链Aptos何以拉满市场期待值？
猜你喜欢
![Sqoop [environment setup 01] CentOS Linux release 7.5 installation configuration sqoop-1.4.7 resolve warnings and verify (attach sqoop 1 + sqoop 2 Latest installation package +mysql driver package res](/img/8e/265af6b20f79b21c3eadcd70cfbdf7.png)
Sqoop [environment setup 01] CentOS Linux release 7.5 installation configuration sqoop-1.4.7 resolve warnings and verify (attach sqoop 1 + sqoop 2 Latest installation package +mysql driver package res
万字详解“用知识图谱驱动企业业绩增长”
Uni app learning summary
Registration module use case writing
A new paradigm of distributed deep learning programming: Global tensor
The diagram of user login verification process is well written!
R语言ggplot2可视化: 将图例标题（legend title）对齐到ggplot2中图例框的中间(默认左对齐、align legend title to middle of legend)
![[MySQL database] a collection of basic MySQL operations - the basis of seeing (adding, deleting, modifying, and querying)](/img/a7/b3bb6f584dff0eb9b49e81e5b9dade.png)
[MySQL database] a collection of basic MySQL operations - the basis of seeing (adding, deleting, modifying, and querying)
Unstoppable, pure domestic PCs have been in place, and the monopoly of the U.S. software and hardware system has been officially broken
Principle analysis and source code interpretation of service discovery
随机推荐
Flutter Event 派发
IIS website configuration
在.NET 6.0中配置WebHostBuilder
A new paradigm of distributed deep learning programming: Global tensor
antd TreeSelect获取父节点的值
Fiddler download and installation
Mo team learning summary (II)
Vectortilelayer replacement style
Modern medicine in the era of "Internet +"
Gauss elimination for solving XOR linear equations
QT handy notes (III) use qtcharts to draw a line chart in VS
服务发现原理分析与源码解读
Apple dominates, Samsung revives, and domestic mobile phones fail in the high-end market
Leetcode 504. Hex number
Leetcode 504. 七进制数
Usage of the formatter attribute of El table
编写一个在bash / shell 和 PowerShell中均可运行的脚本
Redis sentinel mode setup under Windows
解决npm -v突然失效 无反应
论文笔记（SESSION-BASED RECOMMENDATIONS WITHRECURRENT NEURAL NETWORKS）