Category: การพัฒนา ASP.NET Web Application

เช่นเคยครับ จากบล็อก ขยับแถว (row) ขึ้น/ลง ใน ASP.NET Gridview ด้วย jQuery เป็นการเพิ่มฟีเจอร์ให้กับ ASP.NET Gridview ด้วยการประยุกต์ใช้ jQuery บทความต่อมา ก็จะเป็นการเพิ่มฟีเจอร์เดียวกัน แต่จะเป็นการพัฒนาด้วยโค้ดฝั่ง code behind

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

1. ในส่วนของโค้ด HTML จะมีการปรับปรุงเพิ่มเล็กน้อยเฉพาะในส่วนของปุ่ม UP/DOWN ซึ่งเราจะเปลี่ยนไปใช้ปุ่มที่เป็นคอนโทรลของ ASP.NET เพื่อให้สามารถเขียนโปรแกรมควบคุมจากฝั่ง code behind ได้

<asp:GridView ID="gvBib" runat="server" AutoGenerateColumns="False" OnRowCommand="gvBib_RowCommand" >
    <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:Button ID="btnUp" runat="server" Text="UP" CommandName="up" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"></asp:Button>
                <asp:Button ID="btnDown" runat="server" Text="DOWN" CommandName="down" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"></asp:Button>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

โดย

• CommndName ใช้สำหรับตรวจสอบว่าเป็นการเลือก up หรือ down
• CommandArgument ใช้สำหรับระบุแถวที่คลิกเลือก

2. ในส่วนของโค้ดที่ใช้สร้างข้อมูลเพื่อแสดงใน Gridview เราจะเพิ่มฟิลด์ขึ้นมาอีก 1 ฟิลด์ เพื่อใช้กำหนดลำดับการแสดงผล จากตัวอย่างโค้ด ก็คือฟิลด์ SEQ

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

//เก็บข้อมูล
ViewState["dtBook"] = dt;

3. เพิ่มโค้ดในส่วนของ gvBib_RowCommand ซึ่งเป็น event ที่จะเกิดเมื่อมีการคลิกปุ่ม UP หรือ DOWN

protected void gvBib_RowCommand(object sender, GridViewCommandEventArgs e)
{
	DataTable dt = (DataTable)ViewState["dtBook"];

        //เก็บแถวที่คลิกเลือก
	int curIdx = Convert.ToInt32(e.CommandArgument);

	if(e.CommandName == "up")   //ถ้ากดปุ่ม UP
	{
		//กำหนดลำดับใหม่ให้กับแถวก่อนหน้ากับแถวปัจจุบันให้สลับกัน
		dt.Rows[curIdx - 1]["SEQ"] = curIdx;
		dt.Rows[curIdx]["SEQ"] = curIdx - 1;
	}
	else if (e.CommandName == "down")   //ถ้ากดปุ่ม DOWN
	{
		//กำหนดลำดับใหม่ให้กับแถวถัดไปกับแถวปัจจุบันให้สลับกัน
		dt.Rows[curIdx + 1]["SEQ"] = curIdx;
		dt.Rows[curIdx]["SEQ"] = curIdx + 1;
	}
	dt.AcceptChanges();

	//กำหนดให้ข้อมูลเรียงตามฟิลด์ SEQ
	dt.DefaultView.Sort = "SEQ";

	//เซ็ตข้อมูลที่มีการเรียงลำกับแล้วกลับไปให้ DataTable
	dt = dt.DefaultView.ToTable();

	//กำหนดข้อมูลที่เรียงลำดับใหม่แล้วให้กับ Gridview และแสดผล
	gvBib.DataSource = dt;
	gvBib.DataBind();

	//เก็บข้อมูลกลับเข้า ViewState
	ViewState["dtBook"] = dt;
}

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

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

//เก็บแถวที่คลิกเลือก
int curIdx = Convert.ToInt32(e.CommandArgument);

if(e.CommandName == "up")   //ถ้ากดปุ่ม UP
{
    //ตรวจสอบว่าไม่ใช่แถวแรกหรือไม่
    if (curIdx != 0)
    {
        //กำหนดลำดับใหม่ให้กับแถวก่อนหน้ากับแถวปัจจุบันให้สลับกัน
        dt.Rows[curIdx - 1]["SEQ"] = curIdx;
        dt.Rows[curIdx]["SEQ"] = curIdx - 1;
    }
}
else if (e.CommandName == "down")   //ถ้ากดปุ่ม DOWN
{
    //ตรวจสอบว่าไม่ใช่แถวสุดท้ายหรือไม่
    if (curIdx != dt.Rows.Count - 1)
    {
        //กำหนดลำดับใหม่ให้กับแถวถัดไปกับแถวปัจจุบันให้สลับกัน
        dt.Rows[curIdx + 1]["SEQ"] = curIdx;
        dt.Rows[curIdx]["SEQ"] = curIdx + 1;
    }
}

โดยเราจะต้องตรวจสอบเพิ่มเติมก่อนว่า เมื่อคลิกปุ่ม UP จะต้องไม่ใช่แถวแรก และคลิกปุ่ม DOWN จะต้องไม่ใช่แถวสุดท้าย เมื่อทดสอบรันอีกครั้ง ก็พบว่าสามารถทำงานได้ปกติ เมื่อคลิกปุ่ม UP ที่แถวแรก หรือปุ่ม DOWN ที่แถวสุดท้าย ก็จะไม่เกิด Error

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

จนกว่าจะพบกันใหม่ สวัสดีครับ

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

• https://stackoverflow.com/questions/44976025/move-rows-up-and-down-in-asp-net-gridview
• https://www.aspdotnet-suresh.com/2012/06/move-aspnet-gridview-rows-up-and-down.html
• https://stackoverflow.com/questions/7994371/how-to-move-the-rows-in-the-gridview-up-and-down
• https://stackoverflow.com/questions/11986507/move-asp-net-gridview-rows-up-and-down-with-button-click-with-sorting-enabled

บางครั้งการแสดงผลข้อมูลใน 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
$(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

จากบทความ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วย jQuery ท่านผู้อ่านที่ได้เข้าไปอ่านแล้วอาจจะมีคำถามว่าถ้าไม่อยากใช้ jQuery ล่ะ เนื่องด้วยสาเหตุอะไรก็แล้วแต่ วันนี้ผมก็จะมานำเสนอการซ่อน/แสดงคอลัมน์ใน ASP.NET GridView อีกวิธี ซึ่งจะเป็นการควบคุมจาก code behind ที่เป็นภาษา C# หรือ VB.NET ในที่นี่ผู้เขียนจะใช้ภาษา C#

ซึ่งจะมีขั้นตอนต่างๆ ดังต่อไปนี้

1. ตัวอย่างโค้ด HTML จะมีการแก้ไขเพิ่มขึ้นอีกเล็กน้อยจากบทความเดิม

<asp:CheckBox ID="chkCallNo" Text=" Show CallNo from code behind" runat="server" Checked="true"
              AutoPostBack="true" OnCheckedChanged="chkCallNo_CheckedChanged" />
<hr />

<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" />
    </Columns>
</asp:GridView>

โดยสิ่งที่เพิ่มขึ้นมาจะอยู่ที่ CheckBox คือ

• AutoPostBack=”true” เพื่อให้มีการ PostBack ทุกครั้งที่มีการคลิก Checkbox
• OnCheckedChanged=”chkCallNo_CheckedChanged” คือ event ที่อยู่ใน code behind ที่จะถูกเรียกใช้เมื่อมีการคลิก

2. โค้ดในส่วนของการจำลองข้อมูล สามารถใช้โค้ดเดิมจากบทความเก่าได้เลย

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(1, "1 ทศวรรษ ดัชนีสุขภาพคนไทย", "สำนักงานคณะกรรมการสุขภาพแห่งชาติ (สช.)", "WA13 ห159 2556", "");
    dt.Rows.Add(2, "ความลับในร่างกายมนุษย์ที่เราไม่เคยรู้", "ฟรานซิส, เกวิน", "QS4 ฟ133a 2560", "9786168022887");
    dt.Rows.Add(3, "The best ICU", "ดุสิต สถาวร", "WX218 B561 2560", "9786168122020");
    dt.Rows.Add(4, "COVID-19 โรคระบาดแห่งศตวรรษ", "นำชัย ชีววิวรรธน์", "QW168.5.C8 น515c 2563", "9789740217060");
    dt.Rows.Add(5, "Good health & smart life ในวัย 40+", "ไวต์, จอห์น", "WT104 ว967g 2560", "9786160827237");
    gvBib.DataSource = dt;
    gvBib.DataBind();
}

3. เพิ่มโค้ดใน chkCallNo_CheckedChanged เพื่อควบคุมการซ่อน/แสดงคอลัมน์ที่ต้องการ

protected void chkCallNo_CheckedChanged(object sender, EventArgs e)
{
    gvBib.Columns[3].Visible = chkCallNo.Checked;
}

โดย gvBib.Columns[3].Visible จะเป็นการกำหนดให้คอลัมน์ที่ 3 ของ Gridview แสดงผลหรือไม่ ซึ่งก็คือคอลัมน์ CallNo นั่นเอง (จะเริ่มนับตั้งแต่ 0)

4. ทดสอบการใช้งาน

5. จะเห็นว่าระบบสามารถทำงานได้ตามความต้องการ คอลัมน์จะซ่อน/แสดงได้ตามเงื่อนไขที่เราเลือกจาก checkbox แต่จะสังเกตเห็นว่า ทุกครั้งที่มีการเลือก checkbox ระบบจะ refresh หน้าจอใหม่ทุกครั้ง ซึ่งถ้าในหน้าจอที่เรากำลังทำงานมีข้อมูลอื่นๆ อีกหลายอย่าง ก็จะถูกโหลดซ้ำโดยไม่จำเป็น เพื่อแก้ไขปัญหานี้ ASP.NET จะมีเครื่องมือที่เรียกว่า UpdatePanel ซึ่งจะทำงานในแบบ Partial Load ได้ตามตามเงื่อนไขที่เรากำหนด โดยเราจะต้องปรับแก้โค้ด HTML เพิ่มเติมดังนี้

<asp:ScriptManager runat="server"></asp:ScriptManager>

<asp:CheckBox ID="chkCallNo" Text=" Show CallNo from code behind" runat="server" AutoPostBack="true" Checked="true" OnCheckedChanged="chkCallNo_CheckedChanged" />
<hr />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <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" />
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="chkCallNo" EventName="CheckedChanged" />
    </Triggers>
</asp:UpdatePanel>

สิ่งที่เพิ่มเติมเข้ามาคือ

• ScriptManager สำหรับใช้ควบคุมการทำงาน UpdatePanel
• UpdatePanel ใช้ครอบ component หรือพื้นที่ที่เราต้องให้สามารถทำ Partial Load ได้ ในที่นี่คือเราครอบ Gridview นั่นเอง
• Triggers จะเป็นการกำหนดเพื่อให้เกิด Partial Load ตาม control และ event ที่ได้ระบุเอาไว้ ในที่นี้คือ จะโหลดเมื่อ chkCallNo เกิด event CheckdChanged ซึ่งก็คือเหตุการณ์คลิกนั่นเอง

ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง

จะเห็นว่าหลังจากมีการปรับแก้โค้ดไปแล้ว ทุกครั้งที่มีการคลิก CheckBox และมีการซ่อน/แสดงคอลัมน์ จะไม่มีการ refresh หน้าจออีกแล้ว เพราะ UpdatePanel ที่เราได้เพิ่มเข้าไปจะควบคุมให้มีการโหลดข้อมูลใหม่เฉพาะ component ที่อยู่ภายใน UpdatePanel เท่านั้น

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

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

• https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx
• http://theheing.blogspot.com/2012/04/ajax-updatepanel-control.html

การแสดงผลข้อมูลใน Gridviews ในบางสถานการณ์เราต้องการซ่อนข้อมูลบางคอลัมน์ออกไปก่อนตามเงื่อนไขใดๆ และเมื่อเงื่อนไขเปลี่ยนเราก็จะแสดงข้อมูลในคอลัมน์ที่ถูกซ่อนนั้นออกมา

ในบทความนี้ผู้เขียนจะแสดงตัวอย่างการ ซ่อน/แสดง คอลัมน์ใน ASP.NET GridView ด้วยชุดคำสั่ง jQuery โดยมีขั้นตอนดังต่อไปนี้

1. เพิ่มโค้ด HTML ดังตัวอย่างด้างล่าง ซึ่งเป็นโค้ดที่แสดง Checkbox เพื่อใช้เลือกแสดงคอลัมน์ CallNo และ ASP.NET GridView ที่มีข้อมูล 5 คอลัมน์

<asp:CheckBox ID="chkCallNo" Text=" Show CallNo" runat="server" Checked="true" />

<hr />
<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" />
	</Columns>
</asp:GridView>

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(1, "1 ทศวรรษ ดัชนีสุขภาพคนไทย", "สำนักงานคณะกรรมการสุขภาพแห่งชาติ (สช.)", "WA13 ห159 2556", "");
        dt.Rows.Add(2, "ความลับในร่างกายมนุษย์ที่เราไม่เคยรู้", "ฟรานซิส, เกวิน", "QS4 ฟ133a 2560", "9786168022887");
        dt.Rows.Add(3, "The best ICU", "ดุสิต สถาวร", "WX218 B561 2560", "9786168122020");
        dt.Rows.Add(4, "COVID-19 โรคระบาดแห่งศตวรรษ", "นำชัย ชีววิวรรธน์", "QW168.5.C8 น515c 2563", "9789740217060");
        dt.Rows.Add(5, "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 เพื่อควบคุมการแสดง/ซ่อน คอลัมน์ เมื่อมีการคลิก เลือก/ยกเลิก เช็คบ๊อก (โดยในบทความนี้ผู้เขียนขออนุญาตข้ามขั้นตอนการติดตั้ง jQuery ออกไป)

$(function () {

    //bind event click ให้กับ checkbox
    $("[id*=chkCallNo]").click(function () {
		
	//เก็บสถานะของ checkbox ว่าเลือกอยู่หรือไม่
        var isChecked = $(this).is(":checked");
		
	//เก็บ element ของหัวคอลัมน์ CallNo
        var th = $("[id*=gvBib] th:contains('CallNo')");
	
        //ถ้า checkbox ถูกเลือก จะแสดงคอลัมน์ CallNo และถ้าไม่ ก็จะซ่อนคอลัมน์
        th.css("display", isChecked ? "" : "none");
	
        //วนลูปเรคอร์ดที่เหลือทั้งหมด
        $("[id*=gvBib] tr").each(function () {
	    
            //ใช้ลำดับของหัวคอลัมน์ CallNo (th.index) มาหาคอลัมน์ CallNo ที่อยู่ record ข้อมูล 
            //และกำหนดให้ซ่อนหรือแสดงตามการเลือก checkbox
            $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
        });
    });

});

ทดสอบ run ก็จะได้ผลลัพธ์ดังรูปด้านล่าง

และเมื่อคลิกเช็คบ๊อก Show CallNo ออก คอลัมน์ CallNo ใน Gridview ก็จะหายไป

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

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

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

• https://www.aspsnippets.com/Articles/Show-Hide-ASPNet-GridView-Columns-on-CheckBox-Checked-Unchecked-using-jQuery.aspx