模仿电影选座，jq实现教室座位生成和学员座位安排
作者：互联网
实现所需技术，html ，css ，js，jq ，ajax
废话不多说直接上图
这里是生成座位信息样式的地方
点击下一步
右击座位弹出选择器
好了大概的效果就是这样
html 代码 生成座位表按钮代码
<div class="form-group" compcode="formgroup" style="text-align: center">
<a class="btn btn-primary btn-large" id="btn" href="javascript:void(0);"
onclick="generateSeat();"><i class="icon-comment icon-white"></i>生成座位表</a>
<input id="hiddenButten" value="0" type="hidden">
<hr>
</div>
<div class="cardivone" style="margin: auto"></div>
生成座位js，过道功能暂时还没想到怎么弄，就先这样（主要是项目进度太急了，博主实力有限。。。）
document.oncontextmenu = function () {
return false; //这个是用来去掉这个页面的右键点击事件
}
function generateSeat(type) {
let CLASSROOM_COL = $("input[name='CLASSROOM_COL']").val();
let CLASSROOM_ROW = $("input[name='CLASSROOM_ROW']").val();
if (CLASSROOM_COL.length > 0 && CLASSROOM_ROW.length > 0 && CLASSROOM_ROW!="0"&& CLASSROOM_COL!="0") {
$("#hiddenButten").val("1");
//单层车辆生成车辆图
$(".cardivone").html(""); //生成座位前先清空
/*$(".toptext").css('height','0px');*/
$(".cardivone").css('opacity', '1');
var lienumber = parseInt(CLASSROOM_COL) * 63 + 31 + "px";
$(".cardivone").css('width', lienumber);
var zhongnumber = parseInt(CLASSROOM_COL) * parseInt(CLASSROOM_ROW);
for (var i = 1; i <= zhongnumber; i++) {
/* $(".cardivone").append("<div class='caridzuowei' id='carid" + i + "' ><p onm ousedown='whichButton(event," + i + "," + 1 + ")'>" + i + "</p></div>");
*/$(".cardivone").append("<div class='caridzuowei' id='carid" + i + "' ><p>" + i + "</p></div>");
}
setTimeout(function () {
chuanzuo(type);
}, 100);
whichButton(); //判断点击是哪一个按钮
} else {
parent.layer.alert("行列不能为空！", {icon: 2, resize: false});
}
}
function chuanzuo(type) {
$(".caridzuowei").css("height", "45px");
$(".caridzuowei").addClass("zhngjian");
$(".caridzuowei p").css("line-height", "45px");
if(type){
var guodaone = "${classroom.CLASSROOM_GUODAO}".split(",")
for(var w = 0; w <= guodaone.length; w++){ //过道
$("#carid" + guodaone[w]).removeClass("zhngjian");
$("#carid"+guodaone[w]).addClass("guodao");
}
}else{
$(".caridzuowei").css("height", "45px");
$(".caridzuowei").addClass("zhngjian");
$(".caridzuowei p").css("line-height", "45px");
}
}
function whichButton(event, i, r) {//判断点击是哪一个按钮
try {
var btnNum = event.button; //这里如果是ie浏览器的话参数是不同的
} catch (e) {
return;
}
if (btnNum == 0) { //鼠标左键设置为过道
$("#carid" + i).removeClass("zhngjian");
$("#carid" + i).removeClass("youjian");
$("#carid" + i).addClass("guodao");
} else {
if (btnNum == 2) { //鼠标右键恢复为座位
$("#carid" + i).removeClass("guodao");
$("#carid" + i).removeClass("youjian");
$("#carid" + i).addClass("zhngjian");
}
}
}
我贴出部分css代码
.guodao { /*点击左键设置为过道*/
background-color: #fff;
}
.zhngjian { /*点击右键恢复为座位*/
background-color: #35a042;
}
.youren {
background-color: red;
}
/*座位样式*/
.caridzuowei{
float: left;
height: 50px;
width: 50px;
text-align: center;
margin: 6px;
border-radius:13px;
z-index: 2;
} /*座位样式*/
.seatidzuowei{
float: left;
height: 50px;
width: 50px;
text-align: center;
margin: 6px;
border-radius:13px;
z-index: 2;
}
.seatidzuowei p{
font-family: 'Source Sans Pro', 'Helvetica Neue', 微软雅黑, Helvetica, Arial, sans-serif;
color:black;
font-size: 14px ;
}
.caridzuowei p{
font-family: 'Source Sans Pro', 'Helvetica Neue', 微软雅黑, Helvetica, Arial, sans-serif;
color:white;
font-size: 26px ;
}
.cardivone{
}
.seatdiv{
}
.divchoose {
background-color:#e64eb8;height:20px;width:20px;
z-index: 999999;
}
接下来是生成座位选择html
<span style="text-align: left;padding-left: 10%;"><c ><font color="#dc143c">*鼠标右键点击座位弹出选择按钮</font></c></span><br>
<div class="form-group" compcode="formgroup" style="text-align: center">
<input type="hidden" id="students" value="" />
<h3><i class="icon-comment icon-white"></i>座位选择
</h3>
<hr>
</div>
<div class="seatdiv" style="margin: auto">
</div>
右击弹出的选择器
<div id="rightMouse" display="none" style="position: absolute; z-index: 9999; top: 999999px; left: 999999px;" class="">
<ul class="dropdown-menu" role="menu" style="">
<li ><a id="chooseRes" href="javascript:chooseStudent()"><i class="fa fa-plus"></i> 选择学员</a></li>
<li ><a id="cancelRes" href="javascript:cancel();"><i class="fa fa-remove"></i> 取消选择</a></li>
</ul>
</div>
js代码实现修改和新增对页面的渲染
//全局选中div属性
window.Objt = null;
//移除数组数据
function removeElement(index,array)
{
if(index>=0 && index<array.length)
{
for(var i=index; i<array.length; i++)
{
array[i] = array[i+1];
}
array.length = array.length-1;
}
return array;
}
//取消按钮
function cancel() {
$("#rightMouse").removeClass("open");
let CLASSROOM_COL = $("input[name='CLASSROOM_COL']").val();
let CLASSROOM_ROW = $("input[name='CLASSROOM_ROW']").val();
$("#rightMouse").removeClass("open");
let _obj = $(window.Objt);
//获取当前坐标
let i = _obj.attr("num");
let ci = i.split("-");
let pai = ci[0];
let hao = ci[1];
_obj.parent().removeClass("youren");
_obj.parent().addClass("youjian");
let students = $("#students").val();
let stId = "SEAT_STUDENT_ID_"+i;
if(students){
let stuArrays = students.split(",");
//去除取消选择的值
for (let j = 0; j <stuArrays.length ; j++) {
if(stuArrays[j]==$("input[name='"+stId+"']").val()){
stuArrays = removeElement(j,stuArrays);//删除方法
}
}
let newstudents = "";
//重新拼装字符串
for (let j = 0; j <stuArrays.length ; j++) {
if(newstudents){
newstudents = stuArrays[j];
}else{
newstudents = newstudents +","+ stuArrays[j];
}
}
$("#students").val(newstudents);
}
let stName = "SEAT_STUDENT_NAME_"+i;
let stCoo = "SEAT_COO_"+i;
$("input[name='"+stId+"']").val("");
$("input[name='"+stName+"']").val("");
/*$("input[name='"+stCoo+"']").val("");*/
$(window.Objt).text(pai+"排"+hao+"号"+".无人");
}
//选择按钮
function chooseStudent() {
let CLASSROOM_COL = $("input[name='CLASSROOM_COL']").val();
let CLASSROOM_ROW = $("input[name='CLASSROOM_ROW']").val();
$("#rightMouse").removeClass("open");
let _obj = $(window.Objt);
let i = _obj.attr("num");
let ci = i.split("-");
let pai = ci[0];
let hao = ci[1];
/*_obj.parent().removeClass("youjian");
_obj.parent().addClass("youren");*/
let projectId = '${projectId}';
/*$(window.Objt).text(pai+"排"+hao+"号"+".牛逼xx");*/
let students = $("#students").val();
var url = "school/TrainScheduleController.do?initStudentChoose&projectId="+projectId+"&students="+students;
var title = "选择学员";
PlatUtil.openWindow({
title:title,
area: ["50%","50%"],
content: url,
end:function(){
let _student = PlatUtil.getData(PlatUtil.WIN_SELECTOR_RECORDS);
try{
if(_student.selectSuccess){
_obj.parent().removeClass("youjian");
_obj.parent().addClass("youren");
$(window.Objt).text(pai+"排"+hao+"号"+"."+_student.checkNames);
if(students==""){
students = _student.checkIds;
}else {
students = students +","+ _student.checkIds;
}
$("#students").val(students);
let old = $(window.Objt).next().val();
let stId = "SEAT_STUDENT_ID_"+i;
let stName = "SEAT_STUDENT_NAME_"+i;
let stCoo = "SEAT_COO_"+i;
$("input[name='"+stId+"']").val(_student.checkIds);
$("input[name='"+stName+"']").val(_student.checkNames);
$("input[name='"+stCoo+"']").val(pai+","+hao);
students = $("#students").val();
if(old){
let stuArrays = students.split(",");
//去除取消选择的值
for (let j = 0; j <stuArrays.length ; j++) {
if(stuArrays[j]==old){
stuArrays = removeElement(j,stuArrays);//删除方法
}
}
let newstudents = "";
//重新拼装字符串
for (let j = 0; j <stuArrays.length ; j++) {
if(newstudents){
newstudents = stuArrays[j];
}else{
newstudents = newstudents +","+ stuArrays[j];
}
}
$("#students").val(newstudents);
}
}
}catch (e) {
return;
}
}
});
//js全局变量
PlatUtil.removeData(PlatUtil.WIN_SELECTOR_RECORDS);
/*$(window.Objt).text(projectId);*/
}
//打开选择学员选择器
function checkStudent(event , obj, i, r) {
try {
var btnNum = event.button; //这里如果是ie浏览器的话参数是不同的
} catch (e) {
return;
}
if (btnNum == 0) {/*
let cls = $("#seatid"+i).attr("class");
if(cls=='seatidzuowei guodao'){
return;
}else{
let CLASSROOM_COL = $("input[name='CLASSROOM_COL']").val();
let CLASSROOM_ROW = $("input[name='CLASSROOM_ROW']").val();
let pai = Math.ceil((i)/CLASSROOM_ROW);
let hao = i%CLASSROOM_COL;
$("#seatid" + i).removeClass("youjian");
$("#seatid" + i).addClass("youren");
$(obj).text(pai+"排"+hao+"号"+".牛逼xx");
}*/
$("#rightMouse").removeClass("open");
} if(btnNum == 2){
let y = event.clientY;
/* let divchoose =' <div id="rightMouse" style="position: absolute; z-index: 9999; top: '+y+'px; left: '+event.clientX+'px;" class="open">';
divchoose += '<ul class="dropdown-menu" role="menu" style="">';
divchoose += ' <li platreskey="addRes"><a fnname=""><i class="fa fa-plus"></i> 新增</a></li>';
divchoose += ' <li platreskey="editRes"><a fnname=""><i class="fa fa-pencil"></i> 编辑</a></li>';
divchoose += ' <li platreskey="delRes"><a fnname=""><i class="fa fa-remove"></i> 删除</a></li>';
divchoose += ' </ul>';
divchoose += ' </div>'*/;
$("#rightMouse").addClass("open");
document.getElementById("rightMouse").style.top=y+"px";
document.getElementById("rightMouse").style.left=event.clientX+"px";
window.Objt = obj;
/*$("#chooseRes").attr("href","javascript:chooseStudent("+obj+")");
$("#cancelRes").attr();*/
}
/* */
}
//跳转到座位选择页面初始化座位信息
function initChooseSeat(list) {
let CLASSROOM_COL = $("input[name='CLASSROOM_COL']").val();
let CLASSROOM_ROW = $("input[name='CLASSROOM_ROW']").val();
if (CLASSROOM_COL.length > 0 && CLASSROOM_ROW.length > 0 && CLASSROOM_ROW!="0"&& CLASSROOM_COL!="0") {
$(".seatdiv").html(""); //生成座位前先清空
/*$(".toptext").css('height','0px');*/
$(".seatdiv").css('opacity', '1');
var lienumber = parseInt(CLASSROOM_COL) * 125 + 31 + "px";
$(".seatdiv").css('width', lienumber);
var zhongnumber = parseInt(CLASSROOM_COL) * parseInt(CLASSROOM_ROW);
/*for (var i = 1; i <= zhongnumber; i++) {
var n = i;
let pai = Math.ceil((n)/CLASSROOM_COL);
let hao = n%CLASSROOM_ROW;
let text = pai+"排"+hao+"号"+".无人"
$(".seatdiv").append("<div class='seatidzuowei' id='seatid" + i + "' ><p onm ousedown='checkStudent(event,this," + i + "," + 1 + ")' num='"+ i +"'>"+text+"" +
"</p>" +
"<input type='hidden' name='SEAT_STUDENT_ID_"+i+"'/> " +
"<input type='hidden' name='SEAT_STUDENT_NAME_"+i+"'/> " +
"<input type='hidden' name='SEAT_ID_"+i+"'/> " +
"<input type='hidden' name='SEAT_COO_"+i+"'/> " +
"</div>");
}*/
for (let i = 1; i <= parseInt(CLASSROOM_ROW); i++) {
for (let j = 1; j <= parseInt(CLASSROOM_COL); j++) {
let ii = i+"-"+j;
let text = i+"排"+j+"号"+".无人"
$(".seatdiv").append("<div class='seatidzuowei' id='seatid" + ii + "' ><p onm ousedown='checkStudent(event,this," + ii + "," + 1 + ")' num='"+ ii +"'>"+text+"" +
"</p>" +
"<input type='hidden' name='SEAT_STUDENT_ID_"+ii+"'/> " +
"<input type='hidden' name='SEAT_STUDENT_NAME_"+ii+"'/> " +
"<input type='hidden' name='SEAT_ID_"+ii+"' /> " +
"<input type='hidden' name='SEAT_COO_"+ii+"' value='"+i+","+j+"'/> " +
"</div>");
}
}
setTimeout(function () {
seatClass();
}, 100);
if(list){
let students = "";
for (let i = 0,n=list.length; i < n; i++) {
let dat = list[i];
if(dat.SEAT_STUDENT_ID){
let cs = dat.SEAT_COO.replace(",","-");
let xx = dat.SEAT_COO.split(",");
$("#seatid"+cs).removeClass("zhngjian");
$("#seatid"+cs).addClass("youren");
$("#seatid"+cs).children("p").text(xx[0]+"排"+xx[1]+"好."+dat.SEAT_STUDENT_NAME);
let seatId = "SEAT_ID_"+cs;
let SEAT_STUDENT_ID = "SEAT_STUDENT_ID_"+cs;
let SEAT_STUDENT_NAME = "SEAT_STUDENT_NAME_"+cs;
let SEAT_COO = "SEAT_COO_"+cs;
$("input[name='"+seatId+"']").val(dat.SEAT_ID);
$("input[name='"+SEAT_STUDENT_ID+"']").val(dat.SEAT_STUDENT_ID);
$("input[name='"+SEAT_STUDENT_NAME+"']").val(dat.SEAT_STUDENT_NAME);
$("input[name='"+SEAT_COO+"']").val(dat.SEAT_COO);
if(students==""){
students = dat.SEAT_STUDENT_ID;
}else {
students = students +","+ dat.SEAT_STUDENT_ID;
}
}else{
let cs = dat.SEAT_COO.replace(",","-");
let seatId = "SEAT_ID_"+cs;
$("input[name='"+seatId+"']").val(dat.SEAT_ID);
}
}
$("#students").val(students);
}
} else {
parent.layer.alert("行列不能为空！", {icon: 2, resize: false});
}
}
function seatClass() {
$(".seatidzuowei").css("height", "45px");
$(".seatidzuowei").addClass("zhngjian");
$(".seatidzuowei").css("width", "110px");
$(".seatidzuowei p").css("line-height", "45px");
let CLASSROOM_GUODAO = $("input[name='CLASSROOM_GUODAO']").val();
var guodaone = CLASSROOM_GUODAO.split(",")
for(var w = 0; w <= guodaone.length; w++){ //过道
$("#seatid" + guodaone[w]).removeClass("zhngjian");
$("#seatid"+guodaone[w]).addClass("guodao");
}
}
按钮信息
<div class="col-sm-12 text-right">
<button type="button" onclick="wizardPre();" platreskey="" id=""
class="btn btn-outline btn-info btn-sm">
<i class="fa fa-arrow-left"></i> 上一步
</button>
<button type="button" onclick="wizardNext();" platreskey="" id="nextButton"
class="btn btn-outline btn-info btn-sm">
<i class="fa fa-arrow-right"></i> 下一步
</button>
<button type="button" onclick="submitBusForm();" platreskey="" id="okButton" disabled="disabled"
class="btn btn-outline btn-primary btn-sm">
<i class="fa fa-check"></i> 完成
</button>
</div>
按钮的js部分
function wizardPre() {
$("#students").val("");
PlatUtil.wizardPre();
$("#nextButton").removeAttr("disabled");
$("#okButton").attr("disabled","none");
}
function wizardNext() {
if (PlatUtil.isFormValid("#classroom")) {
let hiddenButten = $("#hiddenButten").val();
if(hiddenButten!="1"){
parent.layer.alert("请生成座位图表信息！", {icon: 2, resize: false});
return;
}else{
let set = "";
let guodao = "";
$.each($(".caridzuowei"),function(index,obj){
let cls = $(obj).attr("class");
var num = $(obj).children().text();
if(cls==='caridzuowei zhngjian'){
if(set==""){
set = num;
}else{
set =set+"," +num;
}
}else if(cls==='caridzuowei guodao'){
if(guodao==""){
guodao = num;
}else{
guodao =guodao+"," +num;
}
}
});
if(set==""){
parent.layer.alert("请生设置座位！", {icon: 2, resize: false});
return;
}
var url = $("#classroom").attr("action");
var formData = PlatUtil.getFormEleData("classroom");
formData.CLASSROOM_SEAT = set;
formData.CLASSROOM_GUODAO = guodao;
formData.SCHEDULE_ID = "${scheduleId}";
PlatUtil.ajaxProgress({
url: url,
params: formData,
callback: function (resultJson) {
if (resultJson.success) {
/*if (resultJson.msg) {
parent.layer.msg(PlatUtil.SUCCESS_MSG, {icon: 1});
} else {
parent.layer.msg(PlatUtil.SUCCESS_MSG, {icon: 1});
}*/
$("input[name='CLASSROOM_ID']").val(resultJson.CLASSROOM_ID);
$("input[name='CLASSROOM_SEAT']").val(resultJson.CLASSROOM_SEAT);
$("input[name='CLASSROOM_GUODAO']").val(resultJson.CLASSROOM_GUODAO);
initChooseSeat(resultJson.DLIST);
PlatUtil.wizardNext();
$("#nextButton").attr("disabled","none");
$("#okButton").removeAttr("disabled");
} else {
if (resultJson.msg) {
parent.layer.alert(resultJson.msg, {icon: 2, resize: false});
} else {
parent.layer.alert(PlatUtil.FAIL_MSG, {icon: 2, resize: false});
}
}
}
});
}
}
}
function submitBusForm() {
let formDatas = [];
var div=$("div.seatidzuowei");
for(i=0,len=div.length;i<len;i++){
//var formData = {};
//排序序号
//formData.push({"SEAT_ODER":i});
//formData.push({"SEAT_SCHEDULE_ID":'${scheduleId}'});
//获取标签上的序号
let num = $(div[i]).children("p").attr("num");
//学员id
let stuId = "SEAT_STUDENT_ID_"+num;
/*formData.push({"SEAT_STUDENT_ID":$("input[name='"+stuId+"']").val()});*/
//学员姓名
let stuName = "SEAT_STUDENT_NAME_"+num;
/* formData.push({"SEAT_STUDENT_NAME":$("input[name='"+stuName+"']").val()});*/
//业务表id
let mainId = "SEAT_ID_"+num;
/* formData.push({"SEAT_ID":$("input[name='"+mainId+"']").val()});*/
//座位编号
let seatNum = "SEAT_COO_"+num;
/*formData.push({"SEAT_COO":$("input[name='"+seatNum+"']").val()});*/
var formData = {"SEAT_ODER":i,"SEAT_SCHEDULE_ID":'${scheduleId}',"SEAT_STUDENT_ID":$("input[name='"+stuId+"']").val(),"SEAT_STUDENT_NAME":$("input[name='"+stuName+"']").val(),"SEAT_ID":$("input[name='"+mainId+"']").val(),"SEAT_COO":$("input[name='"+seatNum+"']").val()};
formDatas.push(formData);
}
var url = "school/TrainScheduleController.do?saveOrUpdateSeatPic";
var saveFormData = {"scheduleId":${scheduleId},"SAVESEAT":JSON.stringify(formDatas)};
PlatUtil.ajaxProgress({
url: url,
params: saveFormData,
callback: function (resultJson) {
if (resultJson.success) {
if (resultJson.msg) {
parent.layer.msg(PlatUtil.SUCCESS_MSG, {icon: 1});
} else {
parent.layer.msg(PlatUtil.SUCCESS_MSG, {icon: 1});
}
PlatUtil.closeWindow();
} else {
if (resultJson.msg) {
parent.layer.alert(resultJson.msg, {icon: 2, resize: false});
} else {
parent.layer.alert(PlatUtil.FAIL_MSG, {icon: 2, resize: false});
}
}
}
});
}
参考博客https://blog.csdn.net/weixin_41623830/article/details/86511277感谢博主的分享
标签：CLASSROOM,val,jq,SEAT,let,var,座位,ID,选座 来源： https://www.cnblogs.com/bigdragonmeow/p/11611147.html