Yii CGridView изменить класс tr заголовка

Question

Так что я работаю в приложении, которое широко использует de CGridView, но портирую веб-приложение из проприетарной среды на Yii.Таким образом, CSS-файлы уже написаны и работают до сих пор.

Дело в том, что в моем виджете CGridView заголовки столбцов заключены в тег TR, и я понятия не имею, где можно добавитьатрибут класса для этого тега.Я прочитал документацию и теперь, как изменить каждую ячейку заголовка отдельно, но не весь TR.

Спасибо за вашу помощь!

Answer 1

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

"headerHtmlOptions" - это класс, который присваивает класс ячейке thead этого столбца.

Answer 2

Однако мы столкнулись с подобной проблемой, поскольку наш 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 3

К сожалению, вы не можете сделать это напрямую, поскольку нет никаких условий для добавления атрибутов в теги строки заголовка (см. исходный код ).

Простым решением будет подкласс 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 идентификаторы (просмотреть сгенерированный HTML):

<th id="admins-grid_c1">

, что может или не может быть уместным, в зависимости от того, к скольким сеткам вы хотите применить CSS и ваши собственные соглашения об именах. Вы также можете использовать JavaScript / jQuery для манипулирования стилями, но, безусловно, предложение @ Jon о создании собственного renderTableHeader даст вам максимальный контроль. (Я также использовал этот подход со списками и renderSorter.)