分享人：王炳鈞
1. jQuery 冒泡事件
<html>
<head>
<script type="text/javascript">
$(function() {
$('#clickMe').click(function() {
alert('hello');
});
$('body').click(function() {
alert('baby');
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;">
<button type="button" id="button2">
click me
</button>
<button id="clickMe">
click
</button>
</div>
</body>
</html>
事件冒泡現象：點擊 “id=clickMe” 的button,會先后出現“hello” 和 “baby” 兩個彈出框。
事件捕獲現象：點擊沒有綁定點擊事件的div和 “id=button2” 的button, 都會彈出 “baby” 的對話框。
阻止事件冒泡方法：
- 法1：
$('#clickMe').click(function() {
alert('hello');
return false;
});
- 法2：
$('#clickMe').click(function(event) {
alert('hello');
var e = window.event || event;
if (e.stopPropagation) { //如果提供了事件對象，則這是一個非IE瀏覽器
e.stopPropagation();
} else {
//兼容IE的方式來取消事件冒泡
window.event.cancelBubble = true;
}
});
事件捕獲阻止方法：e.stopPropagation() e.preventDefault()
return false 不僅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 則只阻止事件往上冒泡，不阻止事件本身。
2. 父頁面獲取子頁面數據
- 子頁面：
function myReturnValue() {
var Datastrs = "";
$('#showTable>tr').each(function() {
var p_code = $(this).find('.p_code').text();
var leftTime = $(this).find('.leftTimeTable>input').val();
var rightTime = $(this).find('.rightTimeTable>input').val();
Datastrs += p_code + "," + leftTime + "," + rightTime + ";";
});
parent.callbackChangeTime(flightid, Datastrs.substring(0, Datastrs.length - 1));
parent.CloseAlertPage();
}
- 父頁面：
//當前窗體
function editAlert(obj, totalHours, flightid) {
AlertPage("/CrewSupport/calculateTime.aspx?data=" + totalHours + "|" + flightid + "", "編輯左右座時間", 600, 400);
}
//窗體返回數據解析賦值
function callbackChangeTime(flightid, Datastrs) {
$('.' + flightid).find('.modifyDetail').text(Datastrs);
$('.detail_leftTime').text(0);
$('.detail_rightTime').text(0);
$('.modifyDetail').each(function() {
var text = $(this).text().split(';');
var DetailleftTime = 0;
var DetailrightTime = 0;
for (var i = 0; i < text.length; i++) {
var Arr = text[i].split(',');
var arrP_code = Arr[0];
var leftTime = Arr[1];
var rightTime = Arr[2];
var leftObj = $('#tblist_bottom').find('.' + arrP_code).find('.detail_leftTime').text();
var rightObj = $('#tblist_bottom').find('.' + arrP_code).find('.detail_rightTime').text();
$('#tblist_bottom').find('.' + arrP_code).find('.detail_leftTime').text(parseInt(leftObj) + parseInt(leftTime));
$('#tblist_bottom').find('.' + arrP_code).find('.detail_rightTime').text(parseInt(rightObj) + parseInt(rightTime));
}
});
}
如果用alertpage打開的頁面，則用parent.父頁面處理函數
如果用window.open打開的頁面， 則用 window.opener.父頁面處理函數
3. Json序列化與反序列化
當一個頁面顯示值來自多個表中時，并且通過ajax統一提交，同時更改數據庫表值。此時可以用js遍歷獲取頁面所有參數值，建立一個相對應的視圖，將所有值拼接成為一個json串，然后再在后臺反序列化為該視圖集合，這樣就可以在后臺獲取每一個值。
image.png
//反序列化
List<T>list = JsonConvert.DeserializeObject<List<T>>(jsonStr);
//序列化
string jsonStr = JsonConvert.SerializeObject(list);
result = result + "[{";
result += "\"PLAN_DEPARTURE\":\"" + plan_departure + "\",\"PLAN_ARRIVAL\":\"" + plan_arrival
+ "\",\"FLIGHT_ID\":\"" + flight_id + "\",\"FLIGHT_TYPE\":\"" + flight_type
+ "\",\"LAUNCH_LEFT_CODE\":\"" + launch_left_code + "\",\"LAUNCH_RIGHT_CODE\":\""
+ launch_right_code + "\",\"LANDING_LEFT_CODE\":\"" + landing_left_code
+ "\",\"LANDING_RIGHT_CODE\":\"" + landing_right_code
+ "\",\"LAUNCH_OP_CODE\":\"" + launch_op_code + "\",\"LANDING_OP_CODE\":\"" + landing_op_code
+ "\",\"APPROACH_TYPE\":\"" + approach_type + "\",\"TAXI_OUT_TIME\":\"" + taxi_out_time
+ "\",\"TAKEOFF_TIME\":\"" + takeoff_time + "\",\"LANDING_TIME\":\"" + landing_time
+ "\",\"TAXI_IN_TIME\":\"" + taxi_in_time + "\",\"AIR_HOURS\":\"" + air_hours + "\",\"GRND_HOURS\":\""
+ grnd_hours + "\",\"TOTAL_HOURS\":\"" + total_hours + "\",\"NIGHT_HOURS\":\"" + night_hours
+ "\",\"OLD_FUEL\":\"" + old_fuel + "\",\"NEW_FUEL\":\"" + new_fuel + "\",\"LEFT_FUEL\":\"" + left_fuel
+ "\",\"TRIP_FUEL\":\"" + trip_fuel + "\",\"WHOLE_WEIGHT\":\"" + whole_weight
+ "\" ,\"MODIFY_DETAIL\":\"" + modifyDetail + "\",\"FLIGHT_DATE\":\"
<%=flightDate.ToString()%>\",\"IS_ENTER\":\"" + is_enter + "\",\"FLIGHT_NO\":\"" + flight_no + "\"";
result = result + "},";
