css - CListView 小部件 YII 格式

Question

我知道这可能是一个愚蠢的问题.. 但我正在尝试对齐过滤器和 CListView 小部件以适当地显示它，如下所示

这是代码

<div class="row-fluid span12">
 <div class="span4">

<?php $box = $this->beginWidget(
    'bootstrap.widgets.TbBox',
    array(
        'title' => 'Advanced Search',
        'headerIcon' => 'icon-th-list',
        'htmlOptions' => array('class' => 'bootstrap-widget-table')
        )
    );?>
<?php $this->renderPartial('_search',array('model'=>$model,)); ?>

<?php $this->endWidget(); ?>

</div>
<div class="span8">
     <?php 
        $this->widget('zii.widgets.CListView', 
                array(
                      'dataProvider'=>$model->search(),
                      'ajaxUpdate' => true,
                      'enablePagination'=>true,

                      'itemView'=>'_list',   // refers to the partial view named '_post'
                      'sortableAttributes'=>array(
                                                  'Price',
                                                  'Year',
                                                  'Lenght'
                                                  ),

                      )

                    );
               ?>

</div>
</div>

它实际上生成了类似于附件图片左侧的东西

如何确保 CListView 小部件在过滤器中对齐？并摆脱文本“显示 1-29 结果”并在顶部对齐过滤器？

Answer 1

我的解决方案有点长，但请耐心等待。

的默认布局CListItem如下：

<div>{pager}</div>
<div>{summary}</div>
<div class='items'>{item1}{item2}...{item_n}</div>

为了实现您想要的布局，您需要以某种方式将过滤器插入容器中，即.itemsdiv。这可以通过多种方式完成。

1. 您可以覆盖 ListView 类以添加一个变量beforeItems，其内容将放置在项目容器中但在第一个项目之前。例如

   <?php
   
   Yii::import('zii.widgets.CListView');
   
   class MyListView extends CListView {
   
   public $beforeItems = '';
   
       public function renderItems()
       {
           echo CHtml::openTag($this->itemsTagName,array('class'=>$this->itemsCssClass))."\n";
           $data=$this->dataProvider->getData();
           if(($n=count($data))>0)
           {
               echo $this->beforeItems;
               $owner=$this->getOwner();
               $viewFile=$owner->getViewFile($this->itemView);
               $j=0;
               foreach($data as $i=>$item)
               {
                   $data=$this->viewData;
                   $data['index']=$i;
                   $data['data']=$item;
                   $data['widget']=$this;
                   $owner->renderFile($viewFile,$data);
                   if($j++ < $n-1)
                       echo $this->separator;
               }
           }
           else
               $this->renderEmptyText();
           echo CHtml::closeTag($this->itemsTagName);
       }
   
   }
   

   然后，您可以将列表视图称为：

   $this->widget('path.to.MyListView, array(
       ...
       'beforeSend' => '<filter html here>',
   

2. 但是，为了确保您的列表视图与图像中的一样，您需要扩展列表视图以删除以下示例中注释掉的打开和关闭容器标记的渲染。

   Yii::import('zii.widgets.CListView');
   
   class MyListView extends CListView {
   
       public function renderItems()
       {
           // echo CHtml::openTag($this->itemsTagName,array('class'=>$this->itemsCssClass))."\n";
           $data=$this->dataProvider->getData();
           if(($n=count($data))>0)
           {
               $owner=$this->getOwner();
               $viewFile=$owner->getViewFile($this->itemView);
               $j=0;
               foreach($data as $i=>$item)
               {
                   $data=$this->viewData;
                   $data['index']=$i;
                   $data['data']=$item;
                   $data['widget']=$this;
                   $owner->renderFile($viewFile,$data);
                   if($j++ < $n-1)
                       echo $this->separator;
               }
           }
           else
               $this->renderEmptyText();
           // echo CHtml::closeTag($this->itemsTagName);
       }
   
   }
   

然后，您可以编辑template以删除出现在项目之前的摘要和寻呼机：

`template` => `<div><your_filter_html>{items}</div>`

模板用于控制列表视图中各种组件的布局。这些标记被识别：{summary}、{sorter}、{items} 和 {pager}。它们将被摘要文本、排序链接、数据项列表和寻呼机替换。

Answer 2

div 是块元素，所以你有两个 <div class="span4">和<div class="span8">一种相互阻挡。

如果你放弃引导布局，让 div 中的过滤器向左浮动，然后放在 CListView 的 div 中怎么办？

<div class="row-fluid span12">
  <div style="float:left;">
   ... filters
  </div > 
    ... 
    $this->widget('zii.widgets.CListView',
    ... 
</div><!-- span12 -->

更新

从您提到的网站：