第二周第三天

昨天完成效果如下:


完成內容在紅框里

==========================
今天任務:
1荧关, 相關經驗 功能塊完善乔煞。增加滾動分頁提取數據;點擊 問題描述榄鉴,跳轉到 詳細頁面履磨。

2,附件功能完善庆尘。 增加 預覽 和 下載 功能剃诅。

===========================

修復 相關經驗 提取數據邏輯出錯。

之前提取的是所有數據驶忌,因為參數沒接收到矛辕。
Ajax get 傳,C# 沒有接收到位岔。

=============================

滾動分頁提取數據功能已完成

滾動吧H缟浮!抒抬!

由于是本機杨刨,所以看不見數據加載的過程。應該會有一個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房間邦邦。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末安吁,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子燃辖,更是在濱河造成了極大的恐慌鬼店,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件黔龟,死亡現(xiàn)場離奇詭異妇智,居然都是意外死亡,警方通過查閱死者的電腦和手機氏身,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門巍棱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蛋欣,你說我怎么就攤上這事航徙。” “怎么了陷虎?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵到踏,是天一觀的道長。 經常有香客問我尚猿,道長窝稿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任凿掂,我火速辦了婚禮伴榔,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己潮梯,他們只是感情好骗灶,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布惨恭。 她就那樣靜靜地躺著秉馏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脱羡。 梳的紋絲不亂的頭發(fā)上萝究,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天,我揣著相機與錄音锉罐,去河邊找鬼帆竹。 笑死,一個胖子當著我的面吹牛脓规,可吹牛的內容都是我干的栽连。 我是一名探鬼主播,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼侨舆,長吁一口氣:“原來是場噩夢啊……” “哼秒紧!你這毒婦竟也來了?” 一聲冷哼從身側響起挨下,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤熔恢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后臭笆,有當地人在樹林里發(fā)現(xiàn)了一具尸體叙淌,經...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年愁铺,在試婚紗的時候發(fā)現(xiàn)自己被綠了鹰霍。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡茵乱,死狀恐怖茂洒,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情似将,我是刑警寧澤获黔,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站在验,受9級特大地震影響玷氏,放射性物質發(fā)生泄漏。R本人自食惡果不足惜腋舌,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一盏触、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦赞辩、人聲如沸雌芽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽世落。三九已至,卻和暖如春糟需,著一層夾襖步出監(jiān)牢的瞬間屉佳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工洲押, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留武花,地道東北人河闰。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓杆融,卻偏偏與公主長得像,于是被迫代替她去往敵國和親杈笔。 傳聞我的和親對象是個殘疾皇子挑童,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內容

  • 輪播圖 1,往工程梨添加幾張圖片 在工程程序添加三個全局變量 1.在viewDidload.swift先定義滑動條...
    112233香樟樹閱讀 138評論 0 1
  • 拆書幫《終身成長》三 I片段還原 從三個研究成果來探討了固定思維模式和成長思維模式 第一累铅,成功的來源,固定思維模式...
    一米之粒閱讀 326評論 0 0
  • 第二周 第三天 流程控制 并行結構 while循環(huán) repeat while 循環(huán)至少執(zhí)行一次 for 循環(huán)fo...
    theDeskmateOfSb閱讀 161評論 0 0
  • 通過前兩天的學習和活動炮沐,到了第三天上課難免有些疲態(tài)争群,尤其是第一天的小歐跑跑后遺癥隔天開始顯現(xiàn)了。最后一天堅持大年。 今...
    yang_x閱讀 255評論 0 1
  • “豪哥,你有‘處女情節(jié)’嗎垦缅?”冲泥,這是譙瑜小兄弟在清明節(jié)假期和我漫步校園時突然問我的問題?作為一個不稱職的學...
    西風化雪閱讀 626評論 0 0