會議室預訂源碼
這個是17年12月在慕課網寫的一篇手記，這都是當初一個字符一個字符敲的啊，血汗錢，今天拿來以舊換新，從新溫故一遍...css
會員卡、公司插件
引入jquery.bootstrap.modalFrame.js、
jquery.selection_fromProfileCompany.js、
jquery.selection_membershipCard.js
jquery
$("#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)},
})
}
會議室表格創建web
//加載表格
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.jspjson
相關文章
- 1. outlook 如何預訂會議和會議室
- 2. 會議室預約
- 3. MRBS開源會議室預訂系統安裝
- 4. 會議室預定系統
- 5. 會議室預約功能
- 6. 預約會議室圖列
- 7. 會議室預約系統
- 8. Outlook 2013「預約」會議室
- 9. 會議室微信預約
- 10. 會議室預約demo mrbs
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • Java操作Neo4j數據庫（附帶源碼） - NoSQL教程
- • Java Agent入門實戰（二）-Instrumentation源碼概述
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. outlook 如何預訂會議和會議室
- 2. 會議室預約
- 3. MRBS開源會議室預訂系統安裝
- 4. 會議室預定系統
- 5. 會議室預約功能
- 6. 預約會議室圖列
- 7. 會議室預約系統
- 8. Outlook 2013「預約」會議室
- 9. 會議室微信預約
- 10. 會議室預約demo mrbs