Question

我正在开发一个Web应用程序，它要求数据以书籍格式显示。数据是这样的

Menu{
  String menuName;
  List<String> subMenu;
}

我使用jquery以书本格式显示数据。div是动态生成的接下来的步骤：

1. created a single array with menuName and its subMenus.like completeData = [menuObj1,"submenu1","subMenu2",menuObj2,"subMenu1","subMenu2","subMenu3",...];  
2. First fill left Container  
      For Each value in completeData
      if it is obj then create a new Div menuDiv and display its menuName and append to container.
check container height if it exceeds then break.

      if it is String then create a new subMenuSpan and append it to subMenuDiv and finally append it to container.
check container height if it exceeds then break and store the index.

3. Now fill the right container
      start from the storedIndex from Left Container and continue the same process.

代码：左容器

for(var i=index;i<completeData.length;i++){

    if(typeof completeData[i] == 'string'){
        // subMenu
        menuSpan = $('<div id="menuSpan">').text(completeData[i]);
        if(typeof completeData[i-1] == 'string'){
            menuSpan.appendTo(menuDiv);

            // Break if container height exceeds and store the index.
            if($('#menu-inner-left').height() >= height){
                menuSpan.remove();
                rightIndex=i;
                break;
            }
        }else{
            menuDiv = $('<div id="menuDiv">').appendTo('#menu-inner-left');
            menuSpan.appendTo(menuDiv);

            // Break if container height exceeds and store the index.
            if($('#menu-inner-left').height() >= height){
                 menuDiv.remove();
                 rightIndex=i;
                 break;
            }
        }
    }else{
        // Menu Name
        menuNameDiv = $('<div id="menuNameDiv">').appendTo('#menu-inner-left');
        $('<div>').text(completeData[i].menuName).appendTo(menuNameDiv).css('float','left');

        // Break if container height exceeds and store the index.
        if($('#menu-inner-left').height() >= height){
              menuDiv.remove();
              rightIndex=i;
              break;
        }
     }
  }

代码：适用于正确的容器从存储在左容器中的索引开始，然后是相同的过程

for(var i=rightIndex;i<completeData.length;i++){
    // Same Code of Left Container
}

结果的最终图像

现在Book Book正确显示但问题是： 1.需要花费大量时间才能显示，因为它会创建大量的div。

我尝试在普通的Javascript中创建div但仍然没有效果。现在我们转向角度JS以避免使用jquery创建div。它会影响加载时间。

可能是避免创建大量div并减少加载时间的其他方法。

Answer 1

这不是解决方案，只是根据您的scree捕获实现的方法。在从源获取后，尝试将该数据存储在缓存中，而不是一次性加载所有数据。在每个下一页/上一页上单击写一个只获得当前页面数据的回调，这样可以减少渲染时间。或者你可以使用一些类似@adeno指定的插件 Turn.js。

Menu{
  data:[ 
       String menuName;
       List<String> subMenu;
      ]
  pagingObject:{
   pageNumber<int>,
   currentPage<int>,
   pageSize<int>

  }
}

在jquery中创建类似布局的书

1 个答案: