如何在 php html css js 中创建网格视图/列表视图？答案

【问题标题】：How to create grid-view/list-view in php html css js?如何在 php html css js 中创建网格视图/列表视图？
【发布时间】：2018-10-05 17:08:55
【问题描述】：

我正在尝试将 gridview/listview 选项放在我的 Web 应用程序的搜索页面中。以下代码没有给出预期的结果。无论我单击网格还是列表视图，搜索结果都是网格视图。当我单击任一选项时，Web 链接的末尾都有一个“#”。无论哪种方式，视图都不会改变。

这是代码。

搜索.php

<div class="container">
      <div class="well well-lg">
        <strong>Display</strong>
           <div class="btn-group">
            <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list"></span>  List</a> 

            <a href="#" id="grid" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th"></span>Grid</a>
           </div>
        </div>
    </div> 

<div id = "products" class="row list-group"> 

        <?php   
            for ($i = 0; $i < count($searchData); $i++) {
                $year = Schema::getyear($searchData[$i]->getyearId())->getyear();
                $course = Schema::getCourseFromId($searchData[$i]->getId());
                $src = (file_exists('video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';

                echo <<<HTML

             <div class="item col-lg-6 col-md-6 mb-4" > 
                  <div class = "thumbnail">

                     <div class="card h-100">

                        <a href="video.php?video={$searchData[$i]->getVideoId()}"><img class="card-img-top" src={$src} alt=""></a>
                            <div class="card-body">
                                <h4 class="card-title">{$searchData[$i]->getTitle()} </h4>

                            </div>

                      </div>

              </div>

       </div> 
     HTML;
               }

            ?>



    </div>

css

.glyphicon { margin-right:5px; }
.thumbnail
{
    margin-bottom: 20px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.item.list-group-item
{
    float: none;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
    background: #428bca;
}

.item.list-group-item .list-group-image
{
    margin-right: 10px;
}
.item.list-group-item .thumbnail
{
    margin-bottom: 0px;
}
.item.list-group-item .caption
{
    padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
    background: #eeeeee;
}

.item.list-group-item:before, 
.item.list-group-item:after
{
    display: table;
    content: " ";
}

.item.list-group-item img
{
    float: left;
}
.item.list-group-item:after
{
    clear: both;
}
.list-group-item-text
{
    margin: 0 0 11px;
}

$(document).ready(function() {
    $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
    $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
});

【问题讨论】：

标签： javascript php css listview gridview

【解决方案1】：

进行了以下更改并成功了

<div id="container">
      <strong>Display</strong>
    <div class="btn-group">
        <button id="list" class="list">List View</button>
        <button id="grid" class="grid">Grid View</button>
</div> 
<ul class = "grid">    
  <?php   
            for ($i = 0; $i < count($searchData); $i++) {
                $year = Schema::getyear($searchData[$i]->getyearId())->getyear();
                $course = Schema::getCourseFromId($searchData[$i]->getId());
                $src = (file_exists('video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';

                echo <<<HTML
<li>   
             <div class="item col-lg-6 col-md-6 mb-4" > 
                  <div class = "thumbnail">

                     <div class="card h-100">
<a href="video.php?video={$searchData[$i]->getVideoId()}"><img class="card-img-top" src={$src} alt=""></a>
                            <div class="card-body">
                                <h4 class="card-title">{$searchData[$i]->getTitle()} </h4>

                            </div>

                      </div>

              </div>

       </div> 
     HTML;
               }

            ?>



    </div>

$('button').on('click',function(e) {
    if ($(this).hasClass('grid')) {
        $('#container ul').removeClass('list').addClass('grid');
    }
    else if($(this).hasClass('list')) {
        $('#container ul').removeClass('grid').addClass('list');
    }
});

css

#container ul { list-style: none; }
#container .buttons { margin-bottom: 20px; }

#container .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }

#container .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }

【讨论】：