昨天完成效果如下:
==========================
今天任務:
1荧关, 相關經驗 功能塊完善乔煞。增加滾動分頁提取數據;點擊 問題描述榄鉴,跳轉到 詳細頁面履磨。
2,附件功能完善庆尘。 增加 預覽 和 下載 功能剃诅。
===========================
修復 相關經驗 提取數據邏輯出錯。
之前提取的是所有數據驶忌,因為參數沒接收到矛辕。
Ajax get 傳,C# 沒有接收到位岔。
=============================
滾動分頁提取數據功能已完成
由于是本機杨刨,所以看不見數據加載的過程。應該會有一個loading的等待提示在頁末擦剑。
每頁每次限定提取15條數據妖胀。
當滾動條到頁尾,就AJAX提取新的數據惠勒。
1赚抡,判斷DIV滾動條是否到頁尾。
javascript:
if ((parseInt(document.getElementById("Exper_Relate").scrollTop) + document.getElementById("Exper_Relate").clientHeight) >= parseInt(document.getElementById("Exper_Relate").scrollHeight)) {
console.log("滾動到DIV底部了");
}
html :
<div id="Exper_Relate">
<table id="relatetable" cellspacing="0">
<thead>
<tr style="height:25px">
<th></th>
<th>問題描述</th>
<th>提出人</th>
<th>提出時間</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr><td colspan="4" style="padding-left:20px"></td></tr>
</tfoot>
</table>
</div>
這張圖有必要放出來纠屋。
窗口的高度(clientHeight) + 滾動條的滾動距離(scrollTop) = DIV實際高度(scrollHeight)
就是滾動條滾到底了涂臣。
DIV滾動到底部,防止多次觸發(fā)事件,多次加載赁遗。
代碼示例:(轉載自: igooda.cn)
msg_list_loading = false;
$('.msg_list').on('scroll', function(){
if ( ! msg_list_loading ){
load_more_msg();
}
})
function load_more_msg(){
var msg_list = $('.msg_list');
if ( msg_list.height() + msg_list[0].scrollTop >= msg_list[0].scrollHeight - 60 ) {
msg_list_loading = true;
msg_list.append('<div class="loading"></div>');
$.get('ajax_data.html').done(function( data ){
msg_list.find(".loading").remove();
msg_list.append( data );
msg_list_loading = false;
});
}
}
1, 先建立一個變量署辉,判定是否加載中,防止重復加載岩四,
2, 如果條件為true哭尝,鎖定加載,ajax調取數據剖煌,并執(zhí)行加載材鹦,取消鎖定。
===============================
預覽 耕姊,下載功能已完成
效果如下圖:
新增 根據文件類型使用 ICO圖標桶唐。
html代碼:
<div id="Exper_footer">
<table>
<tr>
<td style="width:100px;text-align:right"><span>相關附件:</span></td>
<td id="file_ico"></td>
<td style="width:120px;text-align:right"><span id="Exper_File_Name">@Model.DocName</span></td>
<td><</td>
<td style="width:30px;text-align:right">
<span class="Exper_attachment_preview" onclick="window.open('/Project/OfficeView/Index?fileGuid=@Model.DocGuid')">預覽</span></td>
<td style="width:30px;text-align:left">
<span class="Exper_attachment_download" onclick="window.location.href = '/Project/FeedBack/AttachmentDownload?fileGuid=@Model.DocGuid'">下載</span></td>
<td>></td>
</tr>
</table>
</div>
由于水平有限,這里就用table布局了箩做。莽红。否則用div要調半天。
javascript:
<script type="text/javascript">
//根據文件后綴名找到對應的ico圖標
function fileico() {
var file_type = document.getElementById("Exper_File_Name").innerHTML.split(".")[1].toLowerCase();
var cc = "";
if (file_type == "doc" || file_type == "docx") {
cc = "/Images/Word.ico";
}
if (file_type == "xls" || file_type == "xlsx") {
cc = "/Images/Excel.ico";
}
if (file_type == "pdf") {
cc = "/Images/PDF.ico";
}
document.getElementById("file_ico").innerHTML = "<img src='" + cc + "' style='width:15px;height:15px'/>";
}
</script>
今天下午5點左右 3位同事搬家到406房間邦邦。