基于CGridView中的列值动态更改行颜色

Question

First, actually I'm not using CGridView, but I'm using TbExtendedGridView from YiiBooster . I use CGridView on the title because it's more familiar, but still these two things works in quite the same way.

I'm enabling inline edit on my TbExtendedGridView (TbJEditableColumn). TbExtendedGridView is using jquery's Jeditable for this functionality. This Jeditable also applicable to CGridView .

Thanks to this SO's question: Change the Row Color Based on the Column value in CGridView

I know how to change the row color. But, it's still not working with the inline edit functionality. So, my question is, how can that rowCssClassExpression be updated everytime I edit some value on a column?

This is my view's code on [root]/protected/views/transaction/admin.php

<?
$this->widget('bootstrap.widgets.TbExtendedGridView', array(
    'id'=>'transaction-grid',
    'rowCssClassExpression'=>'$data->getCssClass()',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(
        array(
            'name'=>'date',
            'value'=> 'date("j M Y", strtotime($data->date))',
            'htmlOptions' => array('style'=>'width:52px')
        ),
        array(
            'name' => 'amount',
            'value' => 'number_format($data->amount, 0, ",", ".")',
            'htmlOptions' => array('class'=>'currency', 'style'=>'width:72px')
        ),
        array(
            'name' => 'category_name',
            'value'=>'$data->category->name',
            'header'=>'Category',
            'sortable' => 'true',
            'htmlOptions' => array('style'=>'width:131px'),
            'class'=>'bootstrap.widgets.TbJEditableColumn',
            'jEditableOptions' => array(
                'type' => 'optgroup',
                'loadurl' => Yii::app()->baseUrl . '/index.php/transaction/getCategory',
                'submitdata' => array('attribute'=>'category'),
                'cssclass' => 'form',
                'width' => '180px',
                'submit' => 'save changes'
            )
        ),
        array(
            'name'=>'desc',
            'value'=>'$data->desc',
            'htmlOptions' => array('class'=>'desccell'),
            'class'=>'bootstrap.widgets.TbJEditableColumn',
            'jEditableOptions' => array(
                'type' => 'text',
                // very important to get the attribute to update on the server!
                'submitdata' => array('attribute'=>'desc'),
                'cssclass' => 'form',
                'width' => '180px',
            )
        ),
        array(
            'htmlOptions' => array('nowrap'=>'nowrap'),
            'class'=>'bootstrap.widgets.TbButtonColumn',
        )
    )
)

And this is my getCssClass code on [root]/protected/models/Transaction.php :

public function getCssClass(){
        $categoryType = Category::model()->findByPk($this->categoryId)->getAttribute("type");
        $categoryName = Category::model()->findByPk($this->categoryId)->getAttribute("name");

        $class = "";

        if($categoryName == "Uncategorized Income"){
            $class = "darkgreen";
        }
        else if($categoryName == "Uncategorized Expense"){
            return "darkred";
        }
        else if($categoryType == "INCOME"){
            return "green ";
        }
        else if($categoryType == "EXPENSE" || $categoryType == "COST OF GOODS"){
            return "red ";
        }
        else if($categoryType == "WITHDRAW" || $categoryType == "DEPOSIT" ){
            return "blue ";
        }
        else{
            return "grey ";
        }

        return $class . " " . $categoryName . " " . $categoryType;
    }

Answer 1

使用'afterAjaxUpdate'属性在任何更新上触发javascript函数。

'afterAjaxUpdate' => ' function(){ //enterJScode }',