代码之家 › 专栏 › 技术社区 › AAM

使用php-html-css-js的GridView/ListView

gridview listview css php javascript

AAM · 技术社区 · 7 年前

我正在尝试将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>

.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;
}

js公司

$(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');});
});

1 回复 | 直到 5 年前

AAM 7 年前

做了以下的改变,它成功了

<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>

js公司

$('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; }