JavaScript系列：会议室预订源码
标签：
JavaScript
会员卡、公司插件
引入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
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦