ASP.NET - Làm nổi bật (Hightlight) dòng trong GridView
Một vấn đề chúng ta hay gặp trong thiết kế nội dung trang web là làm sao có thể hiển thị nội dung và làm nổi bật dòng của bảng dữ liệu sử dụng điều khiển GridView trên trang web ASP.NET. Bài viết này sẽ hướng dẫn bạn thực hiện điều này Trong bài viết này chúng ta sẽ sử ...
Một vấn đề chúng ta hay gặp trong thiết kế nội dung trang web là làm sao có thể hiển thị nội dung và làm nổi bật dòng của bảng dữ liệu sử dụng điều khiển GridView trên trang web ASP.NET. Bài viết này sẽ hướng dẫn bạn thực hiện điều này
Trong bài viết này chúng ta sẽ sử dụng 1 GridView trên trang ASPX. Khi di chuyển con trỏ chuột qua mỗi dòng của GridView thì màu nền của dòng đó sẽ được thay đổi, và chúng ta có thể ứng dụng để làm nổi bật dòng đó.
Thực hiện
Trong bài viết này chúng ta sẽ làm việc với sử kiện OnRowDataBound của GridView và các sự kiện onmouseout và onmouseout của JavaScript. Để lấy làm ví dụ tôi sử dụng dữ liệu của bảng TB_TacGia trong Database QuanLyThuVien và truy xuất dữ liệu qua một DataSource như sau:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" style="border: 1px solid #DDDDDD;" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyNames="MaTacGia" DataSourceID="SqlDataSource1" onrowdatabound="GridView1_RowDataBound"> <RowStyle ForeColor="#000066" /> <Columns> <asp:BoundField HeaderText="MaTacGia" DataField="MaTacGia" ReadOnly="True" SortExpression="MaTacGia" /> <asp:BoundField HeaderText="TenTacGia" DataField="TenTacGia" SortExpression="TenTacGia" /> <asp:BoundField HeaderText="OrderID" DataField="OrderID" SortExpression="OrderID"> </asp:BoundField> </Columns> <FooterStyle BackColor="White" ForeColor="#000066" /> <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QuanLyThuVienConnectionString2 %>" SelectCommand="SELECT [MaTacGia], [TenTacGia], [OrderID] FROM [TB_TacGia] order by OrderID"> </asp:SqlDataSource>
Trong code bạn thực hiện hàm RowDataBound như sau:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { try { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("style", "background-color: #FFFFFF; color: black;"); e.Row.Attributes.Add("onmouseover", "style.backgroundColor='#FF6600'"); e.Row.Attributes.Add("onmouseout", "style.backgroundColor='#FFFFFF'"); } } catch { } }
Trong hàm trên bạn thấy là với mỗi dòng thuộc gridview khi bạn di chuột vào nó sẽ nhận sự kiên onmouseover và thiết lập thuộc tính backgroundColor =#FF6600 (Bạn có thể thay màu khác cho hợp với grid của bạn). Khi bạn rời con chuột khỏi dòng đó nó lại nhận sự kiện onmouseout bằng cách dùng Attributes.Add với backgroundColor='#FFFFFF'.
Chúc bạn thành công.
Nguồn: thietkewebsmart.com
