1111111111111


เว็บใหม่ที่ผมขอใช้ฟรีครับ ภาวนาอยู่ว่าวันดีคืนดีข้อมูลคงไม่หายเหมือนเว็บอื่น

วันพุธที่ 2 มีนาคม พ.ศ. 2554

ลายตากับ 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;
}


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



0 ความคิดเห็น: