实现所需技术,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 οnmοusedοwn='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: