JQuery滚动加载

Jquery滚动加载数据

场景：

在某系统遇到用户注册这样的功能，而注册需要将注册用户属于哪个单位也选上，以前做出的效果可能没那么理想（以前是用树形结构做的，每展开一级就加载下一级的数据。因为数据量极大不可能一下子将所有的部门单位都加载出来）。基于这种情况，我将其改成带搜索功能的输入选择框，并且输入某个关键字之后的弹窗里面的单位列表支持下拉滚动。同时也支持上一级单位和下一级单位的切换。这样就解决了数据量太多导致树形控件难以使用的问题。

具体的下拉滚动代码大致如下：

$("#deptBox").scroll(function(){
    var liHeight = $("#deptBox").scrollHeight; // 实际内容的高度 如每一个单位由一个 li 元素组成，那么当前页加载出来的 li 元素（如每页20条记录）就是内容的高度了。 理论值 大于等于容器高度
     var scrollHeight = $("#deptBox").scrollTop();// 页面内容往上滚出对话框的高度
    var dialogHeight = $("#deptBox").height(); // 容器的高度

    if((liHeight-scrollHeight-dialogHeight)/dialogHeight < 0.02) { // (liHeight-scrollHeight-dialogHeight) 剩下的在对话框之外的还没看见页面内容 --对话框的下方，还没滚到可视区域

        // 继续加载
        var subDept = $("#deptBox").data("nodeList"), index = $("#deptBox").data("index"); // subDept 是当前级别的所有单位数据, index表示当前可视化区域已经遍历到第几条数据

        // 已经到底了，不继续加载
        if(subDept.length == index){
            $("#deptBox").append("<li> .. 已经到底了，不能继续滚动 .. </li>");
            return false;                
        }

        var len = index + 20; // 每次下拉20条数据
        if(len>subDept.length){
            len = subDept.length;
        }
        for(var i=index; i<len; i++){
            createDeptElement(subDept[i]); // subDept是一个数组，数组的每一个元素表示一个部门单位的内容，包括部门名称，id，路径等信息    
            // createDeptElement 方法是将部门信息描绘成 li 元素，并且append到 deptBox 容器
        }    
        // 每次移动好了下标之后，将下标重新绑定到 deptBox 容器
        $("#deptBox").data("index",len);
    }
});

<<< 捐赠 >>>

转载请注明出处！原文地址： http://webinglin.github.io

JQuery滚动加载

Reference:

留言