Get Adobe Flash player

sarinya.k

การเปลี่ยนสีพื้นหลังตารางทั้งแถวให้กับ gridview

การนำเสนอข้อมูลในตารางเป็นที่นิยมในการนำเสนอข้อมูลบนเว็บไซต์ และบางครั้งในการนำเสนอก็มักจะมีการเน้นสีเพื่อเน้นข้อมูลเฉพาะแถว เช่น ข้อมูลรวม หรือหัวข้อต่างๆ เพื่อให้แถวนั้นๆดูโดดเด่นขึ้นมา ให้ง่ายต่อการสังเกตเห็น หรือบางครั้งก็อาจเพื่อความสวยงามของตาราง ในการเขียนโค้ดเพื่อเปลี่ยนสี row ของ gridview สามารถกระทำได้ดังตัวอย่าง


เริ่มต้น สมมติว่าต้องการเปลี่ยนสีแถวล่างสุดของตารางนี้ให้เป็นสีม่วงอ่อน

km11-2016-1

 

ในไฟล์ .aspx
ให้เติมคำสั่งนี้ลงไปใน gridview

OnHtmlRowPrepared=”ชื่อคำสั่ง

ตัวอย่าง

km11-2016-4

 

ในไฟล์ .cs
เขียนโค้ดดังนี้

protected void ชื่อคำสั่ง (object sender, DevExpress.Web.ASPxGridViewTableRowEventArgs e)

   {

       if (e.RowType != GridViewRowType.Data) return;

       string text = e.GetValue(“ชื่อ colที่จะใช้เช็คค่าเงื่อนไข“).ToString();

       if (เงื่อนไข)

       {

           e.Row.BackColor = System.Drawing.Color.FromArgb(ค่าสี);

       }

   }

ตัวอย่าง

km11-2016-3

 

ก็จะเปลี่ยนสีพื้นหลังเฉพาะแถวที่ต้องการได้ผลดังนี้

km11-2016-2

การใส่ icon/logo ลงบน title website

การตกแต่งเว็บไซต์ให้สวยงามก็เป็นสิ่งสำคัญที่ช่วยดึงดูดให้เว็บไซต์ดูน่าสนใจ ไม่เว้นแม้แต่จุดเล็กๆน้อยๆอย่างชื่อเว็บไซต์ที่แสดงบนเบราเซอร์ ซึ่งนอกจากจะใช้แสดงชื่อเว็บไซต์ได้แล้ว ในการเขียนโค้ด เราสามารถใส่รูป icon หรือ logo ลงไปประกอบชื่อเว็บไซต์ได้อีกด้วย นอกจะให้ประโยชน์ในแง่ความสวยงามแล้ว มันยังช่วยให้ผู้ใช้งานสามารถสังเกตเห็นแถบชื่อเว็บไซต์นั้นๆได้ง่ายขึ้น เนื่องจากสามารถเลือก icon ที่มีสีสันและรูปที่สะดุดตา และสามารถใส่เอกลักษณ์เฉพาะตัวลงไปได้ ซึ่งขั้นตอนในการแต่งเว็บส่วนนี้ก็ไม่ได้ยุ่งยาก

untitled-3

รูป icon ของเว็บไซต์หลังใส่โค้ด

โค้ด html ที่ใช้

<link rel=”icon” type=”image/นามสกุลไฟล์” href=”pathที่อยู่ของรูปภาพที่จะทำเป็น icon หรือ logo” />

จะใส่ภายใน tag <head>….</head> ดังตัวอย่าง

untitled-2

code ที่ใช้ในการปรับแต่ง (กรอบสีส้ม)

ในส่วนของ type นี้จะเป็นการบอกว่าไฟล์รูปภาพนั้นเป็นไฟล์สกุลใด แต่ที่แนะนำคือไฟล์ .png ซึ่งจะเหมาะสำหรับการทำเว็บไซต์
ในส่วนของรูปภาพนั้น จะต้องนำมาใส่โฟลเดอร์โปรเจคของเว็บไซต์ก่อน แล้วจึงนำ path ที่อยู่ของรูปภาพมาใส่ใน href

 

ซึ่งหากทำถูกตามขั้นตอนจะได้ icon มาแสดงอยู่ทางซ้ายมือของชื่อเว็บไซต์ ดังภาพ

untitled-4

รูป icon ของเว็บไซต์หลังใส่โค้ด