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>

实际上会产生类似附图的左侧

enter image description here

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

Answer 1

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

更新

从您提到的网站

the floating div

the upper container

Answer 2

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

CListItem的默认布局如下：

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

要实现所需的布局，您需要以某种方式在容器中插入过滤器，即.items div。这可以通过多种方式完成。

您可以覆盖ListView类以添加变量beforeItems，该变量的内容将放在项容器中但在第一个项之前。 e.g

<?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>',

但是，为了确保您的列表视图看起来像在图像中，您需要扩展列表视图以删除一些在下面的示例中注释掉的打开和关闭容器标记的呈现。

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}。它们将替换为摘要文本，排序链接和数据项目列表和寻呼机。

CListView小部件YII格式化

2 个答案:

更新