第二周第三天

昨天完成效果如下：

完成内容在红框里

==========================
今天任务：
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 :

    

        

            

                

                
问题描述
                
提出人
                
提出时间
            
        
        

        
        

            

        
    

这张图有必要放出来。

窗口的高度（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('
');
            $.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代码：

    

        

            
相关附件:
            

            
@Model.DocName
            
<
            

            预览
            

             下载
            
>
        
    

由于水平有限，这里就用table布局了。。否则用div要调半天。

javascript：

今天下午5点左右 3位同事搬家到406房间。