jQuery EasyUI ตารางข้อมูล - เงื่อนไขที่กำหนดแถวสีพื้นหลัง
กวดวิชานี้จะแสดงวิธีการเปลี่ยนสายรูปแบบตารางข้อมูล (DataGrid) การชุมนุมตามจำนวนของเงื่อนไข เมื่อค่า listprice เป็นมากกว่า 50 เราจะตั้งค่าสีที่แตกต่างกันสำหรับแถว
ออกแบบมาสำหรับตารางข้อมูล (DataGrid) ของฟังก์ชั่น rowStyler คือการช่วยให้คุณสามารถปรับแต่งรูปแบบบรรทัด รหัสต่อไปนี้จะแสดงวิธีการเปลี่ยนรูปแบบบรรทัด:
<table id = "TT" title = "DataGrid" style = "width: 600px; ความสูง: 250px" url = "ข้อมูล / datagrid_data.json" singleSelect = fitColumns "true" = "true"> <thead> <tr> <ฟิลด์ Th = "Itemid" width = "80"> รหัสรายการ </ TH> <ฟิลด์ Th = "ProductID" width = "80"> รหัสสินค้า </ TH> <Th ฟิลด์ = "listprice" width = "80" align = "สิทธิ"> ราคา </ TH> <ฟิลด์ Th = "unitcost" width = "80" align = "สิทธิ"> ต้นทุนต่อหน่วย </ TH> <Th ฟิลด์ = "ATTR1" width = "150"> แอตทริบิวต์ </ TH> <ฟิลด์ Th = "สถานะ" width = "60" align = "center"> สมรส </ TH> </ tr> </ thead> </ table>
$ ( '# Tt'). Datagrid ({ rowStyler: ฟังก์ชั่น (ดัชนีแถว) { ถ้า (row.listprice> 50) { ผลตอบแทน 'สีพื้นหลังสีชมพูสี: สีฟ้า; font-weight: หนา;'; } } });
ที่คุณสามารถดูเราตั้งพื้นหลังสี (สีพื้นหลัง) ตามเงื่อนไขบางอย่างสำหรับสีชมพู (สีชมพู) การตั้งค่าสีข้อความสีฟ้า (สีฟ้า)