You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

418 lines
24 KiB

/********************************************
* 函數名稱:
* 目的:讀取畫面時,執行設定
* 作者:Gary
* 時間:2014/07/15
*********************************************/
$(document).ready(function () {
if (!tbExist("tbAreaValue")) { //如果地區搜尋相關資料沒有存在則執行
getAreaByAjax(); //從WebService讀取地區搜尋相關資料,使用Json格式傳回
//getGroupFreeListByAjax();
}
else {
CreateBasisDiv("DivArea"); //製作基本的Div
CreateDivInfo("DivArea", "tbAreaValue"); //製作區域選擇Div資料
objbind("DivArea"); //綁定事件
//CreateBasisDiv("DivGroup"); //製作基本的Div
//CreateDivInfo("DivGroup", "tbGroupFreeList"); //製作區域選擇Div資料
//objbind("DivGroup"); //綁定事件
}
CreateBasisDiv("DivTime"); //製作基本的Div
CreateTimeInfo("DivTime")
});
/********************************************
* 函數名稱:objbind()
* 目的:綁定事件
* 作者:Gary
* 時間:2014/07/24
* 參數說明:strDivID:主要的DivID
*********************************************/
function objbind(strDivID) {
var strDivPopId = "|";
$(".divPopClass").each(function () {
strDivPopId += this.id + "|";
})
$('body').click(function (evt) {
if (strDivPopId.indexOf("|" + $(evt.target).attr("id") + "|") == -1 //判斷點選的地方是否是屬於DivPop物件,如果不是則為True
&& strDivPopId.indexOf("|" + $(evt.target).parents(".divPopClass").attr("id") + "|") == -1 //判斷點選的地方是否是屬於DivPop物件,如果不是則為True
&& $(evt.target).attr("showtype") == null //判斷點選的地方是否是觸發DivPop物件,如果不是則為True
&& evt.target.id != "btnResetDate"
) {
hidDiv(); //如果上述條件皆符合,隱藏所有DivPop
}
});
$("#" + strDivID + " .divWidth .divWidthChild").each(function () { //找尋所需的div
$(this).bind("click", function () { divClick(this, strDivID) }); //綁定click事件
})
}
/********************************************
* 函數名稱:divClick(obj)
* 目的:綁定事件
* 作者:Gary
* 時間:2014/07/24
* 參數說明:obj:物件
*********************************************/
function divClick(obj, strDivID) {
$("#" + strDivID + " .divWidth .divWidthChild").each(function () { //找尋所需的div
if (this == obj) { //如果是點擊的div
$(this).css({ "background": "#F81B47" }); //給予顏色
}
else {
$(this).css({ "background": "#999" }); //還原顏色
}
})
}
/********************************************
* 函數名稱:tbExist(strTableID)
* 目的:判斷地區搜尋相關資料是否存在
* 作者:Gary
* 時間:2014/07/15
* 參數:strTableID:欲查詢之ID
*********************************************/
function tbExist(strTableID) {
top.$("#" + strTableID).remove(); //暫時先移除,讓每次都重新載入資料
var blExist = (top.$("#" + strTableID).html() != null) ? true : false; //尋找最上層是否存在此DIV,如果有回傳ture
return blExist //回傳True Or False
}
/********************************************
* 函數名稱:getAreaByAjax()
* 目的:從WebService讀取地區搜尋相關資料,使用Json格式傳回
* 作者:Gary
* 時間:2014/07/15
* 參數說明:strJson:需解析的Json字串
*********************************************/
function getAreaByAjax() {
top.$("body").append("<table id=\"tbAreaValue\" class=\"displayNone\" ><tbody></tbody></table>");
//在最上層畫面建立一個DIV及Table,預備存放資料,目的是可以減少Server的負擔,讀取過一次就不再回Server抓取資料。
var strURL = strWSLocation + 'GetCmsAreaSort'; //設定WebService路徑
$.ajax({
type: 'Post',
url: strURL,
dataType: 'xml',
//data: { strParentID: strParentID }, //如果要傳送參數,格式如左
success: function (jsonData) {
var strjson = $(jsonData).text(); //取得回傳後的字串
ResolveAreaJson(strjson) //解析Json字串
}
});
}
/********************************************
* 函數名稱:getAreaByAjax()
* 目的:從WebService讀取地區搜尋相關資料,使用Json格式傳回
* 作者:Gary
* 時間:2014/07/15
* 參數說明:strJson:需解析的Json字串
*********************************************/
function getGroupFreeListByAjax() {
top.$("body").append("<table id=\"tbGroupFreeList\" class=\"displayNone\" ><tbody></tbody></table>");
//在最上層畫面建立一個DIV及Table,預備存放資料,目的是可以減少Server的負擔,讀取過一次就不再回Server抓取資料。
var strURL = strWSLocation + 'GroupFreeList'; //設定WebService路徑
$.ajax({
type: 'Post',
url: strURL,
dataType: 'xml',
//data: { strParentID: strParentID }, //如果要傳送參數,格式如左
success: function (jsonData) {
var strjson = $(jsonData).text(); //取得回傳後的字串
ResolveGroupFreeListJson(strjson) //解析Json字串
}
});
}
/********************************************
* 函數名稱:ResolveGroupFreeListJson(strJson)
* 目的:解析Json字串,並把資料放在最上層的Table內,以便之後取用
* 作者:Gary
* 時間:2014/07/15
* 參數說明:strJson:需解析的Json字串
*********************************************/
function ResolveGroupFreeListJson(strJson) {
var jsonAry = $.parseJSON(strJson); //把字串解析成Json格式的Array
var intRowCount = jsonAry.length; //取得Array的總數
var dropdowninner = "";
top.$('#tbGroupFreeList tbody').html(""); //清空Html
for (intTime = 0; intTime < intRowCount; intTime++) { //跑回圈設定下拉選單總共的值
//把值設定在dropdowninner字串內
top.$('#tbGroupFreeList tbody').append( //放在最上層畫面之DIV內,預備存放資料,目的是可以減少Server的負擔,讀取過一次就不再回Server抓取資料。
$('<tr id=tr' + jsonAry[intTime]['Data_Value'] + '>').append( //新增行
$('<td id=' + jsonAry[intTime]['Data_Value'] + '>').html(jsonAry[intTime]['Data_Value']),
$('<td id=' + jsonAry[intTime]['Area'] + '>').html(jsonAry[intTime]['Area']),
$('<td id=' + jsonAry[intTime]['ParentID'] + '>').html(jsonAry[intTime]['ParentID']),
$('<td id=' + jsonAry[intTime]['Level'] + '>').html(jsonAry[intTime]['Level'])
)
)
}
CreateBasisDiv("DivGroup"); //製作基本的Div
CreateDivInfo("DivGroup", "tbGroupFreeList"); //製作區域選擇Div資料
objbind("DivGroup"); //綁定事件
}
/********************************************
* 函數名稱:ResolveAreaJson(strJson)
* 目的:解析Json字串,並把資料放在最上層的Table內,以便之後取用
* 作者:Gary
* 時間:2014/07/15
* 參數說明:strJson:需解析的Json字串
*********************************************/
function ResolveAreaJson(strJson) {
var jsonAry = $.parseJSON(strJson); //把字串解析成Json格式的Array
var intRowCount = jsonAry.length; //取得Array的總數
var dropdowninner = "";
top.$('#tbAreaValue tbody').html(""); //清空Html
for (intTime = 0; intTime < intRowCount; intTime++) { //跑回圈設定下拉選單總共的值
//把值設定在dropdowninner字串內
top.$('#tbAreaValue tbody').append( //放在最上層畫面之DIV內,預備存放資料,目的是可以減少Server的負擔,讀取過一次就不再回Server抓取資料。
$('<tr id=tr' + jsonAry[intTime]['ArgumentID'] + '>').append( //新增行
$('<td id=' + jsonAry[intTime]['ArgumentID'] + '>').html(jsonAry[intTime]['ArgumentID']),
$('<td id=' + jsonAry[intTime]['ArgumentValue'] + '>').html(jsonAry[intTime]['ArgumentValue']),
$('<td id=' + jsonAry[intTime]['ParentID'] + '>').html(jsonAry[intTime]['ParentID']),
$('<td id=' + jsonAry[intTime]['Level'] + '>').html(jsonAry[intTime]['Level']),
$('<td id=' + jsonAry[intTime]['AccountNameSort'] + '>').html(jsonAry[intTime]['AccountNameSort']),
$('<td id=' + jsonAry[intTime]['ParentIDSort'] + '>').html(jsonAry[intTime]['ParentIDSort'])
)
)
}
CreateBasisDiv("DivArea"); //製作基本的Div
CreateDivInfo("DivArea", "tbAreaValue"); //製作區域選擇Div資料
objbind("DivArea"); //綁定事件
}
/********************************************
* 函數名稱:DivShowPop(strShowID,strDivID)
* 目的:縮放Div
* 作者:Gary
* 時間:2014/06/09
* 參數說明:strShowID:需顯示區域的ID
strDivID:主要的DivID
*********************************************/
function DivShowPop(strShowID, strDivID) {
var DivString = "";
$("#" + strDivID + "Show div").each(function () {
DivString += this.id + ",";
})
DivString = DivString.replace(strShowID + ',', '').slice(0, -1); //移除掉要顯示的Div ID
var DivAry = DivString.split(",");
for (intCount = 0; intCount < DivAry.length; intCount++) { //執行迴圈,使還在DivAry裡的Div隱藏
$("#" + DivAry[intCount]).addClass("displayNone")
}
$("#" + strShowID).removeClass("displayNone"); //顯示需要顯示之Div
}
/********************************************
* 函數名稱:CreateBasisDiv(strDivId)
* 目的:製作基本的Div
* 作者:Gary
* 時間:2014/07/24
* 參數說明:strDivId:主要的DivID
*********************************************/
function CreateBasisDiv(strDivId) {
//把所需的基本html格式以文字方式製作
var strDivInnerText = "<div id=\"" + strDivId + "\" class=\"divPopClass displayNone\">"; //設定displayNone避免一開始就顯示
strDivInnerText += "<a class=\"right icon-16 ui-icon ui-icon-close \" onclick=\"$(this).parent('div').hide();\" title=\"關閉\" target=\"_self\"> </a>"; //關閉功能
strDivInnerText += "<a class=\"right icon-16 t-blue icon-eraser \" onclick=\"clearTxt('" + strDivId + "');\" title=\"清除\" target=\"_self\"> </a>"; //清除已填入的資料
strDivInnerText += "<div id=\"" + strDivId + "Tab" + "\" class=\"divWidth\"> </div> <div id=\"" + strDivId + "Show" + "\" class=\"divShow\" > </div> </div>";
$("#searchbar").append(strDivInnerText); //添加在#searchbar的class內
}
/********************************************
* 函數名稱:CreateDivInfo(strDivId,strTableID)
* 目的:製作區域選擇Div資料
* 作者:Gary
* 時間:2014/07/24
* 參數說明:strDivId:主要的DivID
strTableID:資料表ID
*********************************************/
function CreateDivInfo(strDivId, strTableID) {
var arrValue = ValueGetByTable('root', strTableID).split("@"); //取得第一層資料並進行拆解,格式(A01|東北亞@A02|港澳大陸)
var intArrCount = (arrValue == "") ? 0 : arrValue.length; //取得第一層總共的值
for (intTimes = 0; intTimes < intArrCount; intTimes++) { //跑迴圈
var strUlLi = "";
var arrNow = arrValue[intTimes].split("|"); //把取得回來的資料拆解,格式大致如右(A01|東北亞),|左邊是ArgumentID右邊是ArgumentValue
$('#' + strDivId + "Show").append("<div id='Div" + arrNow[0] + "'></div>") //在DivShow內添加新的DIV,這目的是為了切換區域用
var arrValue2 = ValueGetByTable(arrNow[0], strTableID).split("@"); //利用第一層的ArgumentID取得第二層項目並進行拆解,格式(A01001|韓國@A01002|日本)
var intArr2Count = (arrValue2 == "") ? 0 : arrValue2.length; //取得第二層總共的值
for (intTimes2 = 0; intTimes2 < intArr2Count; intTimes2++) { //跑迴圈
var arrNow2 = arrValue2[intTimes2].split("|"); //把取得回來的資料拆解,格式大致如右(A01001|韓國),|左邊是ArgumentID右邊是ArgumentValue
var arrValue3 = ValueGetByTable(arrNow2[0], strTableID).split("@"); //利用第二層的ArgumentID取得第三層項目並進行拆解,格式(A01002001|東京@A01002002|東北)
var intArr3Count = (arrValue3 == "") ? 0 : arrValue3.length; //取得第三層總共的值
var strUlLi2 = "";
for (intTimes3 = 0; intTimes3 < intArr3Count; intTimes3++) { //跑迴圈
var arrNow3 = arrValue3[intTimes3].split("|"); //把取得回來的資料拆解,格式大致如右(A01002001|東京),|左邊是ArgumentID右邊是ArgumentValue
strUlLi2 += " <a onclick=\"SetValueToObj('" + arrNow3[1] + "','" + arrNow3[0] + "','" + strDivId + "')\" >" + arrNow3[1] + " </a>"; //設定資料及事件
}
strUlLi += "<li><strong><span><a onclick=\"SetValueToObj('" + arrNow2[1] + "','" + arrNow2[0] + "','" + strDivId + "')\" >" + arrNow2[1] + ":</a></span></strong>" + strUlLi2 + "</li>"; //設定資料及事件
}
var strArea = "<li><strong><span><a onclick=\"SetValueToObj('" + arrNow[1] + "','" + arrNow[0] + "','" + strDivId + "')\" >全區不拘 </a></span></strong></li>"; //設定資料及事件
strUlLi = "<br><ul>" + strArea + strUlLi + "</ul>" //設定資料及事件
$('#Div' + arrNow[0]).append(strUlLi) //添加資料
if (intTimes != 0) { //如果不是第一次執行此迴圈,則都把DIV隱藏起來,達到頁籤效果
$('#Div' + arrNow[0]).addClass("displayNone");
}
$('#' + strDivId + "Tab").append("<div class=\"divWidthChild\" onclick=\"DivShowPop('Div" + arrNow[0] + "','" + strDivId + "')\" >" + arrNow[1] + "</div>") //加入以上所設定的DIV
}
//padding: 3px 0 0 100px;
$("#" + strDivId + "Show li:not(:first-child)").css({ "padding": "3px 0 0 100px" }) //調整CSS,因為這是比較特別的樣式,所以另外在這邊修改
$("#" + strDivId + "Show li:first-child").css({ "padding": "20px 0 0 100px" }) //調整CSS,因為這是比較特別的樣式,所以另外在這邊修改
$('#' + strDivId + "Tab div:first-child").css({ "background": "#F81B47" }); //給予第一個Tab顏色代表顯示中。
}
/********************************************
* 函數名稱:ValueGetByTable(strParentID,strTableID)
* 目的:塞選資料並迴傳
* 作者:Gary
* 時間:2014/07/24
* 參數說明:strParentID:母層ID
strTableID:資料表ID
*********************************************/
function ValueGetByTable(strParentID, strTableID) {
var arrValue = "";
top.$("#" + strTableID + " tr").each(function () { //在最上層的Table內尋找資料
if ($(this).children("td:eq(2)").text() == strParentID) { //塞選符合母層ID的資料
arrValue += $(this).children("td:eq(0)").text() + '|' + $(this).children("td:eq(1)").text() + "@"; //添加至符合資料的ArgumentID,ArgumentValue至arrValue內
}
})
return arrValue.slice(0, -1); //回傳並去除掉最後一個字元(最後個字元會是@符號)
}
/********************************************
* 函數名稱:SetValueToObj(strName,strValue)
* 目的:設定所選的資料
* 作者:Gary
* 時間:2014/07/24
* 參數說明:strName:區域名稱
strValue:區域代碼
strDivId:該Div視窗ID
*********************************************/
function SetValueToObj(strName, strValue, strDivId) {
var objName = $("form :input[clearTxt='" + strDivId + "'][showType='Name']");
var objValue = $("form :input[clearTxt='" + strDivId + "'][showType='Value']");
var strNowName = $(objName).val(); //取得目前的區域名稱
var strNowValue = $(objValue).val(); //取得目前的區域代碼
if (strNowValue != "") { //如果目前區域代碼不為空
strNowName += ","; //區域名稱最後添加逗號,以便下面做判斷
strNowValue += ","; //區域代碼最後添加逗號,以便下面做判斷
}
if (strNowValue.indexOf(strValue + ",") > -1) { //如果目前區域代碼不包含所填入的區域代碼加上逗號才執行(這部分會加逗號是為了分隔值)
strNowName = strNowName.replace(strName + ",", "").slice(0, -1); //如果有包含代表之前選過了,所以需要Replace。
strNowValue = strNowValue.replace(strValue + ",", "").slice(0, -1);
}
else { //如果不包含
strNowName += strName; //添加區域名稱
strNowValue += strValue; //添加區域代碼
}
$(objName).val(strNowName); //把新的區域名稱值填入
$(objValue).val(strNowValue); //把新的區域代碼值填入
}
/********************************************
* 函數名稱:showDivPop(obj,strDivId)
* 目的:設定彈出Div之位置
* 作者:Gary
* 時間:2014/07/24
* 參數說明:obj:呼叫此Function的物件
strDivId:主要的DivID
* 寫法:會寫這麼複雜主要原因是,該物件的位置空間不足以顯示Div整體樣式,則只會顯示出能顯示的區域,所以必須把DivPopClass建立在更上層的Table,
由於無法直接得知該物件與最上層Table實體的距離,所以必須透過迴圈去換算,如果該物件的空間可以完全顯示則只要寫以下幾句語法即可。
$('#DivPopClass').css({'left':$(obj).position().left,'top':$(obj).position().top + $(obj).height()});
*********************************************/
function showDivPop(obj, strDivId) {
$('#' + strDivId).show(); //顯示區域選擇之div
// var objGetTop = $(obj).closest('table'); //取得該物件所屬的table
// var intTop = $(obj).position().top; //取得該物件離此table的距離
// var intLeft = $(obj).position().left; //取得該物件離此table的距離
// intTop += $(objGetTop).position().top //加上此TABLE與TOP的距離
// intLeft += $(objGetTop).position().left //加上此TABLE與Left的距離
// while ($(objGetTop).attr('class') != "maintb") { //以迴圈判斷是否已經在最上層,如果沒有,則繼續加高度
// objGetTop = objGetTop.parent().closest('table');//取得更上層的table
// intTop += $(objGetTop).position().top //加上此TABLE與TOP的距離
// intLeft += $(objGetTop).position().left //加上此TABLE與Left的距離
// }
//$('#' + strDivId).css({ 'left': intLeft, 'top': intTop }); //最後設定區域選擇的位置
var intZindex = parseInt($('#' + strDivId).css('z-index'));
$('#' + strDivId).css({ 'left': $(obj).position().left, 'top': $(obj).position().top + $(obj).height(), 'z-index': intZindex + 1 });
$(".divPopClass").each(function () {
if (this.id != strDivId) {
$(this).hide();
}
})
//,'z-index':($('#' + strDivId).css('z-index')+1)
}
/********************************************
* 函數名稱:clearTxt(strDivId)
* 目的:清除區域之文字
* 作者:Gary
* 時間:2014/07/24
* 參數說明:strDivId:clearTxt等於strDivId的會清空
*********************************************/
function clearTxt(strDivId) {
$("form :input[clearTxt='" + strDivId + "']").each(function () { $(this).val(""); })
}
/********************************************
* 函數名稱:CreateTimeInfo(strDivId)
* 目的:製作區域選擇Div資料
* 作者:Gary
* 時間:2014/07/24
* 參數說明:strDivId:主要的DivID
*********************************************/
function CreateTimeInfo(strDivId) {
var intMonth = 36;
var intColumn = 6;
var strStartYear = $("#txtStartYear").val();
if (strStartYear == null || strStartYear == "") {
var dateObj = new Date();
strStartYear = dateObj.getUTCFullYear();
}
else {
//Add by Alina 20141104 若不為空,請先替換掉非數字的東西
strStartYear = strStartYear.replace(/[^0-9]/ig, "");
if (strStartYear == "") {
//替換後若為空,那就取當前的資料
var dateObj = new Date();
strStartYear = dateObj.getUTCFullYear();
}
$("#txtStartYear").val(strStartYear);
}
var dateMonth = new Date();
var startYear = strStartYear;
var startMonth = 0;
dateMonth.setYear(startYear);
dateMonth.setMonth(startMonth);
$('#' + strDivId + "Show").html("") //清空
var strDivHtml = "";
var strSetting = "<span class=\"t-blue\">起始年度:</span><input type=\"text\" id=\"txtStartYear\" maxlength=4 class=\"w100\" /> <input type=\"button\" id=\"btnResetDate\" class=\"sbtnblue w75\" onclick=\"CreateTimeInfo('DivTime')\" value=\"重設選單\" />";
$('#' + strDivId + "Show").append("<ul><li>" + strSetting + "</li></ul>") //添加資料
var intNum = 0;
for (intTime = 1; intTime <= intMonth; intTime++) {
var mm = dateMonth.getMonth() + 1; //January is 0!
var yyyy = dateMonth.getFullYear();
if (mm < 10) {
mm = '0' + mm
}
strDivHtml += "<a onclick=\"SetValueToObj('','" + yyyy + '/' + mm + "','" + strDivId + "')\" >" + yyyy + '/' + mm + " </a>";
dateMonth.setMonth(dateMonth.getMonth() + 1);
if (intTime % intColumn == 0) {
$('#' + strDivId + "Show").append("<ul><li>" + strDivHtml + "</li></ul>") //添加資料
strDivHtml = "";
}
}
}
//↓以啟用共用型方案,如果再下次出國時間有問題則回來此處設定,如果至2014/08/31都沒有問題,則可移除 Modify By Gary
///********************************************
//* 函數名稱:SetTimeValue(strValue)
//* 目的:設定所選的資料
//* 作者:Gary
//* 時間:2014/07/24
//* 參數說明:strName:區域名稱
//strValue:區域代碼
//*********************************************/
//function SetTimeValue(strValue) {
// var strNextTime = $("#txtNextTime").val(); //取得目前的下次出國時間
// if (strNextTime != "") { //如果目前下次出國時間不為空
// strNextTime += ","; //下次出國時間最後添加逗號,以便下面做判斷
// }
// if (strNextTime.indexOf(strValue + ",") > -1) { //如果目前下次出國時間不包含所填入的時間加上逗號才執行(這部分會加逗號是為了分隔值)
// strNextTime = strNextTime.replace(strValue + ",", "").slice(0, -1); //如果有包含代表之前選過了,所以需要Replace。
// }
// else { //如果不包含
// strNextTime += strValue; //添加時間
// }
// $("#txtNextTime").val(strNextTime); //把新的時間填入
//}
function hidDiv() {
$(".divPopClass").hide();
}