ICode9

精准搜索请尝试: 精确搜索
首页?>?其他分享> 文章详细

模仿电影选座,jq实现教室座位生成和学员座位安排

2019-09-30 10:05:10??阅读:8??来源: 互联网

标签:CLASSROOM?val?jq?SEAT?let?var?座位?ID?选座


?

实现所需技术,html ,css ,js,jq ,ajax

?

废话不多说直接上图

这里是生成座位信息样式的地方

?

?

点击下一步

?

?

右击座位弹出选择器

?

?

好了大概的效果就是这样

html 代码 生成座位表按钮代码


                    

生成座位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("

" + i + "

"); */$(".cardivone").append("

" + i + "

"); } 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

 *鼠标右键点击座位弹出选择按钮

座位选择


右击弹出的选择器

js代码实现修改和新增对页面的渲染

//全局选中div属性
            window.Objt = null;
            //移除数组数据
            function removeElement(index,array)
            {
                if(index>=0 && index';
                     divchoose += '';
                     divchoose += ' 
'*/; $("#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("

"+text+"" + "

" + " " + " " + " " + " " + "
"); }*/ 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("

"+text+"" + "

" + " " + " " + " " + " " + "
"); } } 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"); } }

按钮信息

按钮的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

?参考博客https://blog.csdn.net/weixin_41623830/article/details/86511277感谢博主的分享


标签:CLASSROOM,val,jq,SEAT,let,var,座位,ID,选座

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有