Question

所以我在一个广泛使用de CGridView的应用程序中工作，但我正在将一个webapp从专有框架移植到Yii。因此CSS文件已经编写完成，并且一直在使用。

问题是在我的CGridView小部件中，列的标题包含在TR标记中，我不知道在哪里可以为此标记添加类属性。我已经阅读了文档，现在如何单独更改每个标题单元格而不是整个TR。

感谢您的帮助！

Answer 1

然而，由于我们的CSS是针对遗留系统的，我不想进入更多的CSS规则。此外，我需要支持额外的事情，例如在表格行上使用特定的CSS类定位标题，并在项目上放置第一个/最后一个css类。

要在项目上实现第一个/最后一个css，您不需要扩展GridView，并且可以使用方便的rowCssClassExpression参数。

为了实现我的第二个目标，即将CSS类注入'table thead tr'元素，我必须覆盖renderTableHeader（）方法。

我强烈建议您仅将此路由视为最后的手段，因为如果您更新Yii的版本，则可以想象它们进行的更改与renderTableHeader（）方法不向后兼容。或者，您可以编写一个测试用例，通过DOM检查器运行您的小部件，以确认您只有1个表元素，1个thead元素，1个tbody元素等...

Yii::import('zii.widgets.grid.CGridView');

class FXSGridView extends CGridView {
    public $headerCssClass = 'columnHeadings';
    public $itemsCssClass = 'grey';
    public $rowCssClassExpression = '$this->rowCssClassFunction($row, $data);';
    public $rowCssClass = array('odd','even');

    public function rowCssClassFunction($row, $data) {
        $classes = array();

        if ($row == 0) $classes []= 'first';
        if ($row == $this->dataProvider->getItemCount() - 1) $classes []= 'last';

        // Do flip/flop on defined rowCssClass
        if(is_array($this->rowCssClass) && !empty($this->rowCssClass)) $classes []= $this->rowCssClass[$row % count($this->rowCssClass)];

        return empty($classes) ? false : implode(' ', $classes);
    }

    public function renderTableHeader() 
    { 
        if(!$this->hideHeader) 
        {   
            echo "<thead>\n"; 

            if($this->filterPosition===self::FILTER_POS_HEADER) 
                $this->renderFilter(); 

            echo '<tr class="' . $this->headerCssClass . ' ">' . "\n"; 
            foreach($this->columns as $column) 
                $column->renderHeaderCell(); 
            echo "</tr>\n"; 

            if($this->filterPosition===self::FILTER_POS_BODY) 
                $this->renderFilter(); 

            echo "</thead>\n"; 
        } 
        else if($this->filter!==null && ($this->filterPosition===self::FILTER_POS_HEADER || $this->filterPosition===self::FILTER_POS_BODY)) 
        { 
            echo "<thead>\n"; 
            $this->renderFilter(); 
            echo "</thead>\n"; 
        } 
    }
}

Answer 2

'columns'=>array(
        array(
            'name'=>'id',
            'header'=>'#',
            'htmlOptions'=>array('style'=>'width: 50px; text-align: center;', 'class'=>'zzz'),
            'headerHtmlOptions'=>array('class'=>'mytheadclass'),
        ),

“headerHtmlOptions”是将一个类提供给该列的thead单元格的那个。

Answer 3

不幸的是，您无法直接执行此操作，因为没有为标题行标记添加属性的规定（请参阅source code）。

一个简单的解决方案是将CGridView子类化为例如MyGridView并覆盖renderTableHeader方法以执行您需要的操作（将一些类变量添加到MyGridView以使其可配置）。在类似情况下，我多次使用过这种方法。

Answer 4

如果只需要进行简单的更改，您可以将生成的CSS用于以下内容：

table.admins th {border-right:none;text-align:center;}
table.admins th:first-child {text-align:left;}
etc...

或者您可以使用Yii生成的ID（查看生成的HTML）：

<th id="admins-grid_c1">

根据您要应用css的网格数量和您自己的命名约定，这可能适合也可能不适合。您也可以使用JavaScript / jQuery来操作样式，但@ Jon建议创建自定义renderTableHeader的建议将为您提供最大的控制权。（我也使用了list和renderSorter的方法。）

Yii CGridView改变了头部的tr类

4 个答案: