第二周第三天

昨天完成效果如下：

完成内容在红框里

==========================
今天任务：
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滚动到底部，防止多次触发事件，多次加载。

代码示例：（转载自: 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调取数据，并执行加载，取消锁定。

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

预览 ，下载功能已完成

效果如下图：

新增 根据文件类型使用 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房间。