ฟังก์ชั่นการกรอง Gridview ในตัว?

.NET มีฟังก์ชันในตัวบางประเภทที่อนุญาตให้กรอง Gridviews หรือไม่ ฉันมักจะตั้งโปรแกรมตัวกรองโดยใช้แหล่งข้อมูลที่สร้างโดยขั้นตอนการจัดเก็บแบบไดนามิกที่รับพารามิเตอร์ แต่เพื่อให้แถวตัวกรองปรากฏอยู่เสมอ ฉันต้องวางโค้ดเพื่อสร้างตัวควบคุมที่ใช้ในการกรองในสามตำแหน่งที่แตกต่างกันเมื่ออนุญาตให้เพจจิ้ง (Page_load,Gridview_Databound,Page_SaveStateComplete) ดูเหมือนว่าจะต้องมีวิธีที่ดีกว่านี้ . ถ้าเป็นเช่นนั้นอย่างไร?


person Eric    schedule 09.07.2009    source แหล่งที่มา


คำตอบ (1)


เฉพาะในกรณีที่คุณทำงาน เช็คเอาท์

http://blog.evonet.com.au/post/Creating-a-Stylish-looking-Gridview-with-Filtering.aspx


ตามที่ระบุไว้ในความคิดเห็น ไซต์นี้ไม่สามารถใช้งานได้อีกต่อไป ข้อมูลต่อไปนี้นำมาจากรายการบล็อกของ Bartek Marnane โดยตรง ซึ่งคุณสามารถพบได้ที่ web.archive.com :

ขั้นตอนที่ 1: สร้าง Gridview และแหล่งข้อมูล

สร้าง Gridview และ Datasouce อย่างง่าย ในตัวอย่างนี้ ฉันกำลังใช้แหล่งข้อมูล SQL แต่ฉันแนะนำให้ใช้ ObjectDataSource สำหรับสภาพแวดล้อมการใช้งานจริง ตั้งค่า ConnectionString เป็นค่าในไฟล์ web.config และ ItemStyle-Width สำหรับแต่ละฟิลด์ของคุณ ขึ้นอยู่กับประเภทของข้อมูลและจำนวนเนื้อที่ที่คุณมีอยู่

<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False" AllowPaging="True"
AllowSorting="true" DataSourceID="dsGridview" Width="650px" PageSize="20"
CssClass="Gridview">
<Columns>
    <asp:BoundField DataField="id" HeaderText="id" SortExpression="id"
        ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Center" />
    <asp:BoundField DataField="FirstName" HeaderText="Sort" SortExpression="FirstName"
        ItemStyle-Width="150px" />
    <asp:BoundField DataField="LastName" HeaderText="Sort" SortExpression="LastName"
        ItemStyle-Width="150px" />
    <asp:BoundField DataField="Department" HeaderText="Sort" SortExpression="Department"
        ItemStyle-Width="150px" />
    <asp:BoundField DataField="Location" HeaderText="Sort" SortExpression="Location"
        ItemStyle-Width="150px" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>"
SelectCommand="SELECT * FROM [T_Employees]" />

ขั้นตอนที่ 2: สร้างตารางที่ใช้สำหรับส่วนหัว Gridview

ตอนนี้เราสร้างตารางง่ายๆ เพื่อเก็บส่วนหัวและกล่องดรอปดาวน์ตัวกรอง

<table style="width: 650px" border="0" cellpadding="0" cellspacing="1"
class="GridviewTable">
<tr>
    <td style="width: 50px;">
        ID
    </td>
    <td style="width: 150px;">
        First Name
    </td>
    <td style="width: 150px;">
        Last Name
    </td>
    <td style="width: 150px;">
        Department
    </td>
    <td style="width: 150px;">
        Location
    </td>
</tr>
<tr>
    <td style="width: 50px;">
    </td>
    <td style="width: 150px;">
    </td>
    <td style="width: 150px;">
    </td>
    <td style="width: 150px;">
        <asp:DropDownList ID="ddldepartment" DataSourceID="dsPopulateDepartment"
            AutoPostBack="true" DataValueField="department" runat="server" Width="130px"
            Font-Size="11px" AppendDataBoundItems="true">
            <asp:ListItem Text="All" Value="%"></asp:ListItem>
        </asp:DropDownList>
    </td>
    <td style="width: 150px;">
        <asp:DropDownList ID="ddlLocation" DataSourceID="dsPopulateLocation"
            AutoPostBack="true" DataValueField="location" runat="server" Width="130px"
            Font-Size="11px" AppendDataBoundItems="true">
            <asp:ListItem Text="All" Value="%"></asp:ListItem>
        </asp:DropDownList>
    </td>
</tr>
<tr>
    <td colspan="5">
        <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False"
            AllowPaging="True" AllowSorting="true" DataSourceID="dsGridview"
            Width="650px" PageSize="10" CssClass="Gridview">
            <Columns>
                <asp:BoundField DataField="id" HeaderText="Sort" SortExpression="id"
                    ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Center" />
                <asp:BoundField DataField="FirstName" HeaderText="Sort"
                    SortExpression="FirstName" ItemStyle-Width="150px" />
                <asp:BoundField DataField="LastName" HeaderText="Sort"
                    SortExpression="LastName" ItemStyle-Width="150px" />
                <asp:BoundField DataField="Department" HeaderText="Sort"
                    SortExpression="Department" ItemStyle-Width="150px" />
                <asp:BoundField DataField="Location" HeaderText="Sort"
                    SortExpression="Location" ItemStyle-Width="150px" />
            </Columns>
        </asp:GridView>
    </td>
</tr>
</table>

สำหรับเซลล์สุดท้าย ให้ตั้งค่า td colspan เป็นจำนวนฟิลด์ใน Gridview ของคุณ ย้าย Gridview ของคุณไปที่เซลล์สุดท้าย

ขั้นตอนที่ 3: สร้างสไตล์ชีต

สไตล์ชีตที่ฉันใช้มีรายการต่อไปนี้:

.GridviewDiv {font-size: 62.5%; font-family: 'Lucida Grande',
    'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
Table.Gridview{border:solid 1px #df5015;}
.GridviewTable{border:none}
.GridviewTable td{margin-top:0;padding: 0; vertical-align:middle }
.GridviewTable tr{color: White; background-color: #df5015; height: 30px; text-align:center}
.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;
    padding:0.5em 0.5em 0.5em 0.5em;text-align:center}
.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;
    padding:0.5em 0.5em 0.5em 0.5em;}
.Gridview tr{color: Black; background-color: White; text-align:left}
:link,:visited { color: #DF4F13; text-decoration:none }

คุณควรจะสามารถคัดลอกสิ่งนี้ลงในไฟล์ css ของคุณได้โดยไม่กระทบต่อสไตล์ชีตที่คุณออก แม้ว่าจะต้องระวังหากคุณได้ตั้งค่า :link และ :visited ในไซต์ของคุณแล้ว

ขั้นตอนที่ 4: เพิ่มกล่องแบบเลื่อนลงการกรองและแหล่งข้อมูล

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

<asp:DropDownList ID="ddldepartment" DataSourceID="dsPopulateDepartment"
AutoPostBack="true" DataValueField="department" runat="server" Width="130px" Font-Size="11px"
AppendDataBoundItems="true">
    <asp:ListItem Text="All" Value="%"></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="dsPopulateDepartment" runat="server"
ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>" SelectCommand="SELECT
DISTINCT Department from [T_Employees]"></asp:SqlDataSource>

สร้างรายการดรอปดาวน์ได้มากเท่ากับช่องที่คุณต้องการกรอง

บางสิ่งที่ควรทราบ:

ตั้งค่าคุณสมบัติ AppendDataBoundItems=True สำหรับรายการดรอปดาวน์ของคุณเนื่องจากจะถูกเติมเต็มเมื่อรันไทม์ ตั้งค่าคุณสมบัติ AutoPostBack=True เพื่อให้ Gridview ได้รับการรีเฟรชเมื่อการเปลี่ยนแปลงการเลือก ตรวจสอบให้แน่ใจว่า ListItem ของคุณสำหรับ "ทั้งหมด" มี "%" เป็นค่า นิพจน์ตัวกรองของคุณจะเป็น SELECT * FROM [TABLE NAME] โดยที่ [FieldName] เช่น '{0}%' โดยที่ {0} คือค่าในรายการแบบเลื่อนลงของคุณ หากรายการดรอปดาวน์ของคุณถูกตั้งค่าเป็นทั้งหมด สตริงการสืบค้นจะเป็น SELECT * FROM [TABLE NAME] โดยที่ [FieldName] เช่น '%%' ซึ่งใน SQL จะส่งกลับค่าทั้งหมด

ขั้นตอนที่ 5: เพิ่มการกรองลงในแหล่งข้อมูลของ Gridview

เพิ่ม FilterExpress เพื่อให้แหล่งข้อมูลของ Gridview ของคุณเช่น

[Field1] เช่น '{0}%' และ [Field2] เช่น '{1}%' และ [Field3] เช่น '{2}%' และ [Field4] เช่น '{3}%' และ … ฯลฯ

ฟิลด์ของคุณจะต้องเพิ่มลงในส่วน FilterParameters ตามลำดับเดียวกับนิพจน์ตัวกรองของคุณ ส่วน FilterParameters อ้างอิง SelectedValue ของรายการดรอปดาวน์ของคุณ

<asp:SqlDataSource ID="dsGridview" runat="server"
    ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>"
    SelectCommand="SELECT * FROM [T_Employees]" FilterExpression="Department like '{0}%'
    and Location like '{1}%'">
    <FilterParameters>
        <asp:ControlParameter Name="Department" ControlID="ddldepartment"
            PropertyName="SelectedValue" />
        <asp:ControlParameter Name="Location" ControlID="ddllocation"
            PropertyName="SelectedValue" />
    </FilterParameters>
</asp:SqlDataSource>

แค่นั้นแหละ!

person dr.    schedule 09.07.2009
comment
เย็น. ฉันชอบเว็บไซต์ ขอบคุณ! +1 - person Eric; 09.07.2009
comment
คำตอบของลิงก์นั้นใช้งานไม่ได้ - ไม่สามารถเข้าถึงไซต์นี้ / ไม่พบที่อยู่ DNS ของเซิร์ฟเวอร์ของ blog.evonet.com.au - person Pang; 13.06.2017
comment
ฉันพบรายการบล็อกบน web.archive.org และอัปเดตคำตอบของฉันโดยวางข้อความหลักจาก Bartek Marnane - person dr.; 30.08.2017