Day: May 25, 2021

  • ขยับแถว (row) ขึ้น/ลง ใน ASP.NET Gridview ด้วย jQuery

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

    โดยมีขั้นตอนดังต่อไปนี้

    1. เพิ่มโค้ด HTML สำหรับแสดงผลข้อมูล Gridview

    <asp:ScriptManager runat="server"></asp:ScriptManager>
    
    <asp:GridView ID="gvBib" runat="server" AutoGenerateColumns="False">
        <Columns>
    
            <asp:BoundField DataField="BIB_NO" HeaderText="Bib#" />
            <asp:BoundField DataField="TITLE" HeaderText="Title" />
            <asp:BoundField DataField="AUTHOR" HeaderText="Author" />
            <asp:BoundField DataField="CALL_NO" HeaderText="CallNo" />
            <asp:BoundField DataField="ISBN" HeaderText="ISBN" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:UpdatePanel runat="server">
                        <ContentTemplate>
                            <button class="up">UP</button>
                            <button class="down">DOWN</button>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    จะสังเกตว่าจะมีฟิลด์ที่เป็น ItemTemplate สำหรับแสดงผลปุ่ม UP และปุ่ม DOWN สำหรับใช้ในการเลื่อน row นั้นๆ ขึ้นหรือลง

    และเหตุผลที่จะต้องมี UpdatePanel ครอบปุ่มไว้ เพราะทุกครั้งที่มีการกด จะเกิดการ Postback ทำให้ข้อมูลจะถูก Bind ซ้ำ การเรียงลำดับก็จะกลับคืนไปเหมือนเดิม จึงจำเป็นต้องทำ Partial Load เพื่อป้องกันการ Bind ข้อมูลซ้ำ

    2. เพิ่มโค้ดใน event Page_Load ในหน้า code behind เพื่อจำลองข้อมูลที่จะใช้แสดงใน GridView

    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[5] { new DataColumn("BIB_NO"), 
                                                    new DataColumn("TITLE"), 
                                                    new DataColumn("AUTHOR"),
                                                    new DataColumn("CALL_NO"),
                                                    new DataColumn("ISBN")});
            dt.Rows.Add("001", "1 ทศวรรษ ดัชนีสุขภาพคนไทย", "สำนักงานคณะกรรมการสุขภาพแห่งชาติ (สช.)", "WA13 ห159 2556", "9786160822258");
            dt.Rows.Add("002", "ความลับในร่างกายมนุษย์ที่เราไม่เคยรู้", "ฟรานซิส, เกวิน", "QS4 ฟ133a 2560", "9786168022887");
            dt.Rows.Add("003", "The best ICU", "ดุสิต สถาวร", "WX218 B561 2560", "9786168122020");
            dt.Rows.Add("004", "COVID-19 โรคระบาดแห่งศตวรรษ", "นำชัย ชีววิวรรธน์", "QW168.5.C8 น515c 2563", "9789740217060");
            dt.Rows.Add("005", "Good health & smart life ในวัย 40+", "ไวต์, จอห์น", "WT104 ว967g 2560", "9786160827237");
            gvBib.DataSource = dt;
            gvBib.DataBind();
        }
        
    }

    เนื่องจากโค้ดตัวอย่างมีการใช้งาน class DataTable และ DataColumn ซึ่งอยู่ใน namespace System.Data เพราะฉะนั้นจะต้อง Import namespace นี้ด้วย

    using System.Data;

    3. เพิ่มโค้ด jQuery สำหรับควบคุมการทำงานปุ่ม UP/DOWN โดยหลักการทำงานคือ เมื่อคลิกปุ่ม UP หรือ DOWN แถวที่เลือก จะถูกขยับหรือลง 1 เรคคอร์ด

    //เมื่อคลิกปุ่ม UP
    $(document).on("click", ".up", function () {
    
        //เก็บเร็คคอร์ดที่ถูกคลิกเอาไว้
        var curRow = $(this).closest('tr');
    
    
        //ย้ายเร็คคอร์ดปัจจุบัน ไปอยู่ในตำแหน่งก่อนหน้า เร็คคอร์ดที่อยู่ก่อนหน้า
        curRow.insertBefore(curRow.prev());
    
    });
    
    //เมื่อคลิกปุ่ม DOWN
    $(document).on("click", ".down", function () {
        var curRow = $(this).closest('tr');
        curRow.insertAfter(curRow.next());
    });

    เมื่อทดลองรัน จะปรากฏผลลัพธ์ดังรูปด้านล่าง

    เมื่อทดลองกดปุ่ม UP ในช่อง Bib#005 เรคคอร์ดนั้นก็จะขยับขึ้นไปอยู่บน Bib#004 ดังรูป
    แต่ถ้าทดลองกดปุ่ม UP ในเรคคอร์ด Bib#001 เรคคอร์ดนี้จะถูกเลื่อนขึ้นไปอยู่เหนือเรคคอร์ดที่เป็น Header ของตารางซึ่งไม่ถูกต้อง
    4. เราจะต้องแก้ไขโค้ด jQuery เพิ่มเติม โดยแก้ไขเฉพาะกรณีคลิกปุ่ม UP เพื่อตรวจสอบก่อนว่า เรคคอร์ดที่คลิกเป็นเรคคอร์ดบนสุด (ยกเว้น header) หรือยัง
    //เมื่อคลิกปุ่ม UP
    $(document).on("click", ".up", function () {
    
        //เก็บเร็คคอร์ดที่ถูกคลิกเอาไว้
        var curRow = $(this).closest("tr");
    
        //เก็บเร็คคอร์ดแรกสุดของตารางเอาไว้ ซึ่งก็คือเรคคอร์ดหัวตาราง 
        //ที่เราจะไม่อนุญาตให้เอาเรคคอร์ดอื่นมาแทรก
        var firstRow = $("[id*=gvBib] tr:first");
    
        //ตรวจสอบว่าเร็คอคอร์ดก่อนหน้าของเร็คคอร์ดที่เรากดปุ่ม คือเร็คคอร็ดที่เป็นหัวตารางหรือไม่
        //ถ้าไม่ใช่ก็จะทำการย้ายเร็คคอร์ด
        if (curRow.prev().html() != firstRow.html() ) {
    
            //ย้ายเร็คคอร์ดปัจจุบัน ไปอยู่ในตำแหน่งก่อนหน้า เร็คคอร์ดที่อยู่ก่อนหน้า
            curRow.insertBefore(curRow.prev());
        }
    });

    เมื่อทดสอบอีกครั้ง ก็จะพบว่า ไม่สามารถกด UP เรคคอร์ดที่อยู่ใต้ Header ได้อีกแล้ว

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


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

    • https://stackoverflow.com/questions/16524497/jquery-to-move-row-up-and-down
    • https://stackoverflow.com/questions/36243730/jquery-to-compare-rows-in-two-tables
  • วิธี Zoom icon บน iPhone

    เวลาที่เราจะต้องการ Capture เพื่อทำคู่มือ หรือ ต้องการส่งหน้าจอให้ผู้อื่นดูว่าใช้ Icon ไหนในการเข้าใช้งาน เราสามารถ Capture หน้าจอพร้อมทั้ง Zoom Icon ให้ผู้ใช้เห็นกันชัดๆ อีกด้วย โดยมีขั้นตอนดังนี้ค่ะ

    1. Capture หน้าจอ โดยกดปุ่ม Home พร้อมกับปุ่ม Power จะเข้าหน้าจอของการแก้ไขภาพ  เลือกเครื่องหมาย + กด แล้วเลือก Magnifier


    2. ปรากฏแว่นขยาย ให้เลือกเลื่อนไปยัง Icon ที่เราต้องการ Zoom แล้วปรับขนาดได้ตามต้องการ

    3. จะได้หน้าจอผลลัพธ์ที่เราได้ Zoom ไว้

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

  • Big Data Framework

    ออกตัวไว้ก่อนนะครับบทความนี้เป็นการย่อความหรือถอดสาระสำคัญมาจาก หนังสือกรอบการวิเคราะห์ข้อมูลขนาดใหญ่ภาครัฐ ภายใต้การกำกับดูแลของ สำนักงานพัฒนารัฐบาลดิจิทัล (สพร.) ซึ่งจะนำเสนอในส่วนของการตั้งทีมเพื่อพัฒนา Big Data แนวทางการพัฒนาทั้งข้อมูลและกลุ่มคนที่จะดำเนินการพัฒนาระบบให้บริการข้อมูล เพื่อประยุกร์ใช้กับการนำข้อมูลไปประกอบการพัฒนามหาวิทยาลัยของเราในรูปแบบ (Data Driven Organization)

    ภาพที่ 1 กลุ่มเป้าหมายการพัฒนาบุคลากรด้านการใช้ประโยชน์ข้อมูลขนาดใหญ่

    1) กลุ่มผู้ใช้ข้อมูล (Business Domain) ได้แก่ ผู้บริหารระดับสูง ผู้อำนวยการกอง ผู้ทำงานด้านนโยบายและวิชาการ ผู้ทำงานด้านบริการ มีหน้าที่กำหนดโจทย์หรือประเด็น ที่ต้องการวิเคราะห์ข้อมูล และนำสารสนเทศที่เป็นผลจากการวิเคราะห์และนำเสนอข้อมูล มาใช้ประกอบการดำเนินงาน

    2) กลุ่มผู้วิเคราะห์ ประมวลและแสดงผลข้อมูล ได้แก่ นักวิทยาศาสตร์ข้อมูล (Data Scientist) นักวิเคราะห์ข้อมูล (Data Analyst) และนักนิทัศน์ข้อมูล (Data Visualizer) มีหน้าที่ในการนำข้อมูลมาจัดกลุ่ม วิเคราะห์และประมวลผล พร้อมทั้งพัฒนาภาพแบบ แสดงผลข้อมูลหรือ Dashboard สำหรับการนำเสนอข้อมูล

    3) กลุ่มผู้สร้างและพัฒนาระบบ ได้แก่ วิศวกรข้อมูล (Data Engineer) สถาปนิก ข้อมูล(Data Architect) นักวิเคราะห์ธุรกิจ(Business Analyst)ผู้จัดการโครงการ (Project Manager) และเจ้าหน้าที่เทคโนโลยีสารสนเทศด้านความปลอดภัยไซเบอร์ (Corporate Security IT Operator) มีหน้าที่ในการออกแบบและพัฒนาโครงสร้างพื้นฐานด้านข้อมูล รวมทั้งดูแลและบริหารจัดการข้อมูลให้อยู่ในสภาพที่พร้อมใช้งานอย่างต่อเนื่องและปลอดภัย

    นอกจากกรอบเรื่องของคนแล้วก็ยังมีกรอบเรื่องระยะเวลาด้วย

    ภาพที่ 2 กรอบระยะการดำเนินการ 3 ระยะ

    ระยะสั้น :  การพัฒนาแพลตฟอร์ม (Platform) เสริมสร้างทักษะที่เรียกว่า Sandbox สำหรับการพัฒนาบุคลากรในระยะสั้น เริ่มตั้งแต่การกำหนดโจทย์การพัฒนาโครงสร้าง และระบบข้อมูล การวิเคราะห์และประมวลผลข้อมูล การแสดงผลข้อมูลเชิงประจักษ์ ตลอดไปจนถึงการนำสารสนเทศและองค์ความรู้ที่ได้จากการวิเคราะห์และประมวลผลมาใช้ ประกอบการตัดสินใจและการดำเนินงานในรูปแบบต่างๆแพลตฟอร์มดังกล่าวเน้นการพัฒนา บุคลากรผ่านหลักสูตรที่นำรูปแบบการพัฒนาแบบการเรียนแบบใช้โครงงานเป็นฐาน (Project Based Learning) มาปรับใช้เพื่อให้ผู้เข้ารับการฝึกอบรมสามารถ “ทำได้ ทำเป็น” มากกว่า เรียนรู้จากทฤษฎีโดยการดำเนินงานร่วมกับหลักสูตรนักบริหารภาครัฐเพื่อการบูรณาการ การพัฒนาประเทศไทย ตามกรอบการปฏิรูปประเทศ ยุทธศาสตร์ชาติและการสร้าง ความสามัคคีปรองดอง (ป.ย.ป.) โดยมีหน่วยงานหลักที่เกี่ยวข้อง ได้แก่ กระทรวงดิจิทัล เพื่อเศรษฐกิจและสังคม (ดศ.)สำนักงานคณะกรรมการดิจิทัลเพื่อเศรษฐกิจและสังคมแห่งชาติ (สดช.) สำนักงานคณะกรรมการข้าราชการพลเรือน (สกพ.) สำนักงานพัฒนารัฐบาลดิจิทัล (องค์กรมหาชน) (สพร.)และสถาบันสถาบันส่งเสริมการวิเคราะห์และบริหารข้อมูลขนาดใหญ่ ภาครัฐ (GBDi) 

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

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

      2) กลุ่มหน่วยงานที่อยู่ระหว่างการพัฒนามีบุคลากรที่มีความเข้าใจและสามารถให้ข้อมูลความต้องการได้ชัดเจน       ระดับหนึ่ง ต้องการการสนับสนุนเชิงเทคนิคในการสร้างและพัฒนาระบบและการวิเคราะห์ ประมวลและแสดงผลข้อมูล

      3) กลุ่มหน่วยงานที่ขาดแคลนบุคลากรด้านข้อมูล แต่มีความจำเป็นต้องนำข้อมูลมาใช้ประโยชน์เพื่อการตัดสินใจ การกำหนดนโยบาย หรือการบริหารจัดการต่าง ๆ
    • นำบุคลากรที่มีทักษะและความเชี่ยวชาญเฉพาะทางจากหน่วยงานต่าง ๆ       มารวมไว้ภายในหน่วยงานเดียว เช่นพัฒนารูปแบบการทำงานในลักษณะเป็น “ทีมที่ปรึกษา” (Agile Team) เพื่อให้บริการหน่วยงานภาครัฐโดยอาจนำที่ปรึกษาภายนอกหรือหน่วยงานเอกชนมาร่วมดำเนินงานในรูปแบบต่าง ๆ หรือให้มีการพัฒนารูปแบบการจ้างงานใหม่นอกเหนือจาก “ข้าราชการ/พนักงานราชการ” เพื่อดึงดูด/จูงใจ และอาจมีการเพิ่ม “สายงานเฉพาะทาง” สำหรับผู้ปฏิบัติงานที่ต้องใช้องค์ความรู้เกี่ยวกับการวิเคราะห์ข้อมูล มีการดูแลความก้าวหน้าในอาชีพ มีการสร้างโอกาสการพัฒนาที่ต่อเนื่อง มีการให้ค่าตอบแทนที่เหมาะสม มีการปรับกรอบอัตรากำลังให้สอดคล้องกับลักษณะงานที่มีความซับซ้อนและความต้องการบุคลากรที่มีสมรรถนะสูงและมีความเป็นมืออาชีพ ทั้งนี้อาจมีการนำ       วุฒิบัตรหรือประกาศนียบัตรรับรองมาตรฐานหรือสมรรถนะด้านการวิเคราะห์ข้อมูลมาใช้ในการบริหารจัดการกำลังคนด้วย
    • พัฒนาขีดความสามารถของผู้ใช้ข้อมูลกลุ่มต่างๆได้แก่ผู้บริหารระดับสูงผู้อำนวยการกอง ผู้ทำงานด้านนโยบายและวิชาการ และผู้ทำงานด้านบริการให้สามารถกำหนดโจทย์หรือประเด็นที่ต้องการวิเคราะห์ข้อมูลและนำสารสนเทศที่เป็นผลจากการวิเคราะห์และนำเสนอข้อมูลมาใช้ประกอบการดำเนินงานได้อย่างเหมาะสม รวมทั้งยกระดับศักยภาพผู้ปฏิบัติงานด้านเทคโนโลยีสารสนเทศของหน่วยงาน โดยอย่างน้อยให้มีความสามารถในการกำกับควบคุมงานจ้างที่ปรึกษา (Project Management) และในการบริหารจัดการข้อมูลอย่างปลอดภัยและมีธรรมาภิบาล (Data Governance) 
    • นำกลไกการให้ทุนรัฐบาลมาใช้สนับสนุนการสร้างและพัฒนากำลังคนด้านการวิเคราะห์และใช้ประโยชน์ข้อมูลขนาดใหญ่ทั้งในระยะสั้นและระยะยาว
    • วางระบบการบริหารองค์ความรู้และเก็บรวบรวมข้อมูลการดำเนินงานเพื่อสร้างความต่อเนื่องในการดำเนินงาน

    ระยะยาว : การต่อยอดขยายผลโดยมีเป้าหมายเพื่อให้เกิดการแบ่งปันและสร้าง ประโยชน์ในทรัพยากรข้อมูลของทุกภาคส่วน เพื่อการพัฒนาต่อยอดการสร้างมูลค่าเพิ่ม ให้กับระบบเศรษฐกิจ สร้างความมั่นคงให้กับสังคม และสร้างการพัฒนาที่ยั่งยืน โดยเน้นส่งเสริมสนับสนุนการพัฒนาพันธมิตรธุรกิจระหว่างภาครัฐและเอกชน ทั้งภายในและ ระหว่างประเทศภายใต้เจตจำนงค์ร่วมกัน โดยร่วมสร้าง Open Government DataPlatform for Business and Citizen ให้ความรู้และสร้างภูมิคุ้มกันเพื่อให้ประชาชนมีความเข้าใจ ที่ถูกต้องเกี่ยวกับการดูแลความปลอดภัยของข้อมูลส่วนบุคคล และการนำข้อมูลเปิดภาครัฐ มาใช้เพื่อพัฒนาต่อยอดและสร้างมูลค่าเพิ่ม

    ภาพที่ 3 ขั้นตอนการทำโครงการบิ๊กดาต้า

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

    ทั้งหมดนี้เป็นแนวทางโดยภาพรวมที่องค์กรพึ่งดำเนินการถ้าต้องการพัฒนาเป็นองค์กรที่ใช้ข้อมูลเพื่อการดำเนินงาน Data Driven Organization และต้องการมี Big Data เพื่อการพยากรณ์ความเป็นไปได้ในอนาคตและเพิ่มทางเลือกที่อาจจะซ่อนอยู่ในข้อมูลที่มีแต่ยังมองไม่เห็น ขอบคุณครับ

  • การนับจำนวนข้อมูลโดยใช้ Pivot Table

    ตามปกติหากเราต้องการนับจำนวนข้อมูลที่ซ้ำๆ กัน ว่ามีจำนวนเท่าไหร่ใน Excel หลาย ๆคนคงใช้ฟังก์ชัน COUNTIF ในการนับจำนวนกัน แต่วันนี้มีอีกวิธีที่จะมานำเสนอนั้นคือการใช้ Pivot Table ในการนับจำนวน ซึ่งใช้งานง่ายและไม่ได้ยุ่งยากอย่างที่คิดค่ะ ลองมาดูวิธีกันเลยนะคะ

    1. ใน excel ที่เรามีข้อมูลซ้ำ ๆ กันหน้าตาแบบนี้

    2. ไปที่เมนู Insert เลือก Pivot Table

    3. ปรากฏหน้าจอ Create PivotTable เพื่อให้เลือกกลุ่มของข้อมูลที่ต้องการนับจำนวน ให้เลือกคอลัมน์ที่ต้องการนับจำนวน  แล้วกดปุ่ม OK  ดังรูป

    4. ปรากฏหน้าจอการทำงานของ Pivot Table ให้เลือกลากข้อมูลชื่อ-สกุล มาไว้ในช่อง  Rows และ Values สังเกตุว่าในช่อง Values ใน Excel จะใช้ฟังก์ชัน Count ให้เราโดยอัตโนมัติ ดังรูป

    5. แสดงข้อมูลผลลัพธ์ของการนับจำนวนโดยใช้ Pivot Table ดังรูป

             

    เป็นไงบ้างคะ ยังไงก็ลองดูเอาไว้เป็นทางเลือกนะคะ เพราะบางคนอาจจะไม่ถนัดในการใช้สูตร คิดว่าวิธีนี้ก็น่าจะเป็นอีกวิธีที่น่าสนในค่ะ ^^