带有可扩展可折叠行html的gridview

Posted 2023-02-23

【中文标题】带有可扩展可折叠行html的gridview

【英文标题】：gridview with expandable collapsible rows html

【发布时间】：2018-10-19 05:08:29

【问题描述】：

我需要 gridview，它有 'n' 行，每行有 4 列/要显示的项目。我只想使用 html/javascript/Vuejs 模板来实现。

我想实现如下视图： 在上图中，我们有“查看全部”按钮，假设我们有 32 个数据集，网格应该有 8 行，每行将有 4 个项目/列。最初我只需要两行（显示 8 个项目）和“查看全部”，当我点击按钮时，它应该展开并显示所有行和项目。带有“少看”文字。当我再次点击时，它应该会折叠并且应该只显示 2 行和 8 个项目。

<template>
  <div>
<list>
  <cell style="flex-direction:row; align-items:center ;" v-for="(rowdata,index) in griddata" :key="index" >
    <div v-for="(rowitem, i) in rowdata" style="flex:1;flex-direction:column; backgroundColor:blue;margin:10px;height:100px; align-items:center;" :key="i">
        <image class="item-icon" src="https://gw.alicdn.com/tfs/TB1788ygMMPMeJjy1XdXXasrXXa-1919-1520.jpg"></image>
        <text style="color:white;justify-content:center;align-items:center;backgroundColor:red;flex:1; text-align:center;">rowitem</text>
    </div>
  </cell>
</list>
<text class="view-all-container" v-if="viewText" >viewText</text>
 </div>
</template>

<script>
  export default 
    props: 
      data: Object,
    ,
  data() 
    return 
         isOpen: false,
         viewText: 'View All',
         borderRight: 'item-border-right',
         appearFlag: [],
         griddata:[]
    ;
   ,

   created() 
      for(var i =0;i<5;i++)
            var rowdata = []
            rowdata.push("1")
            rowdata.push("2")
            rowdata.push("3")
            this.griddata.push(rowdata)
         
    ,
    
  </script>

   <style scoped lang="sass?outputStyle=expanded">

    .container 
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
     
    .icon-row 
        width: 750px;
        flex-direction: row;
        align-items: flex-start;
     
    .icon 
         width: 188px;
         height: 168px;
         padding-top: 30px;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         border-bottom-style: solid;
         border-bottom-color: #ebebeb;
         border-bottom-width: 1px;
       
      .item-border-right 
            border-right-style: solid;
            border-right-color: #ebebeb;
            border-right-width: 1px;
       
       .item-icon 
            width: 54px;
            height: 54px;
            margin-bottom: 15px;
        
        .item-text 
            padding-left: 14px;
            padding-right: 14px;
            font-size: 22px;
            color: #666;
            text-align: center;
            lines: 2;
            height: 64px;
            text-overflow: ellipsis;
          
         .view-all-container 
              width: 750px;
               margin-top: 30px;
               margin-bottom: 30px;
                text-align: center;
              font-size: 26px;
                font-weight: 500;
             color: #ef4e28;
   
   </style>

注意：我已经在堆栈中搜索并验证，无法获得任何解决方案。请帮我解决这个问题..

【问题讨论】：

你能创建一个工作snippet吗？我们将更容易了解您已经取得的成就并进行调试。

jsfiddle.net/ubrqz2to/5

它不工作。不处理工作代码很难调试..

我能够获得列，但不是我预期的顺序。

【参考方案1】：

有许多不同的方法可以做到这一点。一种（简单）方法是在created 钩子中加载初始网格，如下所示：

 this.initialGrid = createGrid(2, 4)

其中createGrid定义为：

const createGrid = (rows, cols) => 
 const grid = []
 for (let i = 0; i < rows; i++) 
   grid[i] = []
   for (let j = 0; j < cols; j++) 
     grid[i][j] = "some/image" // could store respective image paths in an array and push them into the grid
   
 
 return grid
 

这将为您提供 2 行和 4 列，前提是您已初始化 createGrid。然后在data 挂钩中，您可以将具有所需尺寸的网格存储为“原始网格”。模板可以很简单：

<div id="grid">
 <div class="flex-container"
      v-for="rows in showGrid">
 <!-- just a placeholder, you'd likely want an img tag, etc -->
   <div v-for="cols in rows">
       cols 
   </div>
 </div>
 <button
      v-show="!toggleLoadButton"
      @click="toggleLoadButton = true"
 >
 show more
 </button>
 <button
      v-show="toggleLoadButton"
      @click="toggleLoadButton = false"
 >
 show less
 </button>
</div>

这里是一个例子：https://codepen.io/anon/pen/VxQeRV?editors=1010 此解决方案的局限性在于您要么加载两行，要么加载所有行。

【讨论】：

我不想在点击按钮后创建网格。我需要立即加载并根据点击决定显示多少行..

单击按钮时未创建网格。此外，在您的问题中，您仅指定加载所有项目或仅加载前两行。您在这里问的实际上与此不同。