会议室预订源码

最新推荐文章于 2022-07-26 10:32:13 发布

chetianyao8457

最新推荐文章于 2022-07-26 10:32:13 发布

阅读量951

点赞数

文章标签： ui json javascript ViewUI

原文链接：https://my.oschina.net/u/4006148/blog/3067201

版权

这个是17年12月在慕课网写的一篇手记，这都是当初一个字符一个字符敲的啊，血汗钱，今天拿来以旧换新，重新温故一遍...

会员卡、公司插件
引入jquery.bootstrap.modalFrame.js、
jquery.selection_fromProfileCompany.js、
jquery.selection_membershipCard.js

$("#company").modalFrame("init",function(modal()){
    $("company").data("val",modal());
})

$("#company").bind("click",function()){
    var modal = $("#company").data("val");
    $("#"+modal()).selection_fromProfile({
        condition:{ho_profile_where:{search:$("input[name=gname]").val()}},
        dataBack:function(data){$("input[name = gname]").val(data.gname)},
    })
}

会议室表格建立

    //加载表格
    function initTable() {
        if(intervalData=="interval"){
            jf_initLoad();
        }
        $.fn.jqGridFnRoomClassification = function(options) {
            //获取jquery对象
            var grid_selector =this;
            //默认参数
            var init = {
                url : "", //请求目标
                editInRow : true, //是否启用行内修改
                editurl : "/frontoffice/front/hoguest/procedure2",//编辑行请求目标
                editDate : {}, //修改的行数据
                editTable : "", //修改表
                editResult : false, //是否修改成功
                webTostored : "", //存储过程
                pager_selector : "", //翻页栏
                height : "600", //高度
                offset : 0, //宽度偏移量
                where : {}, //查询条件
                wherestring : {}, //查询条件集 
                rowNum : 20, //每页显示多少条数据
                rowList : [ '全部', 10, 20, 30 ], //选择每页显示多少条数据
                onShow : function() {}, //双击某行回调函数
            };
            //初始化参数
            var initDate = $.extend(init,options);
            jqGridCre(initDate, grid_selector);
        }
    }

    //函数初始化
    function jf_initLoad() {
        $("#roomManagement").jqGridFnRoomClassification({})//执行jqgrid
        $("#roomManagement_room").attr("colspan","3").css("width","150px")//合并表头最左列
        $("#jqgh_roomManagement_room,#jqgh_roomManagement_s1").css("text-align","center")//设置字体位置居中
        $("#roomManagement_rmtype,#roomManagement_hsk_status").css("width","0px");//隐藏房型和类型表头列
        $(".ui-jqgrid-sortable").css("padding-top","2px").css("padding-bottom","2px")//设置表头每列属性
        $(".ui-jqgrid-hdiv").children().css("height","55px").css("vertical-align","middle")//设置表头属性
        $("#roomManagement").jqGrid('setFrozenColumns');//设置冻结列

        //添加本地数据
        for ( var i = 0; i <= roomData.length; i++){
            $("#roomManagement").jqGrid('addRowData', i + 1, roomData[i]);
        }

        //设置冻结列属性
        $("div.frozen-div.ui-state-default.ui-jqgrid-hdiv").css("overflow-y","hidden").css("height","55px");
        $(".frozen-bdiv.ui-jqgrid-bdiv").css("top","55px").css("opacity","1").css("z-index","9");
        $(".frozen-bdiv.ui-jqgrid-bdiv td").css("background","#fff")
    }

    //选中事件 新建
    function jf_selectable(){
        $( "tbody tr").selectable({ 
            distance: 10 ,//鼠标移动像素
            start: function(event,ui) {
                $("#roomManagement div:not(.previousDiv)").remove();//清除已选非已有事件
            },
            stop: function(event,ui){
                var formJson = sysname2json($("#ho_loseModal").serializeArray())
                for(var k in formJson){
                    $("#"+k).val("")
                }
                var selectedRoom=$.trim($("td.ui-selected").closest("tr").find("td:first").attr("title"))
                var selectedBegin=$("td.ui-selected:first").attr("class").split(" ")[1];
                var selectedEnd=$("td.ui-selected:last").attr("class").split(" ")[1];
                var selectedBeginDate=$("td.ui-selected:first").attr("class").split(" ")[0];
                var selectedEndDate=$("td.ui-selected:last").attr("class").split(" ")[0];
                $("#room").val(selectedRoom);
                $("#arr_t").val(selectedBegin);
                $("#exp_dep_t").val(selectedEnd);
                $("#arr_d").val(selectedBeginDate);
                $("#exp_dep_d").val(selectedEndDate);
                $("#rev_type").val("TEN");
                newOrEdit='';
                //加载模态
                $("#modal-wizard").modal({backdrop: 'static', keyboard: false},"show");
            },
        })
    }

    //拖拽放置事件
    function jf_drag(){
        $(".cloneDiv:not(.extendSpan)").mousedown(function(){
            //全局变量
            var arr_t_m_drag='';
            var exp_dep_t1_drag='';
            var dragWidth='';
            var dragGno='';
            var dragLeft='';
            var newRoom1='';
            $(this).draggable({
                start:function(event,ui){
                    dragWidth=$(this).closest("div").css("width").split("px")[0];
                    dragGno=$(this).closest("div").attr("data-room");
                    dragLeft=$(this).closest("div").css("left");
                    var previousDivStr=$(this).closest("div").attr("data-room");
                    $("#arr_d").val($("#startdate").val())  
                    $("#exp_dep_d").val($("#startdate").val())  
                    newOrEdit="编辑";
                    var str1 = "gno="+"'"+previousDivStr+"'";
                    var json1=jf_getData(str1);
                    global_gname=json1[0].gname
                    global_str4=json1[0].str4
                    global_sales=json1[0].sales
                    global_status=json1[0].status
                    global_rate=json1[0].rate
                    global_adults=json1[0].adults
                    global_rev_type=json1[0].rev_type
                    global_arr_t=json1[0].arr_t
                    global_exp_dep_t=json1[0].exp_dep_t
                    global_room=json1[0].room
                    global_arr_d=json1[0].arr_d
                    global_exp_dep_d=json1[0].exp_dep_d
                    $(this).removeClass("label-success").removeClass("label-info").css("background","#abbac3")//设置拖拽div背景颜色
                },
                drag: function( event, ui ){
                    //增加辅助阴影列事件
                    $(".shadow").removeClass("shadow")  
                    var passTr=Math.floor(parseInt(ui.position.top)/34);
                    var passTd=Math.floor(parseInt(ui.position.left-140)/80);
                    $("#roomManagement tr.jqgrow:eq("+passTr+")").find("[aria-describedby=roomManagement_eno]:eq("+passTd+")").addClass("shadow")
                },
                stop:function( event, ui ){
                    //日期差
                    jf_dateDiff();
                    //会议开始和结束时间
                    if(global_arr_t.length==4){
                        var arr_t_hour=global_arr_t.substr(0,1);
                        var arr_t_minuter=global_arr_t.substr(2,4);
                    }else{
                        var arr_t_hour=global_arr_t.substr(0,2);
                        var arr_t_minuter=global_arr_t.substr(3,5);
                    }
                    if(global_exp_dep_t.length==4){
                        var exp_dep_t_hour=global_exp_dep_t.substr(0,1);
                        var exp_dep_t_minuter=global_exp_dep_t.substr(2,4);
                    }else{
                        var exp_dep_t_hour=global_exp_dep_t.substr(0,2);
                        var exp_dep_t_minuter=global_exp_dep_t.substr(3,5);
                    }
                    //拖拽之后的会议室room和到左侧距离的确认
                    var newTop=$(this).css("top").replace(/[^0-9]/ig,""); 
                    var newTop1=parseInt(newTop/34)+1;
                    newRoom1=$.trim($("#"+newTop1).find("td:first").attr("title"))
                    var newLeft=$(this).css("left")
                    var newLeft1=newLeft.replace(/[^0-9]/ig,""); 
                    //会议开始时间的No.
                    var newLeftNo=parseInt((newLeft1-140)/80)+1;
                    var startData=$(".ui-jqgrid-labels").find("th").eq(newLeftNo).find("div").text();
                    global_arr_d1=startData.substr(0,8);
                    global_arr_t1=startData.substr(-5);

                    //时间差
                    var meetingroomLength=exp_dep_t_hour-arr_t_hour;
                    //       蓝条宽度                                         日期差                              时间差
                    var meetingroomTimeLength=time_end_arr*24+meetingroomLength;
                    //会议结束时间的No.
                    if(meetingroomTimeLength>0){
                        var newEndNo=newLeftNo+meetingroomTimeLength;
                    }else{
                        var newEndNo=newLeftNo+1;
                    }
                    var endData=$(".ui-jqgrid-labels").find("th").eq(newEndNo).find("div").text();
                    global_exp_dep_d1=endData.substr(0,8);
                    global_exp_dep_t1=endData.substr(-5);

                    var e={};
                    var d={};
                    e.gno=dragGno;
                    e.gname=global_gname;
                    e.str4=global_str4;
                    e.sales=global_sales;
                    e.room=newRoom1;
                    e.rev_type=global_rev_type
                    e.rate=global_rate;
                    e.adults=global_adults;
                    e.arr_d=global_arr_d1;
                    e.exp_dep_t=global_exp_dep_t1;
                    e.exp_dep_d=global_exp_dep_d1;
                    e.arr_t=global_arr_t1;
                    d.ho_guest=e;
                    $("#meetingStartDate").text(global_arr_d1)
                    $("#meetingEndDate").text(global_exp_dep_d1)
                    $("#meetingStartTime").text(global_arr_t1)
                    $("#meetingEndTime").text(global_exp_dep_t1)
                    $("#meetingRoomRe").text(newRoom1)
                    $("#modal-confirm").modal({backdrop: 'static', keyboard: false},"show");
                    $("#btnModalConfirm_drag").unbind("click");
                    $("#btnModalConfirm_drag").click(function(){
                        jf_meetingRoomSave(d);
                    })
                },  
            })  
        })
    }

    //延伸事件
    function jf_extend(){
        var extendRoom_ext='';
        var extendWidth='';
        var extendGno='';
        var mouseX="";//原始鼠标位置
        var oriLeft="";
        var status="";//日期加减状态参数
        $(".shrinkSpan,.extendSpan").resizable({
            alsoResize: $(this).closest("div"),//同时重置指定的一个或多个元素的尺寸大小
            ghost: false,//半透明的辅助元素
            autoHide:true,
            grid: [ 80, 0 ],//设置调整x和y改变的像素
            handles: "e,w",//手柄
            helper: "resizable-helper",//代理元素样式
            start: function( event, ui ) {
                extendWidth=ui.size.width;
                mouseX = event.pageX;//获取鼠标的位置  
                $(".cloneDiv").unbind("click")
                oriWidth=$(this).closest("div").css("width").split("px")[0];
                extendGno=$(this).closest("div").attr("data-room");
                oriLeft=$(this).closest("div").css("left");
                newOrEdit="编辑";
                var str1 = "gno="+"'"+extendGno+"'";
                var json1=jf_getData(str1);
                global_gname=json1[0].gname
                global_str4=json1[0].str4
                global_status=json1[0].status
                global_room=json1[0].room   
                global_sales=json1[0].sales
                global_rate=json1[0].rate
                global_adults=json1[0].adults
                global_rev_type=json1[0].rev_type
                global_arr_d=json1[0].arr_d
                global_exp_dep_d=json1[0].exp_dep_d
                global_arr_t=json1[0].arr_t
                global_exp_dep_t=json1[0].exp_dep_t
            },
            resize: function( event, ui ) {
                var widthDiff=parseInt(ui.size.width)-extendWidth
                var mouseX1 = event.pageX;
                if($(this).hasClass("shrinkSpan")){
                    if(mouseX1>mouseX){//左边的向右拉
                        if($(this).closest("div").css("width").length>4){
                            $("[data-room="+extendGno+"]").css("left",parseInt(oriLeft)+parseInt(ui.size.width)+"px")
                            $("[data-room="+extendGno+"]").css("width",(parseInt(oriWidth)-parseInt(ui.size.width))+"px");//改变事件宽度
                            status="increase"
                        }
                    }else{//左边的向左拉
                        $("[data-room="+extendGno+"]").css("left",parseInt(oriLeft)-parseInt(ui.size.width)+"px");
                        $("[data-room="+extendGno+"]").css("width",(parseInt(oriWidth)+parseInt(ui.size.width))+"px");//改变事件宽度
                        status="reduce"
                    }
                }else{
                    if(mouseX1>mouseX){//右边的向右拉
                        $(this).closest("div").css("width",(parseInt(oriWidth)+parseInt(ui.size.width))+"px");//改变事件宽度
                        status="increase"
                    }else{//右边的向左拉
                        $("[data-room="+extendGno+"]").css("width",(parseInt(oriWidth)-parseInt(ui.size.width))+"px");//改变事件宽度
                        status="reduce"
                    }
                }
            },
            stop: function( event, ui ) {
                //日期差
                jf_dateDiff();
                //截取会议开始时间时针部分、分针部分
                if(global_arr_t.length==4){
                    arr_t_ext1=global_arr_t.substr(0,1)
                    var arr_t_ext_minuter=global_arr_t.substr(2,4)
                }else{
                    arr_t_ext1=global_arr_t.substr(0,2)
                    var arr_t_ext_minuter=global_arr_t.substr(3,5)
                }
                //会议结束时间时针部分
                if(global_exp_dep_t.length==4){
                    global_exp_dep_t1=global_exp_dep_t.substr(0,1)
                    var exp_ext_minuter=global_exp_dep_t.substr(2,4)
                }else{
                    global_exp_dep_t1=global_exp_dep_t.substr(0,2)
                    var exp_ext_minuter=global_exp_dep_t.substr(3,5)
                }
                //蓝条原本的时间差
                widthDiff1=parseInt(global_exp_dep_t1)-parseInt(arr_t_ext1)
                //蓝条原本的分针差
                var widthDiff3=parseInt(arr_t_ext_minuter)-parseInt(exp_ext_minuter)
                //拉拽的格数
                var widthDiff2=(ui.size.width-ui.originalSize.width)/80;
                if($(this).hasClass("shrinkSpan")){//向左拉伸   
                    if(status=="reduce"){//左边左拉伸确认arr日期和时间
                        //            日期的格数差距                  开始时间的格数差距                   拖拽的距离
                        var newLeftNo=time_arr_now*24+parseInt(arr_t_ext1)-widthDiff2+1;
                        var headerDate=$(".ui-jqgrid-labels").find("th").eq(newLeftNo).find("div").text();
                        global_arr_d=headerDate.substr(0,8);
                        global_arr_t=headerDate.substr(-5);
                    }else if(status=="increase"){//左边右拉伸确认arr日期和时间
                        //            日期的格数差距                  开始时间的格数差距                   拖拽的距离
                        var newLeftNo=time_arr_now*24+parseInt(arr_t_ext1)+widthDiff2+1;
                        if(newLeftNo<=(parseInt(global_exp_dep_t.substr(0,2))+time_end_now)){
                            var headerDate=$(".ui-jqgrid-labels").find("th").eq(newLeftNo).find("div").text();
                            global_arr_d=headerDate.substr(0,8);
                            global_arr_t=headerDate.substr(-5);
                        }else{
                            var headerDate=$(".ui-jqgrid-labels").find("th").eq((parseInt(global_exp_dep_t.substr(0,2))+time_end_now)).find("div").text();
                            global_arr_d=headerDate.substr(0,8);
                            global_arr_t=headerDate.substr(-5);
                        }
                }else{//向右拉伸
                    $(this).css("width",parseInt(ui.size.width)/10).css("float","right")//设置延伸框属性
                    if(status=="increase"){//右边右拉伸确认dep_t日期和时间
                        //            日期的格数差距        开始时间的格数差距                          蓝条原本的时间差                     拖拽的距离
                        var newLeftNo=time_arr_now+parseInt(arr_t_ext1)+parseInt(widthDiff1)+widthDiff2+1;
                        var headerDate=$(".ui-jqgrid-labels").find("th").eq(newLeftNo).find("div").text();
                        global_exp_dep_d=headerDate.substr(0,8);
                        global_exp_dep_t=headerDate.substr(-5);   
                    }else{//右边左拉
                        //            日期的格数差距        开始时间的格数差距                          蓝条原本的时间差                     拖拽的距离
                        var newLeftNo=time_arr_now+parseInt(arr_t_ext1)+parseInt(widthDiff1)-widthDiff2+1;
                        if(parseInt(arr_t_ext1)+time_arr_now<newLeftNo){
                            var headerDate=$(".ui-jqgrid-labels").find("th").eq(newLeftNo).find("div").text();
                            global_exp_dep_d=headerDate.substr(0,8);
                            global_exp_dep_t=headerDate.substr(-5);
                        }else{
                            var headerDate=$(".ui-jqgrid-labels").find("th").eq(parseInt(arr_t_ext1)+time_arr_now+2).find("div").text();
                            global_exp_dep_d=headerDate.substr(0,8);
                            global_exp_dep_t=headerDate.substr(-5);
                        }
                    }    
                }
                var e={};
                var d={};
                e.gno=extendGno;
                e.gname=global_gname;
                e.str4=global_str4;
                e.rev_type=global_rev_type;
                e.sales=global_sales;
                e.room=global_room;
                e.rate=global_rate;
                e.adults=global_adults;
                e.arr_d=global_arr_d;
                e.exp_dep_t=global_exp_dep_t;
                e.exp_dep_d=global_exp_dep_d;
                e.arr_t=global_arr_t;
                d.ho_guest=e;   
                $("#meetingStartDate").text(global_arr_d)
                $("#meetingEndDate").text(global_exp_dep_d)
                $("#meetingStartTime").text(global_arr_t)
                $("#meetingEndTime").text(global_exp_dep_t)
                $("#meetingRoomRe").text(global_room)
                //加载模态
                $("#modal-confirm").modal({backdrop: 'static', keyboard: false},"show");
                $("#btnModalConfirm_drag").unbind("click");
                $("#btnModalConfirm_drag").click(function(){
                    jf_meetingRoomSave(d);
                })
            },
        })
    }

代码源码
=>w_event_gantt.jsp

转载于:https://my.oschina.net/u/4006148/blog/3067201

chetianyao8457

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
会议室预订源码

这个是17年12月在慕课网写的一篇手记，这都是当初一个字符一个字符敲的啊，血汗钱，今天拿来以旧换新，重新温故一遍... 会员卡、公司插件引入jquery.bootstrap.modalFrame.js、 jquery.selection_fromProfileCompany.js、 jqu...
复制链接

扫一扫