เมื่อทดลองคลิกปุ่ม UP หรือ DOWN ระบบก็สามารถย้ายแถวที่ต้องการไปยังตำแหน่งที่ก่อนหน้าหรือถัดไปได้อย่างถูกต้อง ยกเว้นการคลิก UP ที่แถวแรก และ DOWN ที่แถวสุดท้าย จะเกิด Error ดังภาพ
โดยเราจะต้องตรวจสอบเพิ่มเติมก่อนว่า เมื่อคลิกปุ่ม UP จะต้องไม่ใช่แถวแรก และคลิกปุ่ม DOWN จะต้องไม่ใช่แถวสุดท้าย เมื่อทดสอบรันอีกครั้ง ก็พบว่าสามารถทำงานได้ปกติ เมื่อคลิกปุ่ม UP ที่แถวแรก หรือปุ่ม DOWN ที่แถวสุดท้าย ก็จะไม่เกิด Error
โดยจากโค้ดข้างต้นจะพบว่า ไฟล์ที่จะใช้ในการรวบรวมจะต้องเป็นไฟล์ PDF ซึ่งในการทำงานจริงของเรา การแนบไฟล์เอกสาร/หลักฐานสามารถแนบได้ทั้งไฟล์ที่เป็น PDF และไฟล์ที่เป็นรูปภาพด้วย ดังนั้น ก่อนที่จะทำการรวมไฟล์ จึงต้องทำการตรวจสอบว่ามีไฟล์ดังกล่าวอยู่จริงหรือไม่ รวมทั้งตรวจสอบชนิดของไฟล์ด้วย หากพบว่าไฟล์ดังกล่าวไม่ได้อยู่ในรูปแบบ PDF ไฟล์ ให้ทำการแปลงไฟล์รูปภาพเหล่านั้นให้เป็น PDF เสียก่อน เพื่อป้องกันความผิดพลาดที่จะเกิดขึ้นในขณะทำการรวมไฟล์นั่นเอง
2. เขียนเมธอดในการรวมไฟล์ดังกล่าวและสร้างเป็นไฟล์ PDF ตัวใหม่
public static void CombineMultiplePDFs(string[] fileNames, string outFile)
{
// ขั้นที่ 1: สร้าง document ที่จะรวมไฟล์ทั้งหมดขึ้นมา
Document document = new Document();
// สร้าง FileStream object ที่จะใช้งานและต้องอย่าลืม dispose เมื่อใช้งานเรียบร้อยแล้ว
using (FileStream newFileStream = new FileStream(outFile, FileMode.Create))
{
// ขั้นที่ 2: สร้างตัว
PdfCopy writer = new PdfCopy(document, newFileStream);
if (writer == null)
{
return;
}
//ขั้นที่ 3:เปิดการใช้งานตัว document
document.Open();
// วนเพื่ออ่านค่าชื่อไฟล์ และทำการเพิ่มข้อมูลลงในเอกสารตัวใหม่ที่จะรวมไฟล์ทั้งหมด
foreach (string fileName in fileNames)
{
// สร้างตัว reader จากเอกสารแนบที่กำลังวน
PdfReader reader = new PdfReader(fileName);
reader.ConsolidateNamedDestinations();
// ขั้นที่ 4: ทำการเพิ่มหน้าข้อมูลจาก reader ให้กับตัว writer ทีละหน้า
for (int i = 1; i <= reader.NumberOfPages; i++)
{
PdfImportedPage page = writer.GetImportedPage(reader, i);
writer.AddPage(page);
}
PRAcroForm form = reader.AcroForm;
if (form != null)
{
writer.CopyAcroForm(reader);
}
reader.Close();
}
// ขั้นที่ 5: ปิดการทำงาน document และ writer
writer.Close();
document.Close();
}
}
3.เขียนเมธอดในแปลงไฟล์รูปภาพให้เป็นไฟล์ PDF
public static void ConvertImageToPdf(string srcFilename, string dstFilename)
{
iTextSharp.text.Rectangle pageSize = null;
using (var srcImage = new Bitmap(srcFilename))
{
pageSize = new iTextSharp.text.Rectangle(0, 0, srcImage.Width, srcImage.Height);
}
using (var ms = new MemoryStream())
{
var document = new iTextSharp.text.Document(pageSize, 0, 0, 0, 0);
iTextSharp.text.pdf.PdfWriter.GetInstance(document, ms).SetFullCompression();
document.Open();
var image = iTextSharp.text.Image.GetInstance(srcFilename);
document.Add(image);
document.Close();
File.WriteAllBytes(dstFilename, ms.ToArray());
}
}
จะเห็นว่าปุ่มที่เพิ่มขึ้นมาจะมีการระบุชื่อ class “restore-dialog” และ “fullscreen-dialog” ซึ่งจะใช้ในการอ้างถึงในโค้ด jQuery ที่ใช้ควบคุมการทำงานเมื่อมีการคลิกปุ่มนั้นๆ
2. เนื่องจากผู้เขียนใช้ icon ที่อยู่ใน font awesome ดังนั้นจะต้องเพิ่ม link style sheet เพื่ออ้างไปถึงไฟล์ css ของ font awesome ภายนอกไซต์ที่กำลังพัฒนา (CDN) โดยไปเพิ่มไว้ใน tag <head></head>
จากตัวอย่างข้างต้น จะเป็นวิธีการสร้าง Progress bar ที่มีการใส่สีสันให้กับแต่ละแถบเส้น แต่ลูกเล่นของการแสดงผล Progress bar ยังสามารถทำได้หลายแบบ ซึ่งผู้เขียนจะขอแนะนำอีกวิธี ซึ่งเป็นการสร้าง Progress bar แบบหลายสีในแถบเดียวกันโดยมีวิธีการเพิ่มเติม ดังนี้ค่ะ
การกำหนดพื้นที่ในการแสดงผล Progress bar ในส่วนของแท็ก body ในไฟล์ html
