这里是10个10个渲染

val:数据
id:渲染的盒子

  // 渲染
    tableRendering(val, id) {
      // 假设一共有99个数据 每次渲染10个 
      //需要插入的容器
      let container = document.getElementById(id);
      // 一共插入99条数据
      let total = val.Values.length;
      // 一次插入 10 条
      let once = 10;
      //总页数(99/10=9 页)
      let page = total / once;
      //每条记录的索引
      let index = 0;
      let oneIndex = 0;
      //循环加载数据
      var that = this;
      loop(total, index);
      function loop(curTotal, curIndex) {
        // 如果总数小于等于0 不执行
        if (curTotal <= 0) {
          return false;
        }
        // 取小的一个 (当都是10小的时候就取10 ,当总数小于10的时候则取小于10的)
        let pageCount = Math.min(curTotal, once);
        window.requestAnimationFrame(function () {
          var fragment = document.createDocumentFragment();
          //  循环10次
          for (let i = 0; i < pageCount; i++) {
            // 创建div
            let div = document.createElement("div");
            div.className = "threeInfos";
            div.innerHTML =
            // 编号从1开始
              "<div class='num infosCenter'>" +
              (Number(oneIndex) + 1) +
              "</div><div class='infos infosCenter'>" +
              (val.Values[oneIndex].address ||
                val.Values[oneIndex].name ||
                "详细信息") +
              "</div><div class='area infosCenter'>" +
              (val.Values[oneIndex].rearea
                ? val.Values[oneIndex].rearea.toFixed(7)
                : 0) +
              "</div>";
              // 每循环一次append一个dom
            fragment.appendChild(div);
            // 为每个dom添加一个点击事件
            div.onclick = function clickRow(e) {
              let num = Number(e.currentTarget.firstElementChild.innerText) - 1;
              that.rowClickOne(val.Values[num], val);
            };
            // 第多少个数据
            oneIndex = oneIndex + 1;
          }
          // 将10个放置到所创建的id container内
          container.appendChild(fragment);
          // 继续循环 99-10 ,0+10
          loop(curTotal - pageCount, curIndex + pageCount);
        });
      }
    },
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐