Month: July 2017

การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode

wanwarang.j

July 15, 2017
ก่อนที่เราจะไปเริ่มเนื้อหาของบทความี้ ผู้เขียนต้องขอท้าวความเดิมตอนที่แล้วของบทความก่อน ซึ่งผู้เขียนได้พูดถึงวิธีการแสดงผลเส้นทางทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้นไว้ (สามารถศึกษาเพิ่มเติมได้จากบทความ : การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น ) สำหรับในบทความนี้ผู้เขียนจึงอยากต่อยอดการทำงาน และเพิ่มลูกเล่นให้กับการแสดงผลแผนที่ด้วยการปรับเปลี่ยนการกำหนดรูปแบบการแสดงผลของเส้นทางให้ผู้เยี่ยมชมเว็บไซต์ ซึ่งเราจะให้ผู้ใช้สามารถเลือกรูปแบบในการแสดงผลได้ว่า ต้องการดูเส้นทางในรูปแบบใดตามรูปแบบ Mode ที่ผู้ใช้เลือกมา เช่น เส้นทางเดิน ทางถนน หรือขนส่งสาธารณะ เป็นต้น โดยวิธีการดังกล่าวนี้เหมาะกับเว็บไซต์ที่มีความเกี่ยวข้องกับความต้องการที่ต้องการทราบเส้นทางในแต่ละรูปแบบ เพื่อเป็นประโยชน์ในการนำไปประยุกต์ใช้กับงานของแต่ละท่านได้ค่ะ

ตัวอย่างผลลัพธ์ที่ได้จากบทความที่แล้ว

ซึ่งจากตัวอย่างโค้ดในบทความที่แล้ว การกำหนด DirectionsTravelMode เป็น DRIVIING ซึ่งในความเป็นจริงแล้วยังมีรูปแบบอื่นๆให้เลือกใช้ด้วยกันทั้งหมด 4 รูปแบบ ดังนี้
```
DRIVING (Default):เป็นโหมดตั้งต้นให้หากไม่ได้มีการกำหนดไว้ ซึ่งเป็นโหมดที่แสดงเส้นทางการขับขี่ด้วยยานพาหนะ
BICYCLING: เป็นโหมดสำหรับเส้นทางที่เตรียมไว้สำหรับผู้ขับขี่จักรยาน
TRANSIT: เป็นโหมดสำหรับแสดงเส้นทางระบบขนส่งสาธารณะ เช่น  รถบัส รถไฟ หรือแม้แต่เครื่องบิน เป็นต้น
WALKING: เป็นโหมดสำหรับแสดงเส้นทางการเดินถนน
```
ซึ่งผู้เขียนจะขอยกตัวอย่างในส่วนของการเลือกรูปแบบเส้นทางและผลลัพธ์ของแต่ละรูปแบบ ดังตัวอย่างโค้ดต่อไปนี้
- การกำหนดรูปแบบของเส้นทางในการแสดงผลบนแผนที่
1. โค้ด Javascript
```
 <script type="text/javascript">
function initialize() {
 // ประกาศเรียกใช้งาน DirectionsService เพื่อการแสดงผลให้มีลักษณะเป็น Global
 window.directionsService = new google.maps.DirectionsService();
 window.directionsDisplay = new google.maps.DirectionsRenderer();
 var map;
 var bounds = new google.maps.LatLngBounds();
 var mapOptions = {
 mapTypeId: 'roadmap'
 };

// แสดงผลแผนที่ในหน้าจอตาม Element ที่กำหนด
 map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 map.setTilt(45);

// กำหนดพิกัดจุดให้กับจุดเริ่มต้นและเส้นสุด
 window.markers = [
 ['Place1', 51.501546, -0.142000],
 ['Place2', 51.512051,-0.091225]
 ];
// ให้แสดงผลสิ่งที่ตั้งค่าไว้ในพื้นที่แผนที่ที่กำหนด
 directionsDisplay.setMap(map);
// กำหนดค่าเริ่มต้นของรูปแบบให้เป็นเส้นทางการเดิน (walking mode)
 calcRoute();
}
// เป็นฟังก์ชั่นในการคำนวณเส้นทางระหว่างสองจุดพิกัดบนแผนที่และเลือกกำหนดค่า Mode ในการแสดงผล
 function calcRoute() {
  var selectedMode = document.getElementById('travelType').value;
  var request = {
 
  origin: new google.maps.LatLng(markers[0][1], markers[0][2]),
 
  destination: new google.maps.LatLng(markers[1][1], markers[1][2]),

//// //กำหนดรูปแบบการแสดงผลเส้นทางโดยเริ่มต้นให้เป็นเส้นทางการเดิน(ตามรายการแรกที่เลือก)
  travelMode: google.maps.TravelMode[selectedMode]
  };
  
 directionsService.route(request, function(response, status) {
 if (status == google.maps.DirectionsStatus.OK) {
 directionsDisplay.setDirections(response);
 }
 });
 }
 </script>
```
2. ส่วนของการแสดงผลใน body
```
<body> 
<div id="map_wrapper">
 <div id="map_canvas" class="mapping"></div>
</div>
<div id="travel_selector">
 <p><strong>Mode of Travel: </strong>
 <select id="travelType" onchange="calcRoute();">
 <option value="WALKING">Walking</option>
 <option value="BICYCLING">Bicycling</option>
 <option value="DRIVING">Driving</option>
 <option value="TRANSIT">Transit</option>
 </select></p>
</div>
</body>
```
3. ผลลัพธ์ในแต่ละรูปแบบ
- แบบที่ 1 DRIVING Mode :
- แบบที่ 2 BICYCLING Mode:
- แบบที่ 3 TRANSIT Mode:
- แบบที่ 4 WALKING Mode:
  
  จากตัวอย่างจะเห็นได้ว่าเป็นพิกัดของประเทศในต่างแดน เนื่องจากก่อนหน้านี้ ผู้เขียนลองใช้พิกัดจุดบนพื้นที่ประเทศไทย แต่พบว่ามีบาง Mode ยังไม่รองรับ เช่น เส้นทางจักรยาน ซึ่งเมื่อเลือกกำหนดโหมดดังกล่าวจะไม่เห็นการเปลี่ยนแปลงใดๆ จึงหันไปยกตัวอย่างจาก London แทนเพื่อให้ผู้อ่านได้เห็นความแตกต่างในการแสดงผลแต่ละแบบได้ชัดเจนขึ้น แต่เพื่อไม่ให้เป็นการน้อยเนื้อต่ำใจกัน ผู้เขียนก็ได้ลองเอาพิกัดของพื้นที่ในประเทศไทยมาลองทำดูให้ผู้อ่านได้เห็นแถมมาด้วยว่าพื้นที่ของเราจะเห็นเส้นทางเป็นยังไงในแต่ละแบบกันบ้าง ดังนี้ค่ะ
  ตัวอย่างการแสดงเส้นทางระหว่างสนามบินสุวรรณภูมิและเขตจตุจักร
  1) แบบ Transit mode
  
  จะเห็นได้ว่า เมื่อคลิกที่รูปสัญลักษณ์เครื่องหมายคำพูด จะแสดงรายละเอียดเกี่ยวกับข้อมูลการขนส่งสาธารณะนั้นๆ เช่น รถเมล์สายใด รถไฟฟ้า BTS สายใด เป็นต้น
  
  2) แบบ Walking Mode
  
  3) แบบ Driving Mode
  
  จากบทความ จะเห็นได้ว่านี่เป็นอีกหนึ่งตัวอย่างในการเพิ่มลูกเล่นให้กับการใช้งานแผนที่เท่านั้น โดยยังมีอีกหลายวิธีการรอให้เราศึกษาเพื่อนำมาประยุกต์ใช้และเพิ่มความสามารถให้กับการใช้งานแผนที่ในเว็บไซต์ของเรา ผู้เขียนหวังว่าบทความนี้จะเป็นประโยชน์กับผู้อ่านสามารถหยิบยกไปใช้ประโยชน์ได้ไม่มากก็น้อย หากมีข้อผิดพลาดประการใดผู้เขียนขออภัยไว้ ณ ที่นี้ด้วยนะคะ ขอบคุณค่ะ ^^
  
  แหล่งข้อมูลอ้างอิง :
July 15, 2017
การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น

wanwarang.j

July 15, 2017
หลังจากที่ก่อนหน้านี้ ผู้เขียนเคยได้มีโอกาสศึกษาบทความเกี่ยวกับความสามารถของ Google Map APIs มาบ้างแล้วนั้น ผู้เขียนเห็นว่าเรื่องเกี่ยวกับแผนที่นับเป็นอีกหัวข้อที่น่าสนใจในการพัฒนาเว็บไซต์ในปัจจุบัน โดยเฉพาะเว็บไซต์ที่มีส่วนเกี่ยวข้องกับสถานที่ และที่ตั้ง เพราะถือเป็นการเพิ่มลูกเล่นให้มีความตื่นตาตื่นใจยิ่งขึ้น โดยความสามารถของแผนที่ที่ใน Google Map APIs มีมาให้ใช้กันได้ในหลายรูปแบบ ขึ้นอยู่กับความต้องการของผู้พัฒนาแต่ละคน อาทิ การกำหนดพิกัดจุด การแสดงเส้นทาง การค้นหาละติจูด-ลองจิจูดจากการคลิกบนแผนที่ หรือจนกระทั่งการดึงพิกัดมาจากฐานข้อมูลเพื่อมาแสดงผล เป็นต้น โดยในความเป็นจริงแล้ว ลูกเล่นเกี่ยวกับการทำงานกับแผนที่ยังมีอีกมากมาย แต่ในบทความนี้ ผู้เขียนจะขอพูดถึงในส่วนของการแสดงเส้นทางระหว่างจุดสองจุดในแบบเบื้องต้นเพื่อทำความเข้าใจก่อนนำไปประยุกต์ใช้ ดังนี้

การแสดงเส้นทางโดยเบื้องต้นเมื่อทราบจุดพิกัดละติจูด-ลองจิจูดบนแผนที่
1. อ้างอิงไฟล์ที่ใช้ในการทำงานร่วมกับ Google Map APIs
```
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=en" async defer></script>
```
2. ส่วนของ Javascript ที่ใช้ในการแสดงเส้นทางระหว่างพิกัด 2 จุดบนแผนที่
```
<script type="text/javascript">
/////////การกำหนดค่าละติจูด-ลองจิจูดระหว่าง 2 ตำแหน่ง ในที่นี้คือ มหาวิทยาลัยสงขลานครินทร์ และสวนสาธารณะหาดใหญ่
var markers = [
 {
 "title": 'มหาวิทยาลัยสงขลานครินทร์',
 "lat": '7.006941', 
 "lng": '100.498412',
 "description": '<b>มหาวิทยาลัยสงขลานครินทร์:</b> (อังกฤษ: Prince of Songkla University; อักษรย่อ: ม.อ.) เป็นมหาวิทยาลัยแห่งแรกในภาคใต้ของประเทศไทย ตาม พระราชบัญญัติมหาวิทยาลัยสงขลานครินทร์ พ.ศ. ๒๕๑๑ ก่อตั้งในปี พ.ศ. 2510 ต่อมา พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดชได้พระราชทานชื่อเมื่อวันที่ 22 กันยายน พ.ศ. 2510 จึงถือว่าวันที่ 22 กันยายนของทุกปี เป็นวันสงขลานครินทร์'
 }
 ,
 {
 "title": 'สวนสาธารณะหาดใหญ่',
 "lat": '7.042899', 
 "lng": '100.507664',
 "description": '<b>สวนสาธารณะเทศบาลนครหาดใหญ่:</b> เป็นแหล่งพักผ่อนหย่อนใจของคนเมืองแห่งนี้ มีทัศนียภาพที่สวยงาม เต็มไปด้วยด้วยแมกไม้เขียวขจี มีอ่างเก็บน้ำขนาดใหญ่ สัตว์น้ำนานาชนิดมากมาย สมบูรณ์ด้วยธรรมชาติอันบริสุทธิ์ ที่รอคอยต้อนรับนักท่องเที่ยวให้ได้สัมผัสกับความร่มรื่นของพรรณไม้นานาชนิด'
 }
 
 ];
///////เป็นการกำหนดค่าต่างๆตอนที่ฟอร์มมีการโหลด

window.onload = function () {

//////กำหนดค่ากึ่งกลางการแสดงผลแผนที่ ระยะใกล้ และชนิดการแสดงผลของแผนที่
 var mapOptions = {
 center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
 zoom: 10,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

//////ประกาศ Element ที่จะใช้ในการแสดงผล
 var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
 var infoWindow = new google.maps.InfoWindow();

 var lat_lng = new Array(); ///สร้างตัวแปรอาร์เรย์เพื่อเก็บค่าละติจูด-ลองจิจูด
 var latlngbounds = new google.maps.LatLngBounds();

/// วนพื่อเก็บค่าละติจูด-ลองจิจูดในตัวแปรอาร์เรย์ และเก็บค่าในการพิกัดจุดของแต่ละจุดที่มี
 for (i = 0; i < markers.length; i++) {
 var data = markers[i]
 var myLatlng = new google.maps.LatLng(data.lat, data.lng);
 lat_lng.push(myLatlng);


 var marker = new google.maps.Marker({
 position: myLatlng,
 map: map,
 title: data.title
 });

 latlngbounds.extend(marker.position);

//////กำหนดเมื่อมีอีเวนต์คลิก ให้แสดงผลรายละเอียดที่กำหนดไว้ในตัวแปรของ marker ที่กำหนดไว้ในแต่ละตำแหน่ง
 (function (marker, data) {
 google.maps.event.addListener(marker, "click", function (e) {
 infoWindow.setContent(data.description);
 infoWindow.open(map, marker);
 });
 })(marker, data);
 }
 map.setCenter(latlngbounds.getCenter());
 map.fitBounds(latlngbounds);
 
 //***********ส่วนของการแสดงเส้นทาง****************//
 
 //ประกาศ Path Array
 var path = new google.maps.MVCArray();
 
 //ประกาศการใช้งาน Direction Service
 var service = new google.maps.DirectionsService();
 
 //กำหนดสีของเส้นทางที่ต้องการ
 var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
 
 //วนลูปเพื่อวาดเส้นทางระหว่างจุดที่มีในแผนที่
 for (var i = 0; i < lat_lng.length; i++) {
 if ((i + 1) < lat_lng.length) {
 var src = lat_lng[i];
 var des = lat_lng[i + 1];
 path.push(src);
 poly.setPath(path);
 service.route({
 origin: src,
 destination: des,
 travelMode: google.maps.DirectionsTravelMode.DRIVING
/////กำหนด Mode ในการแสดงผลเส้นทาง(จะกล่าวเพิ่มเติมในภายหลัง)
 }, function (result, status) {
 if (status == google.maps.DirectionsStatus.OK) {
 for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) 
{
 path.push(result.routes[0].overview_path[i]);
 }
 }
 });
 }
 }

</script>
```
3. ส่วนของ body ในการแสดงผล
```
<body>
 <form id="form1" runat="server">
<div id="dvMap" style="width: 500px; height: 500px">
</div>
 </form>
</body>
```
4. ตัวอย่างผลลัพธ์ที่ได้ หมายเหตุ: หากต้องการเปลี่ยนสีเส้นทางในการแสดงผล สามารถทำได้โดยการกำหนดสี จากโค้ดดังตัวอย่าง คือ
  var poly = new google.maps.Polyline({ map: map, strokeColor: ‘#4986E7‘ }); ซึ่งสามารถเปลี่ยน strokeColor ในส่วนของตัวอักษรสีน้ำเงินให้เป็นสีที่ท่านต้องการได้
เอาล่ะค่ะ เราก็ได้เห็นวิธีการและตัวอย่างการแสดงเส้นทางระหว่างจุดพิกัดบนแผนที่กันไปพอหอมปากหอมคอกันแล้วนะคะ หวังว่าผู้อ่านแต่ละท่านจะสามารถนำเกร็ดเล็กเกร็ดน้อยเหล่านี้ไปประยุกต์ใช้งานต่อได้ไม่มากก็น้อย หากมีข้อผิดพลาดประการใดผู้เขียนขออภัยไว้ ณ ที่นี้ด้วยนะคะ ไว้เจอกันใหม่บทความหน้าเกี่ยวกับเรื่อง “การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode” นะคะ ขอบคุณค่ะ ^^

หมายเหตุ: หากผู้ใดสนใจบทความอื่นๆเกี่ยวกับการพัฒนาโปรแกรมด้วยแผนที่ Google Map APIs ที่ผู้เขียนเคยเขียนไว้ก่อนหน้านี้ สามารถติดตามได้จากลิงค์ต่อไปนี้ค่ะ
1) ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C#
2) ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ)
3) การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps
4) การค้นหาสถานที่ด้วย Places search box และแสดงผลภาพจากข้อมูล Street View บน Google Maps

แหล่งข้อมูลอ้างอิง :

July 15, 2017

บทความนี้สำหรับผู้ที่ยังไม่ได้อ่านบทความก่อนหน้านี้ สามารถอ่านบทความได้ที่ Itextsharp #3 คู่มือเทคนิคพื้นฐานการใช้งาน PdfTable สำหรับมือใหม่ ตอนที่ 1 เพื่อความเข้าใจต่อเนื่องกันนะครับ โดยเนื้อหาในบทความนี้เป็นส่วนของใช้งาน Table ที่ผู้เขียนเองใช้ในการทำงานคือการทำ Nest Table นั้นเองโดยปกติการสร้างเอกสาร1ใบ ผู้เขียนจะใช้ Table ตัวแรกในการกำหนดรูปแบบหน้าตาของเอกสาร การจัดตำแหน่งสัดส่วนต่างๆ หลังจากนั้นก็ใช้ Table ซ้อนเข้าไปตามส่วนต่างๆตามที่ออกแบบไว้มาจัดการส่วนของข้อมูล จึงจำเป็นต้องใช้งาน Nest Table เราไปดูตัวอย่างรูปกันก่อนดีกว่าครับ

จากตัวอย่างจะพบว่าสำหรับคนที่เขียนโปรแกรมก็คือการซ้อนตารางปกติที่พบเจอได้ในการเขียนโปแกรม จากรูปคือเอาTable2 ใส่ใน Cell ที่1ของ Table1 หรือพูดภาษาของเขียนโปรแกรมคือเขียน Table2 ลงใน <TD> แรกของ Table1 นั้นเอง ซึ่งถามว่าทำงานคล้ายๆกับตารางทั่วไปแล้วสามารถรวมCell ก่อนเพิ่มตารางได้ไหมใน ItextSharp ทำได้เหมือนกันครับ ตามรูปเลยครับ

จากตัวอย่างเป็นการรวม Collumn แล้วทำการเพิ่ม Table2 เข้าไปโดยใน ItextSharp เรากำหนดCollumn ของTable1และTable2 เท่ากัน ตัวโปรแกรมจะจัดขนาดของ Cell ให้เท่ากันอัตโนมัติเมื่อทำการแสดงผลเหมือนในรูปตัวอย่างครับ ส่วนการเขียนโปแกรมนั้นง่ายมากๆเพิ่มขั้นตอนจากตอนที่1มานิดเดียว เราไปดู Code กันเลยดีกว่าครับ

PdfPCell PdfCell = null;

PdfPTable PdfTableH = new PdfPTable(3);
float[] tbHwidths = { 50f, 50f, 50f };
PdfTableH.SetWidths(tbHwidths);
PdfTableH.WidthPercentage = 100;

PdfCell = new PdfPCell(new Phrase(new Chunk("Table 2 Cell 1", bold)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTableH.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 2 Cell 2", bold)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTableH.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 2 Cell 3", bold)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTableH.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 2 Cell 4", bold)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTableH.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 2 Cell 5", bold)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTableH.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 2 Cell 6", bold)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTableH.AddCell(PdfCell);

//-----------------------------------------------------------------//

PdfPTable PdfTable = new PdfPTable(3);
float[] tbwidths = { 50f, 50f, 50f };
PdfTable.SetWidths(tbwidths);
PdfTable.WidthPercentage = 100;

PdfCell = new PdfPCell(PdfTableH);// <---------------------------------#1
PdfTable.AddCell(PdfCell);

//PdfTable.AddCell(new PdfPCell(PdfTableH)); <-------------------------#2

PdfCell = new PdfPCell(new Phrase(new Chunk("Table 1 Cell 2", fnt)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTable.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 1 Cell 3", fnt)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTable.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 1 Cell 4", fnt)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTable.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 1 Cell 5", fnt)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTable.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 1 Cell 6", fnt)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTable.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Table 1 Cell 7", fnt)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfTable.AddCell(PdfCell);

ตัวอย่าง Code ผู้เขียนแบ่งเป็น 2ส่วนด้วยกันคือส่วนแรกเป็นการสร้าง Table2ก่อน เพราะเราจะเอาTableนี้ไปใส่ในTable1อีกที การเขียนก็เหมือนจากตัวอย่างที่ผ่านๆมาในบทความก่อนหน้านี้ เรามาดูส่วนที่2กันส่วนที่ต่างจากส่วนแรกคือ บรรทัดที่(#1) PdfCell = new PdfPCell(PdfTableH); โค๊ดนี้คือการเพิ่ม Table2 ลงไปใน Cell ที่เราต้องการครับ หรือจะใช้อีกรูปแบบ(#2)คือ PdfTable.AddCell(new PdfPCell(PdfTableH)); แค่นี้เราก็ทำ NestTable เสร็จสิ้นเป็นที่เรียบร้อย ง่ายไหมครับ แล้วถ้าเราจะรวม Cell ก่อนเพิ่ม Table ละจะทำยังไง หลายคนอาจทำได้โดยไม่ต้องดูตัวอย่างของผู้เขียนแล้วก็ได้ครับ แต่เราไปดูตัวอย่างกันดีกว่าครับ

PdfCell = new PdfPCell(PdfTableH);
PdfCell.Colspan = 3;
PdfTable.AddCell(PdfCell);
หรือ
PdfTable.AddCell(new PdfPCell(PdfTableH) { Colspan = 3 });

เหมือนที่คิดไว้ไหมครับหรือหลายๆคนอาจเขียนได้แบบอื่นก็ไม่ผิดครับ จากตัวอย่างแค่เพิ่มคำสั่ง Colspan เข้าไปใน Cell ก็เป็นอันเสร็จเรียบร้อย จบส่วนของการทำ Nest Table แล้ว เรามาดูตัวอย่างการใช้งานจริงจากผู้เขียนสักตัวอย่างกันครับ

จากรูปตัวอย่างเอกสารประกอบไปด้วยส่วนของ Header Table1 ที่แสดงผลทุกหน้ากระดาษ และมีส่วนของเนื้อหาในหน้าแรกเป็นส่วนของ Body Table1 แล้วมีตารางของข้อมูลจำนวนหลายรายการโดยเมื่อตารางนี้ขึ้นหน้าใหม่ให้ทำการแสดงหัวตารางไปด้วย ผู้เขียนจะให้ส่วนนี้เป็น Table2 หรือ NestTable นั้นเอง ถ้าทุกท่านนึกภาพออกแล้วเราไปดูตัวอย่าง Code กันดีกว่าครับ

PdfPCell PdfCell = null;

PdfPTable PdfTableH = new PdfPTable(3);
float[] tbHwidths = { 50f, 50f, 50f };
PdfTableH.SetWidths(tbHwidths);
PdfTableH.WidthPercentage = 100;
PdfTableH.HeaderRows = 1;

PdfCell = new PdfPCell(new Phrase(new Chunk("Header Table 2", bold)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfCell.Colspan = 3;
PdfCell.FixedHeight = 20f;
PdfTableH.AddCell(PdfCell);

for (int i = 0; i < 60; i++)
{
    PdfCell = new PdfPCell(new Phrase(new Chunk("Body Table 2", fnt)));
    PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
    PdfCell.PaddingBottom = 8;
    PdfTableH.AddCell(PdfCell);
}

PdfPTable PdfTable = new PdfPTable(1);
float[] tbwidths = { 500f };
PdfTable.SetWidths(tbwidths);
PdfTable.WidthPercentage = 100;
PdfTable.HeaderRows = 1;
PdfTable.SplitLate = false;
PdfTable.KeepTogether = true;

PdfCell = new PdfPCell(new Phrase(new Chunk("Header Table 1", fnt)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfCell.PaddingLeft = 10;
PdfTable.AddCell(PdfCell);
PdfCell = new PdfPCell(new Phrase(new Chunk("Body Table 1", fnt)));
PdfCell.HorizontalAlignment = Element.ALIGN_CENTER;
PdfCell.PaddingBottom = 8;
PdfCell.PaddingLeft = 10;
PdfTable.AddCell(PdfCell);
PdfTable.AddCell(new PdfPCell(PdfTableH));

จาก Code ตัวอย่างผู้เขียนได้นำคำสั่ง HeaderRows มาใช้งานร่วมด้วยเพื่อให้ทำการยึดหัวตารางทั้งสองตารางเอาไว้ในหน้ากระดาษในหน้าถัดๆไปด้วย และผู้เขียนได้เพิ่มคำสั่งมาอีก 2 คำสั่งด้วยกัน เป็นคำสั่งเสริมขึ้นมาเพื่อให้การแสดงผลของข้อมูลสวยงามและถูกต้องตามที่เราต้องการ คือ PdfTable.SplitLate = false; และ PdfTable.KeepTogether = true; คำสั่งดังกล่าวใช้ในกรณีเราทำ NestTable ที่มีการแสดงผลมากว่า1หน้ากระดาษ แต่ถ้าเอกสารที่ทำมีเพียง1หน้ากระดาษแน่นอน คำสั่งดังกล่าวไม่ต้องเขียนก็ได้ครับ แล้วถ้าไม่ใส่ไปเลยได้ไหมถึงเอกสารจะมีหลายหน้า ผู้เขียนแนะนำว่าควรใส่ เพราะไม่มีคำสั่งนี้ Nest Table จะไม่แสดงผลในหน้าแรกเสมอครับแต่จะเลื่อนไปแสดงผลในหน้าที่สองแทน เนื่องจาก Itextsharp ทำการเลื่อนให้เองอัตโนมัติเมื่อตารางนั้นล้นเกินหน้ากระดาษแรก นั้นเอง

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