file upload
This commit is contained in:
817
api/UseJS/alert2.js
Normal file
817
api/UseJS/alert2.js
Normal file
@@ -0,0 +1,817 @@
|
||||
/*
|
||||
Ver 2.0.11
|
||||
|
||||
※可與舊版本並存
|
||||
※解析度 1920 以上時，由 css 控制放大 1.25 倍
|
||||
|
||||
函數調用需再 jQuery 1.9.1 ~ 3.3.1 環境使用
|
||||
|
||||
-----------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
※調整 AlertBoxSetting 變數可做全域設定
|
||||
|
||||
以下為可調用函數
|
||||
呼叫視窗 > alertBox({ 選填項目 })
|
||||
關閉視窗 > alertClose('執行狀態', 'Code碼') ※執行狀態分別為('ok'、'cancel')
|
||||
若無填寫則不會執行結束後函數，但會關閉視窗
|
||||
若無設定 Code碼 則預設關閉最上層的視窗
|
||||
a. alert模式時： 設置 'ok'、'cancel' 時，將執行 OnOK、OnCancel、OnClose、OnEnd 函數
|
||||
b. confirm模式時： 設置 'ok' 時，將執行 OnClose、OnOK、OnEnd 函數
|
||||
設置 'cancel' 時，將執行 OnCancel、OnClose、OnEnd 函數
|
||||
c. prompt模式時： 設置 'ok' 時，將執行 OnClose、OnOK、OnEnd 函數
|
||||
設置 'cancel' 時，將執行 OnCancel、OnClose、OnEnd 函數
|
||||
d. progress模式時：設置 'ok'、'cancel' 時，將執行 OnOK、OnCancel、OnClose、OnEnd 函數
|
||||
e. loading模式時： 設置 'ok'、'cancel' 時，將執行 OnOK、OnCancel、OnClose、OnEnd 函數
|
||||
|
||||
改變進度條資訊 > alertProgress(百分比, 'Html內容', 自動關閉設定) ※此為 progress 模式專用函數
|
||||
百分比請輸入純數字設定參數，Html內容為非必填項目，可自行斟酌
|
||||
若百分比大於100時，將延遲0.5秒(預設)後自動關閉視窗，並執行 OnEnd 函數
|
||||
自動關閉設定如果設定為 true 為自動關閉，設定為 false 為不關閉，預設為 true
|
||||
|
||||
改變loading內容 > alertLoadingMsg('Html內容', 'Code碼') ※此為 loading 模式專用函數，Code碼為非必填項目，可自行斟酌
|
||||
|
||||
關閉loading視窗 > alertLoadingEnd('Html內容', 延遲毫秒, 回調函數, 'Code碼') ※此為 loading 模式專用函數
|
||||
所有參數為非必填項目，可自行斟酌
|
||||
延遲毫秒請輸入純數字設置，單位為毫秒數 1秒/1000毫秒
|
||||
回調函數設定後即自動套用至 OnEnd 函數並調用
|
||||
|
||||
-----------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
呼叫視窗 選填項目：使用模式 Mode (預設：'alert') ※分別有下列模式('alert'('A')、'confirm'('C')、'prompt'('PM')、'progress'('PR')、'loading'('L'))，括號內大寫字母為縮寫參數
|
||||
Html內容 Html (預設：'') ※可利用 $(id) 帶入
|
||||
抬頭文字 Title (預設：'') ※若為空白或 null 則不會顯示，未設定時依照模式帶入預設值
|
||||
操控列內容 Ctrl (預設：'') ※若為空白或 null 則不會顯示，未設定時依照模式帶入預設值
|
||||
擴充指令 Setting (預設：{ } ) ※依照各個 Mode 使用模式而有所不同，詳細設定請參考下面各個模式的解說
|
||||
外層容器Style OutsideStyle (預設：'')
|
||||
外層容器Class OutsideClass (預設：'')
|
||||
內層標題Style TitleStyle (預設：'')
|
||||
內層標題Class TitleClass (預設：'')
|
||||
內層容器Style InsideStyle (預設：'')
|
||||
內層容器Class InsideClass (預設：'')
|
||||
內層控制列Style CtrlStyle (預設：'')
|
||||
內層控制列Class CtrlClass (預設：'')
|
||||
點擊其他處關閉視窗 TouchClose (預設：依附全域設定) ※可蓋過全域設定獨立運作
|
||||
顯示前 執行函數 OnStart (預設：null，設定時請使用 function (Code) { } ) ※執行順序 1，物件建立前執行
|
||||
顯示時 執行函數 OnRun (預設：null，設定時請使用 function (Code) { } ) ※執行順序 2，物件建立後且動畫前執行
|
||||
顯示後 執行函數 OnReady (預設：null，設定時請使用 function (Code) { } ) ※執行順序 3，物件建立後且動畫後執行
|
||||
關閉前 執行函數 OnClose (預設：null，設定時請使用 function (Type, Value) { return true; } ) ※執行順序 4，物件移除前且動畫前執行，若回傳 false 則不接續執行下面動作
|
||||
確認後 執行函數 OnOK (預設：null，設定時請使用 function (Value) { } ) ※執行順序 5，物件移除前且動畫後執行
|
||||
取消後 執行函數 OnCancel (預設：null，設定時請使用 function () { } ) ※同上
|
||||
關閉後 執行函數 OnEnd (預設：null，設定時請使用 function () { } ) ※同上
|
||||
|
||||
-----------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
prompt模式 擴充指令：使用模式 Mode (預設：'text') ※分別有下列模式('text'、'password'、'textarea')
|
||||
預設值 Value (預設：'')
|
||||
欄位註解 Placeholder (預設：'輸入...')
|
||||
欄位行數 Rows (預設：3) ※輸入純數字設定參數，使用 textarea 模式時才會生效
|
||||
預設框選 Select (預設：false)
|
||||
是否必填 Required (預設：true) ※若資料為空白則自動提示使用者該項目必填
|
||||
|
||||
progress模式 擴充指令：延遲關閉時間 Delay (預設：500) ※單位為毫秒數
|
||||
|
||||
loading模式 擴充指令：延遲關閉時間 Delay (預設：500) ※單位為毫秒數
|
||||
|
||||
-----------------------------------------------------------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
||||
//設定按鈕樣式 Class
|
||||
var AlertBoxSetting = {
|
||||
OkText: '確定', //確認 按鈕文字
|
||||
CancelText: '取消', //取消 按鈕文字
|
||||
OkClass: 'button btn_peach', //確認 按鈕樣式
|
||||
CancelClass: 'button btn_white', //取消 按鈕樣式
|
||||
CoverSpeed: 200, //遮罩速度
|
||||
CoverTransition: 'linear', //遮罩過場動畫樣式
|
||||
StartSpeed: 300, //開啟速度
|
||||
StartTransition: 'easeOutBack', //開啟過場動畫樣式
|
||||
EndSpeed: 200, //關閉速度
|
||||
EndTransition: 'linear', //關閉過場動畫樣式
|
||||
ScrollType: 'mousewheel', //滾動禁用模式：'overflow'、'mousewheel'、'keydown'、'none' ※建議使用 mousewheel 最佳
|
||||
TouchClose: false, //是否開啟點擊其他處關閉視窗 (全域設定)
|
||||
ButtonChange: false, //確定按鈕與取消按鈕位置是否要交換
|
||||
EscClose: true, //使用ESC視窗關閉視窗開關
|
||||
CloseIcon: false, //是否要使用於 Title 區塊的關閉 icon 按鈕 (progress、loading模式無法使用)
|
||||
Compatible: true, //是否開啟舊版本相容函數
|
||||
FilterTarget: '#MasterPage_div', //設定濾鏡使用 DOM 元件
|
||||
FilterBlur: false, //是否開啟失焦濾鏡 (IE不支援、FireFox相容性較差背景有跑版面的可能)
|
||||
FilterBlurValue: 2, //設定失焦濾鏡參數 (輸入純數字設置)
|
||||
};
|
||||
|
||||
|
||||
//宣告專用變數儲存物件
|
||||
var AlertBoxTempData = {};
|
||||
var AlertBoxMouseWheelCheck = true; //判斷 body 的滾動條是否要禁用
|
||||
var AlertBoxBodyScrollValue = 0; //判斷 body 目前的 scrollTop 座標
|
||||
var AlertBoxKeyupEscCloseTarget; //ESC所使用的當前開啟的視窗辨別變數
|
||||
var AlertBoxUidCode = 0; //唯一值變數
|
||||
|
||||
|
||||
//開啟視窗
|
||||
alertBox = function (Setting) {
|
||||
|
||||
//唯一值變數
|
||||
AlertBoxUidCode++;
|
||||
|
||||
|
||||
//定義預設值
|
||||
Setting.Mode = Setting.Mode ? Setting.Mode : 'alert'; //使用模式
|
||||
Setting.Html = Setting.Html ? Setting.Html : ''; //Html內容
|
||||
Setting.OutsideStyle = Setting.OutsideStyle ? Setting.OutsideStyle : ''; //外層容器Style
|
||||
Setting.OutsideClass = Setting.OutsideClass ? Setting.OutsideClass : ''; //外層容器Class
|
||||
Setting.TitleStyle = Setting.TitleStyle ? Setting.TitleStyle : ''; //內層標題Style
|
||||
Setting.TitleClass = Setting.TitleClass ? Setting.TitleClass : ''; //內層標題Class
|
||||
Setting.InsideStyle = Setting.InsideStyle ? Setting.InsideStyle : ''; //內層容器Style
|
||||
Setting.InsideClass = Setting.InsideClass ? Setting.InsideClass : ''; //內層容器Class
|
||||
Setting.CtrlStyle = Setting.CtrlStyle ? Setting.CtrlStyle : ''; //內層控制列Style
|
||||
Setting.CtrlClass = Setting.CtrlClass ? Setting.CtrlClass : ''; //內層控制列Class
|
||||
Setting.OnStart = Setting.OnStart ? Setting.OnStart : null; //顯示前 執行函數
|
||||
Setting.OnRun = Setting.OnRun ? Setting.OnRun : null; //顯示時 執行函數
|
||||
Setting.OnReady = Setting.OnReady ? Setting.OnReady : null; //顯示後 執行函數
|
||||
Setting.OnOK = Setting.OnOK ? Setting.OnOK : null; //確認後 執行函數
|
||||
Setting.OnCancel = Setting.OnCancel ? Setting.OnCancel : null; //取消後 執行函數
|
||||
Setting.OnClose = Setting.OnClose ? Setting.OnClose : null; //關閉前 執行函數
|
||||
Setting.OnEnd = Setting.OnEnd ? Setting.OnEnd : null; //關閉後 執行函數
|
||||
Setting.Code = Setting.Mode + '_' + AlertBoxUidCode; //辨識名稱 (系統使用)
|
||||
Setting.ID = null; //使用 dom 物件內容時使用變數 (系統使用)
|
||||
Setting.Setting = Setting.Setting ? Setting.Setting : {}; //擴充指令
|
||||
Setting.TouchClose = Setting.TouchClose === undefined ? AlertBoxSetting.TouchClose : Setting.TouchClose; //點擊其他處關閉視窗
|
||||
|
||||
|
||||
//對應 Setting.Mode 縮寫參數
|
||||
if (Setting.Mode === 'A') {
|
||||
Setting.Mode = 'alert';
|
||||
} else if (Setting.Mode === 'C') {
|
||||
Setting.Mode = 'confirm';
|
||||
} else if (Setting.Mode === 'PM') {
|
||||
Setting.Mode = 'prompt';
|
||||
} else if (Setting.Mode === 'PR') {
|
||||
Setting.Mode = 'progress';
|
||||
} else if (Setting.Mode === 'L') {
|
||||
Setting.Mode = 'loading';
|
||||
}
|
||||
//若 Setting.Ctrl 未設定 則依照模式賦予設定值
|
||||
if (Setting.Ctrl === undefined) {
|
||||
|
||||
var tempOKBtn = '<button onclick="alertClose(\'ok\',\'' + Setting.Code + '\')" type="button" class="' + AlertBoxSetting.OkClass + '"><i class="fa fa-check"></i> ' + AlertBoxSetting.OkText + '</button>';
|
||||
var tempCancelBtn = '<button onclick="alertClose(\'cancel\',\'' + Setting.Code + '\')" type="button" class="' + AlertBoxSetting.CancelClass + '"><i class="fa fa-times"></i> ' + AlertBoxSetting.CancelText + '</button>';
|
||||
|
||||
//判斷是否需要顛倒按鈕位置
|
||||
if (AlertBoxSetting.ButtonChange == true) {
|
||||
if (Setting.Mode == 'alert') {
|
||||
Setting.Ctrl = tempOKBtn;
|
||||
} else if (Setting.Mode == 'confirm') {
|
||||
Setting.Ctrl = tempOKBtn + ' ' + tempCancelBtn;
|
||||
} else if (Setting.Mode == 'prompt') {
|
||||
Setting.Ctrl = tempOKBtn + ' ' + tempCancelBtn;
|
||||
} else if (Setting.Mode == 'progress') {
|
||||
Setting.Ctrl = '';
|
||||
}
|
||||
} else {
|
||||
if (Setting.Mode == 'alert') {
|
||||
Setting.Ctrl = tempOKBtn;
|
||||
} else if (Setting.Mode == 'confirm') {
|
||||
Setting.Ctrl = tempCancelBtn + ' ' + tempOKBtn;
|
||||
} else if (Setting.Mode == 'prompt') {
|
||||
Setting.Ctrl = tempCancelBtn + ' ' + tempOKBtn;
|
||||
} else if (Setting.Mode == 'progress') {
|
||||
Setting.Ctrl = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
//判斷是否使用關閉 icon 按鈕 (progress、loading模式、Title不顯示時無法使用)
|
||||
var tempCloseIcon = '';
|
||||
if (AlertBoxSetting.CloseIcon == true && Setting.Title != '' && Setting.Title != null) {
|
||||
tempCloseIcon = '<i onclick="alertClose(\'cancel\',\'' + Setting.Code + '\')" class="fa fa-times AlertBoxDivCloseIcon"></i>';
|
||||
}
|
||||
//若 Setting.Title 未設定 則依照模式賦予設定值
|
||||
if (Setting.Title === undefined) {
|
||||
if (Setting.Mode == 'alert') {
|
||||
Setting.Title = '<i class="fa fa-commenting-o"></i> 訊息提示' + tempCloseIcon;
|
||||
} else if (Setting.Mode == 'confirm') {
|
||||
Setting.Title = '<i class="fa fa-check-square-o"></i> 確認動作' + tempCloseIcon;
|
||||
} else if (Setting.Mode == 'prompt') {
|
||||
Setting.Title = '<i class="fa fa-pencil-square-o"></i> 資料輸入' + tempCloseIcon;
|
||||
} else if (Setting.Mode == 'progress') {
|
||||
Setting.Title = '<i class="fa fa-align-left"></i> 執行進度';
|
||||
} else if (Setting.Mode == 'loading') {
|
||||
Setting.Title = '<i class="fa fa-pie-chart"></i> 當前狀態';
|
||||
}
|
||||
} else {
|
||||
if (tempCloseIcon != '') {
|
||||
Setting.Title = Setting.Title + tempCloseIcon;
|
||||
}
|
||||
}
|
||||
// Setting.Setting 依照模式賦予設定值
|
||||
if (Setting.Mode == 'prompt') {
|
||||
Setting.Setting.Mode = Setting.Setting.Mode ? Setting.Setting.Mode : 'text';
|
||||
Setting.Setting.Value = Setting.Setting.Value ? Setting.Setting.Value : '';
|
||||
Setting.Setting.Placeholder = Setting.Setting.Placeholder ? Setting.Setting.Placeholder : '輸入...';
|
||||
Setting.Setting.Rows = Setting.Setting.Rows ? Setting.Setting.Rows : 3;
|
||||
Setting.Setting.Select = Setting.Setting.Select ? Setting.Setting.Select : 'text';
|
||||
Setting.Setting.Required = Setting.Setting.Required === undefined ? true : Setting.Setting.Required;
|
||||
} else if (Setting.Mode == 'progress' || Setting.Mode == 'loading') {
|
||||
Setting.Setting.Delay = Setting.Setting.Delay ? Setting.Setting.Delay : 500;
|
||||
}
|
||||
//判斷 Setting.Html 是否為 object 物件 如果是就進行轉換
|
||||
if (typeof (Setting.Html) == 'object') {
|
||||
//套用變數
|
||||
Setting.ID = '#' + $(Setting.Html).attr('id');
|
||||
Setting.Html = $(Setting.Html).html();
|
||||
//移除前端 dom 物件內的資料
|
||||
$(Setting.ID).empty();
|
||||
}
|
||||
//放置於儲存物件變數內
|
||||
AlertBoxTempData[Setting.Code] = Setting;
|
||||
|
||||
|
||||
//執行 OnStart 顯示前 執行函數
|
||||
if (typeof (Setting.OnStart) == 'function') {
|
||||
Setting.OnStart(Setting.Code);
|
||||
}
|
||||
|
||||
|
||||
//啟用滾動禁用
|
||||
alertBoxDisabledStart();
|
||||
|
||||
|
||||
//填入遮罩
|
||||
$('body').append('<div class="AlertBoxDiv" dom-code="' + Setting.Code + '"></div>');
|
||||
//宣告容器變數
|
||||
var tempBox = $(".AlertBoxDiv[dom-code='" + Setting.Code + "']");
|
||||
//放入容器
|
||||
tempBox.append('<table>' +
|
||||
'<tr>' +
|
||||
'<td>' +
|
||||
'<div class="AlertBoxDivContent ' + Setting.OutsideClass + '" style="' + Setting.OutsideStyle + '"></div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'</table>');
|
||||
//如果有 Setting.Title 就放入標題列
|
||||
if (Setting.Title != '' && Setting.Title != null) {
|
||||
tempBox.find('.AlertBoxDivContent').append('<div class="AlertBoxDivTitle ' + Setting.TitleClass + '" style="' + Setting.TitleStyle + '">' + Setting.Title + '</div>');
|
||||
}
|
||||
//放入內容區塊
|
||||
tempBox.find('.AlertBoxDivContent').append('<div class="AlertBoxDivHtml ' + Setting.InsideClass + '" style="' + Setting.InsideStyle + '">' + Setting.Html + '</div>');
|
||||
//如果有 Setting.Ctrl 就放入控制列
|
||||
if (Setting.Ctrl != '' && Setting.Ctrl != null) {
|
||||
tempBox.find('.AlertBoxDivContent').append('<div class="AlertBoxDivCtrl ' + Setting.CtrlClass + '" style="' + Setting.CtrlStyle + '">' + Setting.Ctrl + '</div>');
|
||||
}
|
||||
|
||||
|
||||
//判斷若為 prompt 模式時 需要加入輸入視窗
|
||||
if (Setting.Mode == 'prompt') {
|
||||
//依照擴充設定帶入元件
|
||||
if (Setting.Setting.Mode == 'text' || Setting.Setting.Mode == 'password') {
|
||||
tempBox.find('.AlertBoxDivHtml').append('<div style="margin-top: 5px">' +
|
||||
'<input type="' + Setting.Setting.Mode + '" class="AlertBoxDivPromptDOM" placeholder="' + Setting.Setting.Placeholder + '" value="' + Setting.Setting.Value + '" />' +
|
||||
'<div class="inputLine"></div>' +
|
||||
'</div>');
|
||||
//綁定鍵盤判斷
|
||||
$('.AlertBoxDivPromptDOM').keyup(function (event) {
|
||||
if (event.which == 13) {
|
||||
alertClose('ok');
|
||||
}
|
||||
});
|
||||
} else if (Setting.Setting.Mode == 'textarea') {
|
||||
tempBox.find('.AlertBoxDivHtml').append('<div style="font-size: 0; margin-top: 5px">' +
|
||||
'<textarea rows="' + Setting.Setting.Rows + '" class="AlertBoxDivPromptDOM" placeholder="' + Setting.Setting.Placeholder + '">' + Setting.Setting.Value + '</textarea>' +
|
||||
'</div>');
|
||||
}
|
||||
}
|
||||
//判斷若為 progress 模式時 需要加入進度條
|
||||
if (Setting.Mode == 'progress') {
|
||||
//重新套用 內容區塊 內的資料結構
|
||||
tempBox.find('.AlertBoxDivHtml').empty();
|
||||
tempBox.find('.AlertBoxDivHtml').html('<div class="AlertBoxDivHtmlText">' + Setting.Html + '</div>');
|
||||
//插入進度條
|
||||
tempBox.find('.AlertBoxDivHtml').append('<div class="ProgressBar">' +
|
||||
'<div class="ProgressBar2" style="width: 0%"></div>' +
|
||||
'<div class="ProgressBarWord">' +
|
||||
'0%' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
}
|
||||
//判斷若為 loading 模式時 需要將欄位置中且最小高度重置
|
||||
if (Setting.Mode == 'loading') {
|
||||
tempBox.find('.AlertBoxDivHtml').css('text-align', 'center');
|
||||
tempBox.find('.AlertBoxDivHtml').css('min-height', 'initial');
|
||||
}
|
||||
|
||||
|
||||
//畫面失焦防止連點
|
||||
$(document.activeElement).blur();
|
||||
//預設指定聚焦
|
||||
if (Setting.Mode == 'prompt') {
|
||||
tempBox.find('.AlertBoxDivPromptDOM:first').focus();
|
||||
//判斷是否需要預設框選
|
||||
if (Setting.Setting.Select == true) {
|
||||
tempBox.find('.AlertBoxDivPromptDOM:first').select();
|
||||
}
|
||||
} else {
|
||||
tempBox.find('.AlertBoxDivCtrl button:last').focus();
|
||||
}
|
||||
|
||||
|
||||
//顯示視窗
|
||||
tempBox.animate({ opacity: 1 }, AlertBoxSetting.CoverSpeed, AlertBoxSetting.CoverTransition);
|
||||
tempBox.find('.AlertBoxDivContent').animate({ 'margin-top': '0px', 'margin-bottom': '0px' }, AlertBoxSetting.StartSpeed, AlertBoxSetting.StartTransition);
|
||||
|
||||
|
||||
//執行 OnRun 顯示時 執行函數
|
||||
if (typeof (Setting.OnRun) == 'function') {
|
||||
Setting.OnRun(Setting.Code);
|
||||
}
|
||||
//執行 OnReady 顯示後 執行函數 (依照動畫時間延遲執行)
|
||||
if (typeof (Setting.OnReady) == 'function') {
|
||||
$('body').delay(AlertBoxSetting.StartSpeed).show(1, function () {
|
||||
Setting.OnReady(Setting.Code);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//綁定觸控、點擊操作事件
|
||||
if (Setting.TouchClose == true) {
|
||||
if (navigator.userAgent.toLowerCase().match(/(android|iphone|ipad|ipod);?/i)) {
|
||||
//手機、平板用觸控
|
||||
tempBox.on('touchstart', '.AlertBoxDivContent', function (event) {
|
||||
//關閉觸發click
|
||||
event.stopPropagation();
|
||||
});
|
||||
tempBox.on('touchstart', function (event) {
|
||||
//執行關閉
|
||||
alertClose('cancel', Setting.Code, 'click');
|
||||
});
|
||||
} else {
|
||||
//電腦用點擊
|
||||
tempBox.on('click', '.AlertBoxDivContent', function (event) {
|
||||
//關閉觸發click
|
||||
event.stopPropagation();
|
||||
});
|
||||
tempBox.on('click', function (event) {
|
||||
//執行關閉
|
||||
alertClose('cancel', Setting.Code, 'click');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//console.dir(Setting)
|
||||
};
|
||||
//關閉視窗
|
||||
alertClose = function (Type, Code, Operating) {
|
||||
|
||||
//如果沒有 Code 碼就尋找最後一個容器的 Code 碼
|
||||
Code = Code ? Code : $(".AlertBoxDiv:last").attr('dom-code');
|
||||
//宣告容器變數
|
||||
var tempBox = $(".AlertBoxDiv[dom-code='" + Code + "']");
|
||||
//判斷變數是否還存在
|
||||
if (!AlertBoxTempData[Code]) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
//判斷是否需要無效化 (progress、loading模式使用)
|
||||
if ((AlertBoxTempData[Code].Mode == 'progress' || AlertBoxTempData[Code].Mode == 'loading') &&
|
||||
(Operating == 'esc' || Operating == 'click')) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
//判斷若為 prompt 模式時 取得輸入的值
|
||||
var tempValue = '';
|
||||
if (AlertBoxTempData[Code].Mode == 'prompt') {
|
||||
tempValue = $(".AlertBoxDiv[dom-code='" + Code + "']").find('.AlertBoxDivPromptDOM').val();
|
||||
//判斷是否必填
|
||||
if (AlertBoxTempData[Code].Setting.Required == true && tempValue == '' && Type == 'ok') {
|
||||
alertBox({
|
||||
Html: '<span style="color:#f00">請勿輸入空白！</span>',
|
||||
OnEnd: function () {
|
||||
tempBox.find('.AlertBoxDivPromptDOM:first').focus();
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//依照不同模式執行函數
|
||||
if (AlertBoxTempData[Code].Mode == 'alert' || AlertBoxTempData[Code].Mode == 'progress' || AlertBoxTempData[Code].Mode == 'loading') {
|
||||
// alert 及 progress 及 loading
|
||||
if (typeof (AlertBoxTempData[Code].OnClose) == 'function' && Type) {
|
||||
var tempOnClose = AlertBoxTempData[Code].OnClose(Type, tempValue);
|
||||
if (tempOnClose == false) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
} else if (AlertBoxTempData[Code].Mode == 'confirm' || AlertBoxTempData[Code].Mode == 'prompt') {
|
||||
// confirm 及 prompt
|
||||
if (typeof (AlertBoxTempData[Code].OnClose) == 'function' && (Type == 'ok' || Type == 'cancel')) {
|
||||
var tempOnClose = AlertBoxTempData[Code].OnClose(Type, tempValue);
|
||||
if (tempOnClose == false) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//關閉視窗
|
||||
tempBox.animate({ opacity: 0 }, AlertBoxSetting.CoverSpeed, AlertBoxSetting.CoverTransition);
|
||||
tempBox.find('.AlertBoxDivContent').animate({ 'margin-top': '20px', 'margin-bottom': '-20px' }, AlertBoxSetting.EndSpeed, AlertBoxSetting.EndTransition, function () {
|
||||
|
||||
//依照不同模式執行函數
|
||||
if (AlertBoxTempData[Code].Mode == 'alert') {
|
||||
// alert
|
||||
if (typeof (AlertBoxTempData[Code].OnOK) == 'function' && Type) {
|
||||
AlertBoxTempData[Code].OnOK(tempValue);
|
||||
}
|
||||
if (typeof (AlertBoxTempData[Code].OnCancel) == 'function' && Type) {
|
||||
AlertBoxTempData[Code].OnCancel();
|
||||
}
|
||||
if (typeof (AlertBoxTempData[Code].OnEnd) == 'function' && Type) {
|
||||
AlertBoxTempData[Code].OnEnd();
|
||||
}
|
||||
} else if (AlertBoxTempData[Code].Mode == 'confirm' || AlertBoxTempData[Code].Mode == 'prompt') {
|
||||
// confirm 及 prompt
|
||||
if (typeof (AlertBoxTempData[Code].OnOK) == 'function' && Type == 'ok') {
|
||||
AlertBoxTempData[Code].OnOK(tempValue);
|
||||
}
|
||||
if (typeof (AlertBoxTempData[Code].OnCancel) == 'function' && Type == 'cancel') {
|
||||
AlertBoxTempData[Code].OnCancel();
|
||||
}
|
||||
if (typeof (AlertBoxTempData[Code].OnEnd) == 'function' && (Type == 'ok' || Type == 'cancel')) {
|
||||
AlertBoxTempData[Code].OnEnd();
|
||||
}
|
||||
} else if (AlertBoxTempData[Code].Mode == 'progress' || AlertBoxTempData[Code].Mode == 'loading') {
|
||||
// progress 及 loading
|
||||
if (typeof (AlertBoxTempData[Code].OnOK) == 'function' && Type) {
|
||||
AlertBoxTempData[Code].OnOK(tempValue);
|
||||
}
|
||||
if (typeof (AlertBoxTempData[Code].OnCancel) == 'function' && Type) {
|
||||
AlertBoxTempData[Code].OnCancel();
|
||||
}
|
||||
if (typeof (AlertBoxTempData[Code].OnEnd) == 'function' && Type) {
|
||||
AlertBoxTempData[Code].OnEnd();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//判斷是物件還是字串模式
|
||||
if (AlertBoxTempData[Code].ID != null) {
|
||||
//將資料放回前端dom物件上
|
||||
$(AlertBoxTempData[Code].ID).append(AlertBoxTempData[Code].Html);
|
||||
}
|
||||
|
||||
|
||||
//關閉滾動禁用
|
||||
alertBoxDisabledEnd();
|
||||
|
||||
|
||||
//移除視窗物件
|
||||
tempBox.remove();
|
||||
|
||||
|
||||
//移除變數
|
||||
delete AlertBoxTempData[Code];
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
//改變進度條資訊 (progress模式專用)
|
||||
alertProgress = function (Percent, Html, AutoClose) {
|
||||
|
||||
//轉為數字
|
||||
Percent = parseInt(Percent);
|
||||
|
||||
|
||||
//尋找最後一個容器的 Code 碼
|
||||
Code = $(".AlertBoxDiv:last").attr('dom-code');
|
||||
//宣告容器變數
|
||||
var tempBox = $(".AlertBoxDiv[dom-code='" + Code + "']");
|
||||
//判斷變數是否還存在
|
||||
if (!AlertBoxTempData[Code]) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
//改變Html內容
|
||||
if (Html) {
|
||||
tempBox.find('.AlertBoxDivHtml .AlertBoxDivHtmlText').html(Html);
|
||||
}
|
||||
|
||||
|
||||
//賦予預設開啟使用自動關閉
|
||||
if (AutoClose == undefined) {
|
||||
AutoClose = true;
|
||||
}
|
||||
|
||||
|
||||
//判斷百分比是否大於100
|
||||
if (Percent >= 100 && AutoClose == true) {
|
||||
//改變進度為100
|
||||
tempBox.find('.AlertBoxDivHtml .ProgressBar2').css('width', '100%');
|
||||
tempBox.find('.AlertBoxDivHtml .ProgressBarWord').html('100%');
|
||||
|
||||
//延遲後關閉視窗
|
||||
$('body').delay(AlertBoxTempData[Code].Setting.Delay).show(1, function () {
|
||||
alertClose('over', Code);
|
||||
});
|
||||
|
||||
} else {
|
||||
//改變進度
|
||||
tempBox.find('.AlertBoxDivHtml .ProgressBar2').css('width', Percent + '%');
|
||||
tempBox.find('.AlertBoxDivHtml .ProgressBarWord').html(Percent + '%');
|
||||
}
|
||||
|
||||
};
|
||||
//改變內容資訊 (loading模式專用)
|
||||
alertLoadingMsg = function (Html, Code) {
|
||||
|
||||
//如果沒有 Code 碼就尋找最後一個容器的 Code 碼
|
||||
Code = Code ? Code : $(".AlertBoxDiv:last").attr('dom-code');
|
||||
//宣告容器變數
|
||||
var tempBox = $(".AlertBoxDiv[dom-code='" + Code + "']");
|
||||
//判斷變數是否還存在
|
||||
if (!AlertBoxTempData[Code]) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
//改變內容
|
||||
tempBox.find('.AlertBoxDivHtml').html(Html);
|
||||
|
||||
};
|
||||
//關閉loading視窗 (loading模式專用)
|
||||
alertLoadingEnd = function (Html, Speed, CallBack, Code) {
|
||||
|
||||
//如果沒有 Code 碼就尋找最後一個容器的 Code 碼
|
||||
Code = Code ? Code : $(".AlertBoxDiv:last").attr('dom-code');
|
||||
//宣告容器變數
|
||||
var tempBox = $(".AlertBoxDiv[dom-code='" + Code + "']");
|
||||
//判斷變數是否還存在
|
||||
if (!AlertBoxTempData[Code]) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
//改變內容
|
||||
if (Html != '' && Html != null && Html != undefined) {
|
||||
tempBox.find('.AlertBoxDivHtml').html(Html);
|
||||
}
|
||||
|
||||
|
||||
//套用延遲時間
|
||||
var tempSpeed = Speed ? Speed : AlertBoxTempData[Code].Setting.Delay;
|
||||
//套用 callback 函數
|
||||
if (typeof (CallBack) == 'function') {
|
||||
AlertBoxTempData[Code].OnEnd = CallBack;
|
||||
}
|
||||
|
||||
|
||||
//延遲後關閉視窗
|
||||
$('body').delay(tempSpeed).show(1, function () {
|
||||
alertClose('over', Code);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
//滾動禁用開始
|
||||
alertBoxDisabledStart = function () {
|
||||
|
||||
if (AlertBoxSetting.ScrollType == 'overflow') {
|
||||
|
||||
//遮罩 body 內容方式
|
||||
$('body').css('overflow', 'hidden');
|
||||
|
||||
} else if (AlertBoxSetting.ScrollType == 'mousewheel') {
|
||||
|
||||
//禁用滾動方式 (行動裝置不執行)
|
||||
//if (!navigator.userAgent.toLowerCase().match(/(android|iphone|ipad|ipod);?/i)) {
|
||||
//相加 html 與 body ，因應瀏覽器定義 scrollTop 的差異
|
||||
AlertBoxBodyScrollValue = $('html').scrollTop() + $('body').scrollTop();
|
||||
AlertBoxMouseWheelCheck = false;
|
||||
//}
|
||||
|
||||
}
|
||||
|
||||
//判斷是否使用失焦遮罩 開啟
|
||||
if (AlertBoxSetting.FilterBlur == true) {
|
||||
$(AlertBoxSetting.FilterTarget).css('filter', 'blur(' + AlertBoxSetting.FilterBlurValue + 'px)');
|
||||
}
|
||||
|
||||
};
|
||||
//滾動禁用結束
|
||||
alertBoxDisabledEnd = function () {
|
||||
|
||||
//場上所有視窗剩下最後一個時才開放
|
||||
var TempNumber = 0;
|
||||
$('.AlertBoxDiv').each(function (index, element) {
|
||||
TempNumber++;
|
||||
});
|
||||
if (TempNumber <= 1) {
|
||||
|
||||
if (AlertBoxSetting.ScrollType == 'overflow') {
|
||||
|
||||
//恢復 body 內容
|
||||
$('body').css('overflow', 'visible');
|
||||
|
||||
} else if (AlertBoxSetting.ScrollType == 'mousewheel') {
|
||||
|
||||
//開啟滾動使用 (行動裝置不執行)
|
||||
//if (!navigator.userAgent.toLowerCase().match(/(android|iphone|ipad|ipod);?/i)) {
|
||||
AlertBoxMouseWheelCheck = true;
|
||||
//}
|
||||
|
||||
}
|
||||
|
||||
//判斷是否使用失焦遮罩 關閉
|
||||
if (AlertBoxSetting.FilterBlur == true) {
|
||||
$(AlertBoxSetting.FilterTarget).css('filter', 'initial');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
//禁用滾動方式 專用監控
|
||||
$(window).scroll(function () {
|
||||
if (AlertBoxMouseWheelCheck == false) {
|
||||
$('html,body').scrollTop(AlertBoxBodyScrollValue);
|
||||
}
|
||||
});
|
||||
//判斷使否使用 ESC 關閉
|
||||
$(document).on('keyup', 'body', function (event) {
|
||||
//判斷在視窗開啟的情況下才可以關閉
|
||||
if (event.keyCode == 27 && AlertBoxSetting.EscClose == true) {
|
||||
if ($('.AlertBoxDiv').length > 0) {
|
||||
alertClose('cancel', null, 'esc');
|
||||
}
|
||||
}
|
||||
});
|
||||
////點擊空白處關閉視窗判斷
|
||||
//$(document).on('click', '.AlertBoxDivContent', function (event) {
|
||||
// if (AlertBoxSetting.TouchClose == true) {
|
||||
// //關閉觸發click
|
||||
// event.stopPropagation();
|
||||
// }
|
||||
//});
|
||||
//$(document).on('click', '.AlertBoxDiv', function (event) {
|
||||
// if (AlertBoxSetting.TouchClose == true) {
|
||||
// //執行關閉
|
||||
// alertClose('cancel', null, 'click');
|
||||
// }
|
||||
//});
|
||||
//$(document).on('touchstart', '.AlertBoxDivContent', function (event) {
|
||||
// if (AlertBoxSetting.TouchClose == true) {
|
||||
// //關閉觸發click
|
||||
// event.stopPropagation();
|
||||
// }
|
||||
//});
|
||||
//$(document).on('touchstart', '.AlertBoxDiv', function (event) {
|
||||
// if (AlertBoxSetting.TouchClose == true) {
|
||||
// //執行關閉
|
||||
// alertClose('cancel', null, 'click');
|
||||
// }
|
||||
//});
|
||||
|
||||
|
||||
//以下為相容舊版本函數
|
||||
if (AlertBoxSetting.Compatible == true) {
|
||||
|
||||
//alert
|
||||
alert_S = function (Html, OnEnd, Setting) {
|
||||
|
||||
Setting = Setting ? Setting : { style: '' };
|
||||
|
||||
alertBox({
|
||||
Mode: 'alert',
|
||||
Html: Html ? Html : '',
|
||||
//Title: '',
|
||||
OutsideStyle: Setting.style ? Setting.style : '',
|
||||
OnEnd: OnEnd ? OnEnd : null,
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//confirm
|
||||
confirm_S = function (Html, OnOK, OnCancel, Setting) {
|
||||
|
||||
Setting = Setting ? Setting : {
|
||||
style: '',
|
||||
onStart: function () { },
|
||||
onBeforeEnd: function () { return true; }
|
||||
};
|
||||
|
||||
alertBox({
|
||||
Mode: 'confirm',
|
||||
Html: Html ? Html : '',
|
||||
//Title: '',
|
||||
OutsideStyle: Setting.style ? Setting.style : '',
|
||||
OnReady: Setting.onStart ? Setting.onStart : null,
|
||||
OnOK: OnOK ? OnOK : null,
|
||||
OnCancel: OnCancel ? OnCancel : null,
|
||||
OnClose: Setting.onBeforeEnd ? Setting.onBeforeEnd : null,
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//prompt (單一輸入)
|
||||
prompt_S = function (Html, OnOK, Setting, OnCancel) {
|
||||
|
||||
Setting = Setting ? Setting : {
|
||||
style: '',
|
||||
value: '',
|
||||
placeholder: '輸入...',
|
||||
textarea: false,
|
||||
filter: '',
|
||||
select: false,
|
||||
required: true,
|
||||
};
|
||||
|
||||
alertBox({
|
||||
Mode: 'prompt',
|
||||
Html: Html ? Html : '',
|
||||
//Title: '',
|
||||
OutsideStyle: Setting.style ? Setting.style : '',
|
||||
OnOK: OnOK ? OnOK : null,
|
||||
OnCancel: OnCancel ? OnCancel : null,
|
||||
Setting: {
|
||||
Mode: Setting.textarea == true ? 'textarea' : 'text',
|
||||
Value: Setting.value ? Setting.value : '',
|
||||
Placeholder: Setting.placeholder ? Setting.placeholder : '輸入...',
|
||||
Select: Setting.select ? Setting.select : false,
|
||||
Required: Setting.required === undefined ? true : Setting.required,
|
||||
},
|
||||
OnReady: function (Code) {
|
||||
var tempFilter = Setting.filter ? Setting.filter : null;
|
||||
if (tempFilter != null) {
|
||||
$(".AlertBoxDiv[dom-code='" + Code + "']").find('.AlertBoxDivPromptDOM').attr('onkeyup', tempFilter);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
//prompt (多筆輸入) --- 先跳過
|
||||
|
||||
//loading
|
||||
loading_S = function (Html, OnReady, Setting) {
|
||||
|
||||
Setting = Setting ? Setting : { style: '' };
|
||||
|
||||
alertBox({
|
||||
Mode: 'loading',
|
||||
Html: Html ? Html : '',
|
||||
Title: '',
|
||||
Ctrl: '',
|
||||
OutsideStyle: Setting.style ? Setting.style : '',
|
||||
OnReady: OnReady ? OnReady : null,
|
||||
});
|
||||
|
||||
};
|
||||
loading_S_msg = function (Html) {
|
||||
$(".AlertBoxDiv:last").find('.AlertBoxDivHtml').html(Html);
|
||||
};
|
||||
loading_S_end = function (Html, Speed, OnEnd) {
|
||||
alertLoadingEnd(Html, Speed, OnEnd);
|
||||
};
|
||||
|
||||
//wait --- 先跳過
|
||||
|
||||
//float
|
||||
float_S = function (Html, Setting, OnRun, OnEnd) {
|
||||
|
||||
Setting = Setting ? Setting : {
|
||||
style: '',
|
||||
boxstyle: '',
|
||||
titlestyle: '',
|
||||
ctrlstyle: '',
|
||||
touchclose: false,
|
||||
titlehtml: '',
|
||||
ctrlhtml: '',
|
||||
};
|
||||
|
||||
alertBox({
|
||||
Mode: 'alert',
|
||||
Html: Html ? Html : '',
|
||||
Title: Setting.titlehtml ? Setting.titlehtml : '',
|
||||
Ctrl: Setting.ctrlhtml ? Setting.ctrlhtml : '<button onclick="float_S_end(\'OnClose\')" type="button" class="button btn_white"><i class="fa fa-times"></i> ' + AlertBoxSetting.CancelText + '</button>',
|
||||
OutsideStyle: Setting.style ? Setting.style : '',
|
||||
TitleStyle: Setting.titlestyle ? Setting.titlestyle : '',
|
||||
InsideStyle: Setting.boxstyle ? Setting.boxstyle : '',
|
||||
CtrlStyle: Setting.ctrlstyle ? Setting.ctrlstyle : '',
|
||||
TouchClose: Setting.touchclose === undefined ? false : Setting.touchclose,
|
||||
OnRun: OnRun ? OnRun : null,
|
||||
OnEnd: OnEnd ? OnEnd : null,
|
||||
});
|
||||
|
||||
};
|
||||
float_S_end = function (Type) {
|
||||
if (Type == 'OnClose') {
|
||||
alertClose('over');
|
||||
} else {
|
||||
alertClose();
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
2023
api/UseJS/dropdown2.js
Normal file
2023
api/UseJS/dropdown2.js
Normal file
File diff suppressed because it is too large
Load Diff
795
api/UseJS/tablelist.js
Normal file
795
api/UseJS/tablelist.js
Normal file
@@ -0,0 +1,795 @@
|
||||
/*
|
||||
Ver 1.5.2
|
||||
|
||||
★ 標籤語法：
|
||||
|
||||
變數使用方式預設為：@變數名稱 @物件名稱-變數名稱 {@變數名稱} {@物件名稱-變數名稱} 等四種方式，也可自由定義
|
||||
範例：@row @tablename-row {@row} {@tablename-row}
|
||||
|
||||
tbl-repeat="物件名稱" ※ 在需要複製的 DOM 物件上加上此標籤，可添加在複數物件上，物件之間必須緊貼並具連續性，
|
||||
以防止建立 DOM 時產生錯位的問題，帶參數時請使用 "@變數名稱" 或是 "@物件名稱-變數名稱" 帶入，
|
||||
範例如下：
|
||||
<tr tbl-repeat="物件名稱">
|
||||
<td rowspan="2">@row</td>
|
||||
<td>@value</td>
|
||||
</tr>
|
||||
<tr tbl-repeat="物件名稱">
|
||||
<td colspan="2">
|
||||
<button onclick="自訂函數(TableListGetItem('物件名稱',@index))" type="button">按鈕</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
tbl-build="物件名稱-NoData" ※ 當查無資料時，所顯示之物件，此為唯一物件，範例如下：
|
||||
<tr tbl-build="物件名稱-NoData">
|
||||
<td colspan="2">查無資料</td>
|
||||
</tr>
|
||||
|
||||
tbl-build="物件名稱-PageDrop" ※ 換頁下拉選單容器，此為唯一物件，範例：<div tbl-build="物件名稱-PageDrop"></div>
|
||||
|
||||
tbl-build="物件名稱-PerDrop" ※ 每頁筆數下拉選單容器，此為唯一物件，範例：<div tbl-build="物件名稱-PerDrop"></div>
|
||||
|
||||
tbl-build="物件名稱-Count" ※ 查詢到的資料總筆數，此為唯一物件，範例：<span tbl-build="物件名稱-Count"></span>
|
||||
|
||||
tbl-build="物件名稱-RunBtn" ※ 執行按鈕，可複數添加，範例如下：
|
||||
<button tbl-build="物件名稱-RunBtn" type="button" class="button btn_miku">查詢</button>
|
||||
|
||||
tbl-keep="物件名稱-Enter" ※ 用於監視輸入欄位，在按下 Enter 時自動執行查詢功能，可複數添加，範例如下：
|
||||
<input tbl-keep="物件名稱-Enter" type="text" />
|
||||
|
||||
tbl-keep="物件名稱-CheckAll" ※ 用於流水號全選(勾選)元件的監視與功能響應，僅可用於流水號操作，範例如下：
|
||||
<input tbl-keep="物件名稱-CheckAll" type="checkbox" />
|
||||
|
||||
tbl-keep="物件名稱-CheckBox" ※ 用於流水號勾選元件的監視，僅可用於流水號操作，亦可用於單選 (radio)，範例如下：
|
||||
<input tbl-keep="物件名稱-CheckBox" type="radio" />
|
||||
<input tbl-keep="物件名稱-CheckBox" type="checkbox" />
|
||||
|
||||
tbl-show="判斷式" ※ 此為全域判斷功能，也可帶入函數使用回傳 true 或 false 即可，
|
||||
若需要判斷之變數格式為字串，必須在頭尾加上 ' 符號，範例如下：
|
||||
<td tbl-show="'@string'=='字串'">@string</td>
|
||||
|
||||
===================================================================================================================================
|
||||
|
||||
★ 調用函數：
|
||||
|
||||
定義列表套件 > TableListBuild({ 設定參數 }) ※ 設定參數在下一階段說明
|
||||
執行查詢 > TableListRun('物件名稱') ※ 定義列表套件完成時就會自動執行
|
||||
前往指定頁數 > TableListSetPage('物件名稱',頁數) ※ 若超過最大頁數，就會到最後一頁
|
||||
取得指定位置資料 > TableListGetItem('物件名稱', @index) ※ 取得單筆資料，@index 也可為 @物件名稱-index (提供按鈕傳輸資料所使用)
|
||||
取得當前所勾選的資料 > var array = TableListGetCheck('物件名稱') ※ 資料以陣列 (array) 形式回傳
|
||||
執行全域顯示判斷 > TableListApply() ※ 配合 tbl-show 所使用，通常放在 OnEnd 函數中做使用
|
||||
|
||||
===================================================================================================================================
|
||||
|
||||
★ 設定參數 (*為必填)：
|
||||
|
||||
*物件名稱 Name ※ 輸入字串名稱
|
||||
*取得查詢參數 GetSearch ※ 請帶 function (ReSearch) { 還需判斷Recover功能之套用詳見範例 return Search; }
|
||||
此處 ReSearch 等同於 Search 參數
|
||||
*取得資料總筆數 GetCount ※ 請帶 function (Option) { return Count; }
|
||||
此處 Option 變數僅包含 Search 參數
|
||||
執行 Ajax 時請使用同步調用 (async = false)
|
||||
*執行資料撈取 GetData ※ 請帶 function (Option) { return DataArray; }
|
||||
此處 Option 變數包含 Offset、Fetch、NowPage、PerPage、Search 等參數
|
||||
執行 Ajax 時請使用同步調用 (async = false)
|
||||
回傳之 DataArray 陣列中資料須保留變數名稱供套件使用：{@row}、{@index}
|
||||
開始執行函數 OnStart ※ 請帶 function () { }
|
||||
結束執行函數 OnEnd ※ 請帶 function () { }
|
||||
|
||||
起始所在頁數 NowPage (預設:1) ※ 若開啟 Recover 功能則此設定會優先 Recover 紀錄之參數
|
||||
預設每頁筆數 PerPage (預設:10) ※ 若開啟 Recover 功能則此設定會優先 Recover 紀錄之參數
|
||||
狀態還原功能開關 Recover (預設:false) ※ 若開啟則使用者在返回頁面的時候會還原上一次的查詢狀態
|
||||
檢查總筆數是否正確 CountCheck (預設:true) ※ 檢查 Count 總筆數是否正確 若不正確就同步
|
||||
|
||||
自定義換頁文字 PageFormat (預設:'第 Page 頁') ※ 其中 Page 為固定參數不可移除
|
||||
自定義每頁文字 PerFormat (預設:'每頁顯示 Per 筆') ※ 其中 Per 為固定參數不可移除
|
||||
設定每頁筆數結構 PerSet (預設:[10, 20, 30, 50, 100, 200, 500, 1000])
|
||||
自定義套用語法格式 StrFormat (預設:[{ Start: '{@', End: '}' }, { Start: '@', End: '' }])
|
||||
※ 請注意陣列中之自定義語法，必須由複雜至精簡，才能正常運作
|
||||
|
||||
===================================================================================================================================
|
||||
|
||||
★ 定義語法範例： ( 請注意於內部函數所執行之 Ajax 都必須以同步方式執行 async = false )
|
||||
|
||||
TableListBuild({
|
||||
Name: '變數名稱',
|
||||
NowPage: 1,
|
||||
PerPage: 10,
|
||||
PageFormat: '第 Page 頁',
|
||||
PerFormat: '每頁顯示 Per 筆',
|
||||
PerSet: [10, 20, 30, 50, 100, 200, 500, 1000],
|
||||
Recover: true,
|
||||
OnStart: function () {
|
||||
//自動執行前執行之函數
|
||||
//執行讀取動畫 (範例)
|
||||
NProgress.start();
|
||||
},
|
||||
GetSearch: function (ReSearch) {
|
||||
//開啟 Recover 功能時需要將記錄的資料套用回介面上的物件
|
||||
if (ReSearch) {
|
||||
$('#KeyWord').val(ReSearch.KeyWord);
|
||||
$('#KeyWord2').val(ReSearch.KeyWord2);
|
||||
}
|
||||
//讀取介面上的物件數值傳送到 Search 變數之中
|
||||
var Search = {
|
||||
KeyWord: $('#KeyWord').val(),
|
||||
KeyWord2: $('#KeyWord2').val(),
|
||||
}
|
||||
return Search;
|
||||
},
|
||||
GetCount: function (Option) {
|
||||
//執行讀取動畫 (範例)
|
||||
NProgress.start();
|
||||
//設定Ajax要傳輸的資料 (此處須包含 Search 參數才會撈出正確的總筆數)
|
||||
var tempData = {
|
||||
Type: 'GetCount',
|
||||
KeyWord: Option.Search.KeyWord,
|
||||
KeyWord2: Option.Search.KeyWord2,
|
||||
};
|
||||
var Count = tools.ajax(tempData, ashxPath).Count;
|
||||
return Count;
|
||||
},
|
||||
GetData: function (Option) {
|
||||
//執行讀取動畫 (範例)
|
||||
NProgress.start();
|
||||
//設定Ajax要傳輸的資料 (其中 Offset、Fetch 為 SQL 查詢資料時所需要之參數 )
|
||||
var tempData = {
|
||||
Type: 'GetData',
|
||||
Offset: Option.Offset,
|
||||
Fetch: Option.Fetch,
|
||||
KeyWord: Option.Search.KeyWord,
|
||||
KeyWord2: Option.Search.KeyWord2,
|
||||
};
|
||||
var DataArray = tools.ajax(tempData, ashxPath).Data;
|
||||
return DataArray;
|
||||
},
|
||||
OnEnd: function () {
|
||||
//完成查詢時所執行之回調函數放此處
|
||||
//結束讀取動畫 (範例)
|
||||
NProgress.done();
|
||||
},
|
||||
});
|
||||
|
||||
===================================================================================================================================
|
||||
*/
|
||||
|
||||
|
||||
//宣告專用變數儲存物件
|
||||
var TableListTempData = {};
|
||||
|
||||
|
||||
//資料驗證/定義預設值/型態檢查
|
||||
TableListSettingCheck = function (Setting) {
|
||||
|
||||
Setting.Success = true;
|
||||
|
||||
//必填項目檢查
|
||||
if (!Setting) { console.info('缺乏參數[Setting]設定！'); Setting.Success = false; };
|
||||
if (!Setting.Name) { console.info('缺乏參數[Name]設定！'); Setting.Success = false; };
|
||||
if (!Setting.GetCount) { console.info('缺乏函數[GetCount]設定！'); Setting.Success = false; };
|
||||
if (!Setting.GetSearch) { console.info('缺乏函數[GetSearch]設定！'); Setting.Success = false; };
|
||||
if (!Setting.GetData) { console.info('缺乏函數[GetData]設定！'); Setting.Success = false; };
|
||||
|
||||
//定義預設值
|
||||
Setting.DataArray = Setting.DataArray ? Setting.DataArray : []; //撈取資料前先套用空白資料陣列
|
||||
Setting.Count = Setting.Count ? Setting.Count : 0; //撈取資料前先套用 0
|
||||
Setting.AllPage = Setting.AllPage ? Setting.AllPage : 1; //撈取資料前先套用 1
|
||||
Setting.DomHtml = Setting.DomHtml ? Setting.DomHtml : {}; //撈取資料前先套用空白物件
|
||||
Setting.Option = Setting.Option ? Setting.Option : {}; //撈取資料前先套用空白物件
|
||||
Setting.Search = Setting.Search ? Setting.Search : null; //撈取資料前先套用空值
|
||||
Setting.NowPage = Setting.NowPage ? Setting.NowPage : 1; //起始所在頁數
|
||||
Setting.PerPage = Setting.PerPage ? Setting.PerPage : 10; //預設每頁筆數
|
||||
Setting.PageFormat = Setting.PageFormat ? Setting.PageFormat : '第 Page 頁'; //自定義 換頁文字
|
||||
Setting.PerFormat = Setting.PerFormat ? Setting.PerFormat : '每頁顯示 Per 筆'; //自定義 每頁文字
|
||||
Setting.PerSet = Setting.PerSet ? Setting.PerSet : [10, 20, 30, 50, 100, 200, 500, 1000]; //設定每頁筆數結構
|
||||
Setting.Recover = Setting.Recover ? Setting.Recover : false; //紀錄查詢及換頁狀態
|
||||
Setting.CountCheck = Setting.CountCheck == true ? Setting.CountCheck : false; //檢查 Count 總筆數是否正確 若不正確就同步
|
||||
|
||||
//定義預設值 自定義 套用語法格式
|
||||
Setting.StrFormat = Setting.StrFormat ? Setting.StrFormat : [
|
||||
{ Start: '{@', End: '}' },
|
||||
{ Start: '@', End: '' },
|
||||
];
|
||||
|
||||
//型態檢查
|
||||
if (typeof (Setting) != 'object') { console.info('參數[Setting]格式錯誤！必須為 object'); Setting.Success = false; };
|
||||
if (typeof (Setting.Name) != 'string') { console.info('參數[Name]格式錯誤！必須為 string'); Setting.Success = false; };
|
||||
if (typeof (Setting.GetCount) != 'function') { console.info('函數[GetCount]格式錯誤！必須為 function'); Setting.Success = false; };
|
||||
if (typeof (Setting.GetSearch) != 'function') { console.info('函數[GetSearch]格式錯誤！必須為 function'); Setting.Success = false; };
|
||||
if (typeof (Setting.GetData) != 'function') { console.info('函數[GetData]格式錯誤！必須為 function'); Setting.Success = false; };
|
||||
if (typeof (Setting.NowPage) != 'number') { console.info('參數[NowPage]格式錯誤！必須為 number'); Setting.Success = false; };
|
||||
if (typeof (Setting.PerPage) != 'number') { console.info('參數[PerPage]格式錯誤！必須為 number'); Setting.Success = false; };
|
||||
if (typeof (Setting.PageFormat) != 'string') { console.info('參數[PageFormat]格式錯誤！必須為 string'); Setting.Success = false; };
|
||||
if (typeof (Setting.PerFormat) != 'string') { console.info('參數[PerFormat]格式錯誤！必須為 string'); Setting.Success = false; };
|
||||
if (typeof (Setting.PerSet) != 'object') { console.info('參數[PerSet]格式錯誤！必須為 array'); Setting.Success = false; };
|
||||
if (typeof (Setting.Recover) != 'boolean') { console.info('參數[PerSet]格式錯誤！必須為 boolean'); Setting.Success = false; };
|
||||
if (typeof (Setting.CountCheck) != 'boolean') { console.info('參數[CountCheck]格式錯誤！必須為 boolean'); Setting.Success = false; };
|
||||
|
||||
//下拉選單ID設定
|
||||
Setting.PageDropID = Setting.PageDropID ? Setting.PageDropID : 'TableList_' + Setting.Name + '_PageDrop';
|
||||
Setting.PerDropID = Setting.PerDropID ? Setting.PerDropID : 'TableList_' + Setting.Name + '_PerDrop';
|
||||
|
||||
//恢復記錄過的資料 ( Recover相關 )
|
||||
if (Setting.Recover == true && TableListRecoverLoad(Setting.Name) != null) {
|
||||
var StorageLoad = TableListRecoverLoad(Setting.Name);
|
||||
Setting.Count = StorageLoad.Count;
|
||||
Setting.AllPage = StorageLoad.AllPage;
|
||||
Setting.NowPage = StorageLoad.NowPage;
|
||||
Setting.PerPage = StorageLoad.PerPage;
|
||||
}
|
||||
|
||||
return Setting;
|
||||
};
|
||||
//定義物件
|
||||
TableListBuild = function (Setting) {
|
||||
|
||||
//等待所有 js 檔案完全執行完畢才開始定義 防止跟其他架框模組相衝 (angularjs)
|
||||
$(function () {
|
||||
|
||||
//資料驗證
|
||||
Setting = TableListSettingCheck(Setting);
|
||||
if (Setting.Success == false) { return; }
|
||||
|
||||
|
||||
//轉換替代名稱
|
||||
var Name = Setting.Name;
|
||||
|
||||
|
||||
//存入資料物件矩陣
|
||||
TableListTempData[Name] = Setting;
|
||||
|
||||
|
||||
//取得 Name 物件 DOM 的 Html (顯示判斷執行過查詢後才跑)
|
||||
var tempXPath = TableListGetXPath('repeat', Name, null);
|
||||
TableListGetDomHtml(Name, 'Data', tempXPath);
|
||||
|
||||
|
||||
//取得 NoData 擴充物件 DOM 的 Html (顯示判斷執行過查詢後才跑)
|
||||
tempXPath = TableListGetXPath('build', Name, 'NoData');
|
||||
TableListGetDomHtml(Name, 'NoData', tempXPath);
|
||||
|
||||
|
||||
//擴充物件 PageDrop 建立
|
||||
TableListPluginPageDrop(Name);
|
||||
//擴充物件 PerDrop 建立
|
||||
TableListPluginPerDrop(Name);
|
||||
|
||||
|
||||
//預先套用資料筆數 (這樣在執行前畫面的筆數上才不會出現空白無資料)
|
||||
tempXPath = TableListGetXPath('build', Name, 'Count');
|
||||
$(tempXPath).html(TableListTempData[Name].Count);
|
||||
|
||||
|
||||
//設置查詢按鈕 onclick 事件
|
||||
tempXPath = TableListGetXPath('build', Name, 'RunBtn');
|
||||
$(tempXPath).attr('onclick', "TableListRun('" + Name + "')");
|
||||
|
||||
|
||||
//勾選元件 CheckAll 全選按鈕 onchange 事件
|
||||
tempXPath = TableListGetXPath('keep', Name, 'CheckAll');
|
||||
$(tempXPath).attr('onchange', "TableListCheckAll('" + Name + "')");
|
||||
|
||||
|
||||
//設置鍵盤監視 (用在關鍵字查詢時的 Enter 事件)
|
||||
tempXPath = TableListGetXPath('keep', Name, 'Enter');
|
||||
$(tempXPath).keyup(function (event) {
|
||||
if (event.keyCode == 13) {
|
||||
TableListRun(Name);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//執行開始函數
|
||||
if (typeof (TableListTempData[Name].OnStart) == 'function') {
|
||||
TableListTempData[Name].OnStart();
|
||||
}
|
||||
|
||||
|
||||
//主動執行
|
||||
TableListRun(Name, 'First');
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
//執行查詢
|
||||
TableListRun = function (Name, Type) {
|
||||
|
||||
//換頁、切換每頁筆數 執行時，不執行取得總筆數(GetCount)以及關鍵字取得的函數(GetSearch)
|
||||
if (Type != 'DropSkip') {
|
||||
|
||||
//取得查詢條件 若啟動 Recover 功能 則提供上一次的 Option.Search 紀錄 ( Recover相關 )
|
||||
if (Type == 'First' &&
|
||||
TableListTempData[Name].Recover == true &&
|
||||
TableListRecoverLoad(Name) != null) {
|
||||
|
||||
TableListTempData[Name].Search = TableListTempData[Name].GetSearch(TableListRecoverLoad(Name).Search);
|
||||
|
||||
} else {
|
||||
|
||||
TableListTempData[Name].Search = TableListTempData[Name].GetSearch();
|
||||
|
||||
}
|
||||
|
||||
|
||||
////執行函數 取得總筆數 (提供 Search 參數)
|
||||
//TableListTempData[Name].Count = TableListTempData[Name].GetCount({
|
||||
// Search: TableListTempData[Name].Search,
|
||||
//});
|
||||
|
||||
|
||||
//正常查詢 非首次執行 且不是指定換頁時 需要強迫返回第1頁 ( Recover相關 )
|
||||
if (Type != 'First' && Type != 'SetPage') {
|
||||
TableListTempData[Name].NowPage = 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
//執行函數 取得總筆數 (提供 Search 參數)
|
||||
TableListTempData[Name].Count = TableListTempData[Name].GetCount({
|
||||
Search: TableListTempData[Name].Search,
|
||||
});
|
||||
|
||||
|
||||
//判斷是否超過最大頁數 超過就到最後一頁
|
||||
if (TableListTempData[Name].NowPage > TableListTempData[Name].AllPage) {
|
||||
TableListTempData[Name].NowPage = TableListTempData[Name].AllPage;
|
||||
}
|
||||
|
||||
|
||||
//執行資料撈取 (提供 Option 變數)
|
||||
TableListTempData[Name].Option = {
|
||||
Offset: (TableListTempData[Name].NowPage - 1) * TableListTempData[Name].PerPage,
|
||||
Fetch: TableListTempData[Name].PerPage,
|
||||
NowPage: TableListTempData[Name].NowPage,
|
||||
PerPage: TableListTempData[Name].PerPage,
|
||||
//AllPage: TableListTempData[Name].AllPage,
|
||||
//Count: TableListTempData[Name].Count,
|
||||
Search: TableListTempData[Name].Search,
|
||||
};
|
||||
TableListTempData[Name].DataArray = TableListTempData[Name].GetData(TableListTempData[Name].Option);
|
||||
//套用保留變數 ( 同時記錄最大的 row 讓後面的 Count 可以驗證 )
|
||||
var maxRow = 0;
|
||||
for (var i = 0; i < TableListTempData[Name].DataArray.length; i++) {
|
||||
|
||||
TableListTempData[Name].DataArray[i]['row'] = (TableListTempData[Name].NowPage * TableListTempData[Name].PerPage) + (i + 1) - TableListTempData[Name].PerPage;
|
||||
TableListTempData[Name].DataArray[i]['index'] = i;
|
||||
|
||||
//記錄最大的 row
|
||||
maxRow = TableListTempData[Name].DataArray[i]['row'];
|
||||
|
||||
}
|
||||
|
||||
|
||||
//再次檢查 Count 總筆數是否正確 若不正確就同步
|
||||
if (maxRow > TableListTempData[Name].Count && TableListTempData[Name].CountCheck == true) {
|
||||
TableListTempData[Name].Count = maxRow;
|
||||
}
|
||||
|
||||
|
||||
//套用資料總筆數
|
||||
tempXPath = TableListGetXPath('build', Name, 'Count');
|
||||
$(tempXPath).html(TableListTempData[Name].Count);
|
||||
|
||||
|
||||
//計算頁數
|
||||
TableListTempData[Name].AllPage = Math.ceil(TableListTempData[Name].Count / TableListTempData[Name].PerPage)
|
||||
TableListTempData[Name].AllPage = TableListTempData[Name].AllPage == 0 ? 1 : TableListTempData[Name].AllPage;
|
||||
|
||||
|
||||
//擴充物件 PageDrop 建立
|
||||
TableListPluginPageDrop(Name);
|
||||
//擴充物件 PerDrop 建立
|
||||
TableListPluginPerDrop(Name);
|
||||
|
||||
|
||||
//渲染 DomHtml 函數
|
||||
TableListDomHtmlBuild(Name);
|
||||
|
||||
|
||||
//儲存查詢操作狀態 (不管有沒有開啟都記錄 才可以動態修改)
|
||||
TableListRecoverSave(Name);
|
||||
|
||||
|
||||
//擴充物件 NoData 顯示判斷
|
||||
TableListPluginNoData(Name);
|
||||
|
||||
|
||||
//還原勾選元件 CheckAll 的勾選狀態
|
||||
var EvenTag = TableListGetXPath('keep', Name, 'CheckAll');
|
||||
$(EvenTag).prop('checked', false);
|
||||
|
||||
|
||||
//執行結束函數
|
||||
if (typeof (TableListTempData[Name].OnEnd) == 'function') {
|
||||
TableListTempData[Name].OnEnd();
|
||||
}
|
||||
|
||||
};
|
||||
//前往指定頁數
|
||||
TableListSetPage = function (Name, Page) {
|
||||
|
||||
//更改換頁下拉選單資訊
|
||||
DropListSet(TableListTempData[Name].PageDropID, [Page]);
|
||||
TableListTempData[Name].NowPage = Page;
|
||||
|
||||
//執行查詢
|
||||
TableListRun(Name, 'SetPage');
|
||||
|
||||
};
|
||||
|
||||
|
||||
//渲染 DomHtml 函數
|
||||
TableListDomHtmlBuild = function (Name) {
|
||||
|
||||
//先移除物件 (才不會重複置入)
|
||||
var tempXPath = TableListGetXPath('repeat', Name, null);
|
||||
$(tempXPath).remove();
|
||||
tempXPath = TableListGetXPath('build', Name, 'NoData');
|
||||
$(tempXPath).remove();
|
||||
|
||||
|
||||
//渲染資料陣列到畫面上 (取得父容器位置)
|
||||
var EvenTag = TableListGetParentXPath('Data', Name);
|
||||
|
||||
|
||||
//迴圈 資料陣列
|
||||
for (var d = 0; d < TableListTempData[Name].DataArray.length; d++) {
|
||||
|
||||
//迴圈 DomHtml 模組
|
||||
for (var m = 0; m < TableListTempData[Name].DomHtml.Data.length; m++) {
|
||||
|
||||
//擷取 Html
|
||||
var tempHtml = TableListTempData[Name].DomHtml.Data[m];
|
||||
|
||||
//過濾資料陣列變數
|
||||
var tempStr = [];
|
||||
for (var str in TableListTempData[Name].DataArray[d]) {
|
||||
tempStr.push({
|
||||
Str: str,
|
||||
Length: str.length,
|
||||
});
|
||||
}
|
||||
//文字排序 由長至短
|
||||
tempStr.sort(function (a, b) { return b['Length'] - a['Length']; });
|
||||
|
||||
//迴圈 資料陣列變數
|
||||
for (var i = 0; i < tempStr.length; i++) {
|
||||
|
||||
//取出資料名稱
|
||||
var str = tempStr[i].Str;
|
||||
|
||||
for (var s = 0; s < TableListTempData[Name].StrFormat.length; s++) {
|
||||
|
||||
//取出頭尾取代字串
|
||||
var start = TableListTempData[Name].StrFormat[s].Start;
|
||||
var end = TableListTempData[Name].StrFormat[s].End;
|
||||
|
||||
//製作標籤 (單純的標籤，例如：{@row})
|
||||
var regex = new RegExp(start + str + end, 'g');
|
||||
//取代資料
|
||||
tempHtml = tempHtml.replace(regex, TableListTempData[Name].DataArray[d][str]);
|
||||
|
||||
//製作標籤 (複合式標籤，例如：{@物件名稱-row})
|
||||
regex = new RegExp(start + Name + '-' + str + end, 'g');
|
||||
//取代資料
|
||||
tempHtml = tempHtml.replace(regex, TableListTempData[Name].DataArray[d][str]);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//推入資料
|
||||
$(EvenTag).append(tempHtml);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
//擴充物件 NoData 顯示判斷
|
||||
TableListPluginNoData = function (Name) {
|
||||
|
||||
//使用 XPath 選取 DOM 物件 (包含父容器)
|
||||
var ParentEvenTag = TableListGetParentXPath('NoData', Name);
|
||||
var EvenTag = TableListGetXPath('build', Name, 'NoData');
|
||||
|
||||
if (TableListTempData[Name].DataArray.length == 0) {
|
||||
$(ParentEvenTag).append(TableListTempData[Name].DomHtml.NoData);
|
||||
} else {
|
||||
$(EvenTag).remove();
|
||||
}
|
||||
|
||||
};
|
||||
//擴充物件 PageDrop 建立
|
||||
TableListPluginPageDrop = function (Name) {
|
||||
|
||||
//使用 XPath 選取 DOM 物件
|
||||
var EvenTag = TableListGetXPath('build', Name, 'PageDrop');
|
||||
if ($(EvenTag).length == 0) { return; }
|
||||
|
||||
|
||||
//容器設定 (須配合套件 _dropdown2.js)
|
||||
$(EvenTag).attr('id', TableListTempData[Name].PageDropID);
|
||||
$(EvenTag).addClass('DropList');
|
||||
|
||||
|
||||
//若超過300頁 就開啟查詢優先模式
|
||||
var TempSearchPriority = false;
|
||||
if (TableListTempData[Name].AllPage >= 300) {
|
||||
TempSearchPriority = true;
|
||||
}
|
||||
|
||||
|
||||
//取得自定義文字設定
|
||||
var TempFormat = TableListTempData[Name].PageFormat.split('Page');
|
||||
var TempFormatA = '';
|
||||
var TempFormatB = '';
|
||||
TempFormatA = TempFormat[0];
|
||||
TempFormatB = TempFormat[1];
|
||||
|
||||
|
||||
//製作下拉選單變數
|
||||
var TempData = [{ Optgroup: '', Option: [] }];
|
||||
for (var i = 0; i < TableListTempData[Name].AllPage; i++) {
|
||||
TempData[0].Option.push({
|
||||
Text: TempFormatA + (i + 1) + TempFormatB,
|
||||
Val: (i + 1)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
////超過300頁 就開啟群組模式 --- 暫時不使用
|
||||
//var CheckGroupList = false;
|
||||
//var TempData = [];
|
||||
//if (TableListTempData[Name].AllPage >= 300) {
|
||||
//
|
||||
// //超過300筆就使用群組分組
|
||||
// CheckGroupList = true;
|
||||
//
|
||||
// var tempRange = 100;
|
||||
// var tempCount = Math.ceil(TableListTempData[Name].AllPage / tempRange);
|
||||
//
|
||||
// for (var g = 1; g <= tempCount; g++) {
|
||||
//
|
||||
// var tempStart = g * tempRange - tempRange + 1;
|
||||
// var tempEnd = ((g + 1) * tempRange - tempRange) >= TableListTempData[Name].AllPage ? TableListTempData[Name].AllPage : ((g + 1) * tempRange - tempRange);
|
||||
//
|
||||
// var tempOption = [];
|
||||
// for (var i = 0; i < TableListTempData[Name].AllPage; i++) {
|
||||
// if ((i + 1) >= tempStart && (i + 1) <= tempEnd) {
|
||||
// tempOption.push({
|
||||
// Text: TempFormatA + (i + 1) + TempFormatB,
|
||||
// Val: (i + 1)
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// TempData.push({
|
||||
// Optgroup: tempStart + ' 至 ' + tempEnd,
|
||||
// Option: tempOption
|
||||
// })
|
||||
//
|
||||
// }
|
||||
//
|
||||
//} else {
|
||||
//
|
||||
// //沒超過就正常套用
|
||||
// TempData = [{ Optgroup: '', Option: [] }];
|
||||
// for (var i = 0; i < TableListTempData[Name].AllPage; i++) {
|
||||
// TempData[0].Option.push({
|
||||
// Text: TempFormatA + (i + 1) + TempFormatB,
|
||||
// Val: (i + 1)
|
||||
// });
|
||||
// }
|
||||
//
|
||||
//}
|
||||
|
||||
|
||||
//建立下拉選單
|
||||
DropListSetting({
|
||||
ID: TableListTempData[Name].PageDropID,
|
||||
Data: TempData,
|
||||
Select: [TableListTempData[Name].NowPage],
|
||||
Class: 'button btn_white',
|
||||
ArrowChange: true,
|
||||
ArrowClass: 'button btn_white',
|
||||
Search: true,
|
||||
//GroupList: CheckGroupList,
|
||||
//GroupListStart: CheckGroupList,
|
||||
SearchPriority: TempSearchPriority,
|
||||
OnEnd: function (Select) {
|
||||
|
||||
//套用資料
|
||||
TableListTempData[Name].NowPage = Select[0];
|
||||
|
||||
//執行 Run 函數 (換頁也必須跑 GetCount 不然可能跟真實資料有差異)
|
||||
TableListRun(Name, 'DropSkip');
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
//擴充物件 PerDrop 建立
|
||||
TableListPluginPerDrop = function (Name) {
|
||||
|
||||
//使用 XPath 選取 DOM 物件
|
||||
var EvenTag = TableListGetXPath('build', Name, 'PerDrop');
|
||||
if ($(EvenTag).length == 0) { return; }
|
||||
|
||||
|
||||
//容器設定 (須配合套件 _dropdown2.js)
|
||||
$(EvenTag).attr('id', TableListTempData[Name].PerDropID);
|
||||
$(EvenTag).addClass('DropList');
|
||||
|
||||
|
||||
//取得自定義文字設定
|
||||
var TempFormat = TableListTempData[Name].PerFormat.split('Per');
|
||||
var TempFormatA = '';
|
||||
var TempFormatB = '';
|
||||
TempFormatA = TempFormat[0];
|
||||
TempFormatB = TempFormat[1];
|
||||
|
||||
|
||||
//製作下拉選單變數
|
||||
var TempData = [{ Optgroup: '', Option: [] }];
|
||||
for (var i = 0; i < TableListTempData[Name].PerSet.length; i++) {
|
||||
TempData[0].Option.push({
|
||||
Text: TempFormatA + TableListTempData[Name].PerSet[i] + TempFormatB,
|
||||
Val: TableListTempData[Name].PerSet[i]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//檢查 PerPage 是否有在 PerSet 設定之中
|
||||
var tempCheck = false;
|
||||
for (var i = 0; i < TableListTempData[Name].PerSet.length; i++) {
|
||||
if (TableListTempData[Name].PerPage == TableListTempData[Name].PerSet[i]) {
|
||||
tempCheck = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
TableListTempData[Name].PerPage = tempCheck ? TableListTempData[Name].PerPage : TableListTempData[Name].PerSet[0]
|
||||
|
||||
|
||||
//建立下拉選單
|
||||
DropListSetting({
|
||||
ID: TableListTempData[Name].PerDropID,
|
||||
Data: TempData,
|
||||
Select: [TableListTempData[Name].PerPage],
|
||||
Class: 'button btn_white',
|
||||
OnEnd: function (Select) {
|
||||
|
||||
//回到第一頁
|
||||
TableListTempData[Name].NowPage = 1;
|
||||
//套用資料
|
||||
TableListTempData[Name].PerPage = Select[0];
|
||||
|
||||
//執行 Run 函數
|
||||
TableListRun(Name, 'DropSkip');
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
//使用 XPath 選取 DOM 物件函數
|
||||
TableListGetXPath = function (Mode, Name, XPath) {
|
||||
|
||||
var tempXPath = XPath ? '-' + XPath : '';
|
||||
|
||||
var EvenTag = "[tbl-" + Mode + "='" + Name + tempXPath + "'],[data-tbl-" + Mode + "='" + Name + tempXPath + "']";
|
||||
|
||||
return EvenTag;
|
||||
};
|
||||
//使用 XPath 選取父容器 DOM 物件函數
|
||||
TableListGetParentXPath = function (ObjectName, Name) {
|
||||
|
||||
var EvenTag = "[tbl-parent-" + ObjectName.toLowerCase() + "='" + Name + "'],[data-tbl-parent-" + ObjectName.toLowerCase() + "='" + Name + "']";
|
||||
|
||||
return EvenTag;
|
||||
};
|
||||
//取得物件 DOM 的 Html 套用至矩資料物件陣中
|
||||
TableListGetDomHtml = function (Name, ObjectName, EvenTag) {
|
||||
|
||||
var EvenArray = $(EvenTag);
|
||||
|
||||
if (EvenArray.length > 0) {
|
||||
|
||||
//添加父容器標籤
|
||||
$(EvenTag).parent().attr('tbl-parent-' + ObjectName, Name);
|
||||
|
||||
//宣告容器
|
||||
TableListTempData[Name].DomHtml[ObjectName] = [];
|
||||
|
||||
//擷取 Html
|
||||
for (var i = 0; i < EvenArray.length; i++) {
|
||||
TableListTempData[Name].DomHtml[ObjectName].push(EvenArray[i].outerHTML);
|
||||
}
|
||||
|
||||
//移除物件
|
||||
EvenArray.remove();
|
||||
|
||||
} else {
|
||||
|
||||
//返回空值
|
||||
TableListTempData[Name].DomHtml[ObjectName] = null;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
//Recover儲存功能
|
||||
TableListRecoverSave = function (Name) {
|
||||
var StorageSave = TableListTempData[Name].Option;
|
||||
sessionStorage.setItem('TableListRecoverSave' + Name, JSON.stringify(StorageSave));
|
||||
};
|
||||
//Recover讀取功能
|
||||
TableListRecoverLoad = function (Name) {
|
||||
var StorageLoad = jQuery.parseJSON(sessionStorage.getItem('TableListRecoverSave' + Name));
|
||||
return StorageLoad;
|
||||
};
|
||||
|
||||
|
||||
//取得指定位置資料
|
||||
TableListGetItem = function (Name, Index) {
|
||||
return TableListTempData[Name].DataArray[Index];
|
||||
};
|
||||
//勾選元件 CheckAll 全選監視
|
||||
TableListCheckAll = function (Name) {
|
||||
|
||||
//取得全選元件的勾選狀態
|
||||
var EvenTag = TableListGetXPath('keep', Name, 'CheckAll');
|
||||
var tempAllCheck = $(EvenTag).prop('checked');
|
||||
|
||||
//將當前所有 CheckBox 元件與自身同步
|
||||
EvenTag = TableListGetXPath('keep', Name, 'CheckBox');
|
||||
$(EvenTag).each(function (index, element) {
|
||||
element.checked = tempAllCheck;
|
||||
});
|
||||
|
||||
};
|
||||
//取得所有有勾選的 CheckBox 資料
|
||||
TableListGetCheck = function (Name) {
|
||||
|
||||
var tempArray = [];
|
||||
|
||||
var EvenTag = TableListGetXPath('keep', Name, 'CheckBox');
|
||||
|
||||
$(EvenTag).each(function (index, element) {
|
||||
if (element.checked) {
|
||||
tempArray.push(TableListTempData[Name].DataArray[index]);
|
||||
}
|
||||
});
|
||||
|
||||
return tempArray;
|
||||
};
|
||||
|
||||
//全域功能 判斷顯示 ( 目前只支援 tbl-show )
|
||||
TableListApply = function () {
|
||||
|
||||
//取得畫面上所有 tbl-show 物件
|
||||
var EvenTag = "[tbl-show],[data-tbl-show]";
|
||||
|
||||
$(EvenTag).each(function (index, element) {
|
||||
|
||||
var check = '';
|
||||
|
||||
if ($(element).attr('tbl-show')) {
|
||||
check = $(element).attr('tbl-show');
|
||||
} else if ($(element).attr('data-tbl-show')) {
|
||||
check = $(element).attr('data-tbl-show');
|
||||
}
|
||||
|
||||
if (eval(check)) {
|
||||
$(element).show();
|
||||
} else {
|
||||
$(element).hide();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
1489
api/UseJS/timepick.js
Normal file
1489
api/UseJS/timepick.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user