หากมีคำถาม ขอให้ไปโพสต์ลง เว็บบอร์ดจีทูจีเน็ตดอตคอม ตัวใหม่แทนน่ะครับ

หรือติดต่อเข้ามาทาง Inbox ที่ เฟซบุ๊ค ผมครับ

หน้าหลัก
ข่าวสาร - บทความ ทั้งหมด
VB 6/VB.Net
ASP/ASP.Net
จับฉ่ายคอมพิวเตอร์
เรียนรู้ผ่าน Flash Movie
บทความที่มีผู้ตอบล่าสุด  
 RSS Feeds
 ดาวน์โหลดโปรแกรม RSS Reader ได้ที่นี่ ...   Download โปรแกรม RSS Reader

Forum - www.g2gnet.com
Webmaster - www.g2gnet.com
Visitors - Session views
 5 2 9 0 7 9 5

7 ธันวาคม พ.ศ.2549
218 Users On-Line.
Visitors - Page views
 8 6 2 1 4 1 6
1 กุมภาพันธ์ พ.ศ.2551

Google   
เว็บ g2gnet.com
ขนาดตัวอักษร:  

ตารางกริด (MS Flex Grid) ธรรมดา ที่ไม่ธรรมดา ... VB 6.0

Category »  VB 6/VB.Net
โดย : Webmaster เมื่อ 9/11/2549 14:11:00
(อ่าน : 46072) 

สำหรับงานโปรแกรมมิ่ง มันคงเป็นงานที่หลายต่อหลายคน มองว่ามันเป็นเรื่องของ เทคโนโลกีย์ เอ๊ย เทคโนโลยี เป็นหลักซ่ะมากกว่า แต่สำหรับมุมมองของผม (และพวกชนกลุ่มน้อยๆ ... ยังๆครับ ยังมีแนวร่วมอีก) กลับมองว่า มันเป็นเรื่องของ "จินตนาการ" อย่างมีศิลปะ ที่แอบแฝงมา (เล็กๆ) หากเปรียบเทียบกับคำไทยๆ ก็คงไม่ต่างไปจากกับคำว่า "เป็นเรื่องของศาสตร์ และ ศิลป์" อะไรประมาณนั้นแหละครับ ... พี่น้อง

แหม ... มันก็คงจะต้องมีเหตุ มีผล กันนั่นแหละ เราลองมาดูตัวอย่างกัน

ตารางกริด (Grid) เป็น Control ตัวสำคัญอีกตัวหนึ่งที่จำเป็นต้องใช้งานใน Visual Basic เป็นอย่างยิ่ง เพื่อนำมาแสดงผลข้อมูล หากบางท่านนึกไม่ออก ก็ลองนึกถึงภาพของ Excel นั่นไงครับ เพราะมันจะมีแถว (Row) และ หลัก (Column) โดยส่วนใหญ่ Grid จะถูกนำมาใช้ในเรื่องของฐานข้อมูล แต่ทว่า ปัญหาของ Grid
(ไม่นับพวกที่เป็น ADO Grid Bound Control จำพวกนี้ "ง่าย" ต่อการดึงข้อมูลมาแสดงผล และ แก้ไขได้ แต่ "ยาก" ต่อการควบคุม)
ก็คือว่า "มันแสดงผลได้อย่างเดียว" ซึ่งจะไม่สามารถเข้าไปแก้ไขข้อมูลต่างๆที่อยู่ใน Cell ใดๆได้เลย ... นี่แหละคือ "ปัญหา"
    "ปัญหามา ปัญญามี" ... อันดับแรก "จินตนาการ" กันก่อนล่ะ
  1. เราสามารถหาตำแหน่งของ Cell ได้หรือไม่ว่ามันอยู่ที่ แถวใด หลักใด
  2. เราสามารถเคลื่อนย้าย Cell ต่างๆ ได้หรือไม่ ด้วยเมาส์ กะ แป้นพิมพ์ ...

ผลจากการทดสอบ

' Code ที่ใช้ทดสอบ
Private Sub fg_Click()
    MsgBox "แถวที่ " & fg.Row & " และ " & "หลักที่ " & fg.Col & vbCrLf & "Left=" & fg.CellLeft & vbCrLf & "Top=" & fg.CellTop
End Sub

ทำไมเหรอครับ ... สิ่งที่ต้องมานั่งนึกถึงก็คือเรื่องของ "คุณสมบัติ - Properties" ประจำตัวของพวก Control เหล่านี้ไงครับ เพราะมันเป็นตารางกริด ซึ่งต้องมีการอ้างอิงในเรื่องของ Cell อยู่แล้วน้านไงครับพี่น้อง ดังนั้นเราจึงพุ่งเป้าไปที่การเคลื่อนที่ และ หาตำแหน่งของในแต่ละ Cell ... แล้วหาไปไม
ในขณะที่ใช้สายตาออกแบบ เพ่งเล็ง กะไอ้เจ้าคอมพิวเตอร์อยู่เนี่ยะ มันยังนึกไม่ออกหรอกครับ เพียงแต่เหล่ไป เหล่มา และแล้ว (น้อง) ฟ้าก็เมตตา ปราณี มันก็เลยพอจะมองเห็นอะไรๆบางอย่างลางๆแล้วครับพี่น้อง กล่าวคือ การเคลื่อนที่ของ Cell มันก็เลยทำให้นึกถึงเรื่อง "Method - วิธีการ" อย่างหนึ่งขึ้นมา นั่นคือ "Move" ครับกระผม

เมื่อมาถึงจุดนี้ปั๊บ ... ก็ต้อง "จินตนาการ" กันอีกต่อไป หากเราเลือกตำแหน่ง Cell ที่เราต้องการได้แล้วนั้น แล้วลองเลื่อนตำแหน่งของ TextBox เข้าไปปิดทับ ณ ตำแหน่งนั้น เพื่อป้อนข้อมูลเข้าไป และเมื่อป้อนเสร็จเรียบร้อย (เกิดเหตุการณ์ Event - Change) ก็จะต้องบังคับให้มันไปเปลี่ยนแปลงค่าที่อยู่ใน Cell ที่เราต้องการนั้น ... มันมีโอกาส หรือ คิดว่าจะเป็นไปได้หรือไม่ ???

คำตอบ: เป็นไปได้ เพราะว่า เราสามารถที่จะใส่ค่าต่างๆลงไปใน Cell ได้อยู่แล้วนี่นา ด้วยคำสั่ง

    fg.TextMatrix(แถวที่ต้องการ, หลักที่ต้องการ) = "ข้อความ" หรือ
    fg.Text = "ข้อความ"


ผลจากการทำงานของโปรแกรม

ดังนั้นก็เริ่มต้นลงมือทำตามที่ได้จินตนาการเอาไว้

 

อันดับแรกเลือก Component เข้ามาก่อนไปที่ Project --> Components...


เลือก Components


Microsoft FlexGrid Control 6.0


    ต่อไปก็ทำการลาก Control ออกมา 2 ตัว ประกอบด้วย
  1. MS FlexGrid Control
  2. TextBox


    Properties หรือ คุณสมบัติที่สำคัญสำหรับ Control แต่ละตัว มีดังนี้คือ (Design-Time)
      MS FlexGrid
    1. Name: fg
    2. Fixed Rows: 1
    3. Fixed Cols: 0
    4. Rows: 2
    5. Cols: 4

      TextBox
    1. Name: Text1
    2. Text: Text1
    3. Visible: False ต้องปิดการแสดงผลก่อนครับผม

บททดสอบ

จากภาพด้านบนสุดนู้น สมมุติว่าผมต้องการที่จะแก้ไขค่าต่างๆ ในหลักที่ 3 เท่านั้น (ราคา) ในแถวใดๆ ก็ได้ ส่วนหลักอื่นๆไม่เกี่ยวแล้วกันครับผม ...

เริ่มต้นกระบวนการโค้ดโปรแกรม

Event/Driven เหตุการณ์นี้แหละครับ คือ การกำหนดตำแหน่งของ Cell ที่เราต้องการจะเปลี่ยนแปลง

Private Sub fg_EnterCell() ' พิจารณาจากเหตุการณ์ (Event) ในการ Focus ตรงตำแหน่งใน Cell
Select Case fg.Col ' เลือก Column ที่ต้องการ
    Case 0, 1, 2: ' เราไม่ได้ป้อนข้อมูลในหลักที่ 0, 1 และ 2
        Text1.Visible = False ' จึงต้องสั่งให้ปิดการมองเห็น Text1

    Case 3: ' โอเค ถูกต้อง Cell ที่กำลัง Focus มาอยู่หลักที่ 3 ก็เริ่มต้นกระบวนการทำงานได้
        Text1.Visible = True ' เปิดให้ Text1 มองเห็นได้
        Text1.Text = fg.Text ' ค่าเดิมที่อยู่ใน Cell จะถูกส่งต่อไปให้ Text1 เพื่อทำการแก้ไขต่อไป

        ' ขั้นตอนนี้คือการเลื่อนตำแหน่งของ Text1 ให้ไปทับอยู่บนตำแหน่งของ Cell (หลักที่กำหนด) ตามที่เราต้องการ
        ' การเคลื่อนที่ โดย fg.Move ตำแหน่งทางซ้าย, ตำแหน่งบน, ความกว้างของเซลล์, ความสูงของเซลล์
        Text1.Move fg.CellLeft, fg.CellTop, fg.CellWidth, fg.CellHeight

        ' เมื่อ Text1 เคลื่อนที่ไปทับตำแหน่ง Cell ที่เราต้องการแล้ว ให้ Focus ไปที่ Text1 เพื่อที่จะสามารถแก้ไขข้อมูลลงใน TextBox ได้
        Text1.SetFocus
End Select
End Sub

Private Sub Form_Load() ' มาทดสอบที่ฟอร์มหลัก
Dim sRow As Byte, i As Byte
Call SetupGrid ' สั่งตั้งค่า FlexGrid
Text1.Text = "" ' เคลียร์ค่าใน TextBox
' เป็นข้อมูลสมมุติขึ้นมาเพื่อทดสอบครับ
For i = 0 To 4
    With fg
        sRow = .Rows - 1 ' เนื่องจากแถวที่กำหนด (Rows) มีอยู่ 2 แถว โดยแถวบนสุด คือ แถว 0 จะเป็น Header ส่วนแถวเริ่มต้นที่ต้องเริ่มใส่ค่าเข้าไปคือแถวที่ 1 (1 = 2 - 1)
        .TextMatrix(sRow, 0) = "รหัสสินค้า " & i + 1
        .TextMatrix(sRow, 1) = "ชื่อสินค้า " & i + 10
        .TextMatrix(sRow, 2) = "ยี่ห้อ " & i + 20
        .TextMatrix(sRow, 3) = Format(i + 30, "#,##0.00")
        .Rows = .Rows + 1 ' เพิ่มค่าแถวทั้งหมดขึ้นไปอีก 1
    End With
Next
fg.Rows = fg.Rows - 1 ' ค่าของแถวมันจะเกินไป 1 เท่านั้นเอง ... ลองแก้โค้ดด้านบนดูแล้วกัน อิอิ
End Sub

Sub SetupGrid() ' ตั้งค่าต่างๆของ FlexGrid
With fg
    .Clear ' สั่ง Clear FlexGrid
    .Cols = 4 ' การกำหนดในรูปแบบของ Run Time ฮับผม
    .TextMatrix(0, 0) = "รหัสสินค้า"
    .TextMatrix(0, 1) = "ชื่อสินค้า"
    .TextMatrix(0, 2) = "ยี่ห้อ"
    .TextMatrix(0, 3) = "ราคา"
    .ColWidth(0) = 1200
    .ColWidth(1) = 3200
    .ColWidth(2) = 1000
    .ColWidth(3) = 1250
End With
End Sub

Private Sub Text1_Change() 
    ' เมื่อ Text1 เกิดการเปลี่ยนแปลง ก็จะส่งค่าให้กับ Cell ที่เราต้องการด้วย แต่ ณ ขณะนี้เรายังมองไม่เห็นหรอกครับ เพราะ Text1 มันทับ Cell ไว้อยู่ -- สำมะคัญน่ะตัวนี้
    fg.Text = Format(Text1.Text, "#,##0.00")
End Sub

 

เป็นอย่างไรบ้างครับ พอจะมองเห็นทางสว่าง (รำไรๆ) บ้างน่ะครับ การประยุกต์ใช้งานก็มีหลากหลาย ตัวอย่างเช่น ใบรายการสั่งซื้อ ใบเสนอราคา แบบสอบถาม หรือ จะเอา ComboBox มาใส่ เอา DTPicker มาแปะลง (ข้อมูลเพิ่มเติม ... ที่นี่) อะไรประมาณนี้แหละ จากนั้นก็นำข้อมูลที่อยู่ในกริด เอาเข้าไปเก็บลงในฐานข้อมูลได้อย่างสบายๆ แถมอำนวยความสะดวกให้แก่ผู้ใช้งานได้อีกตะหาก เฮ้อ ... แค่คิดก็มันส์แล้ว

บทสรุป

จุดเริ่มต้นของงานชิ้นนี้มันเกิดขึ้นมาจาก "จินตนาการ" แล้วนำมาผสมผสานเข้ากับ "ความรู้ื้พื้นฐานของ Visual Basic" เพื่อมาใช้งาน
  • Control หรือ Object
  • Properties - คุณสมบัติประจำตัวของ Control หรือ Object
  • Method - วิธีการ เช่น การเคลื่อนที่ (Move) นี่แหละครับ
  • Event - Driven เกิดเหตุการณ์อะไรขึ้นมา แล้วจะให้มันไปทำอะไรล่ะ ...
  • แล้วจะรู้ได้ไงล่ะเนี่ยะ ???
  •  


    จี ทู จี เน็ต ดอต คอม - g2gNet Dot Com
    เลขทะเบียนพาณิชย์อิเล็กทรอนิกส์ 0407314800231
    CopyLeft © 2004 - 2099 g2gNet.Com All rights reserved.
    Email: [email protected] หรือ โทร. 08-6862-6560