ลายตากับ Mouse Over แล้วแถวเปลี่ยนสี ถ้างั้นมากำหนดสีพื้นให้กับ CgridView กันเถอะ

พอดีมี user คนมีอายุบอกผมให้เอาการการเปลี่ยนสีให้กับ CgridView ออก เพราะแกลายตา (ประมาณเอาเมาส์ไปวางใน CgridView ให้พื้นหลังแถวที่มีเมาส์วางอยู่บนแถวเป็นอีกสี Mouse Over) จึงไม่อยากให้เปลี่ยนสี ผมก็ไปปรึกษาโนบิตะได้ผลดังนี้ครับ


จาก

  $this->widget('zii.widgets.grid.CGridView', array(
 'id'=>'gridLoanID',
 'dataProvider'=>$model->searchGrid(),
 'filter'=>$model,
        'rowCssClassExpression'=>'$data->statusR=="อนุมัติ"?"row-commit":"row-wait"',
 'columns'=>array(
              .....
              .....
             'loanName', 'studentName'
              .....
              .....
  ),  // end of columns
  .....
  .....
));  

สังเกตุบรรทัดที่ 2. ผมใช้ 'id'=>'gridLoanID', ดังนั้นในไฟล์ css (screen.css) เราก็ใช้ #gridLoanID ดังนี้

#gridLoanID table.items tr:hover
{
        background: #ECFBD4;
}

และถ้าอีกขั้นเนื่องจากแถวผมมี 2 แบบคือแถวรายชื่อนักเรียนที่ได้รับการอนุมัติทุน (row-commit) กับยังไม่ได้รับการอนุมัติทุน (row-wait) สังเกตุว่าผมกำหนดข้อมูลในส่วน rowCssClassExpression ดังนี้

          ....
          ....
         'rowCssClassExpression'=>'$data->statusR=="อนุมัติ"?"row-commit":"row-wait"',  //ถ้าไม่ใช้ก็เอาออกได้เลยครับ
          ....
          ....

/* ได้รับการอนุมัติทุน (row-commit) เป็นแถวสีเขียว */
#gridLoanID table.items tr.row-commit:hover{
  background-color: green!important;
}

/*ยังไม่ได้รับการอนุมัติทุน (row-wait)  เป็นแถวสีแดง*/
#gridLoanID table.items tr.row-wait:hover{
  background-color: red!important;
}

เท่านี้ก็เป็นอันเสร็จสิ้นครับ