Đỉnh NGUYỄN

life's a journey not a destination

Một số thủ thuật ASP.NET GridView UI dùng jQuery

1 Comment


Download Demo Project

ASP.NET GridView UI đơn giản dùng jQuery đã được kiểm tra trên IE8 & FireFox 3

Giả định, bạn đã biết jQuery, nếu chưa biết, hãy đọc Using jQuery with ASP.NET – A Beginner’s Guide , download Query 1.3

Dùng csdl Northwind làm datasource load lên GridView

<form id="form1" runat="server">
<div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City] FROM [Customers]">
    </asp:SqlDataSource>   
    <br />          
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
        DataSourceID="SqlDataSource1" AllowPaging="False" AllowSorting="True" >
        <Columns>                          
            <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
            <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
            <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
            <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
        </Columns>
    </asp:GridView>
</div>
</form>

 

Thành phần <connectionStrings> trong web.config trông như sau:

<connectionStrings>
      <add name="NorthwindConnectionString" connectionString="Data Source=(local);Initial Catalog=Northwind;Integrated Security=True" providerName="System.Data.SqlClient"/>
</connectionStrings>

1. Làm sáng lên từng dòng trong ASP.NET GridView bằng cách click lên nó

<head id="Head1" runat="server">
<title>Highlight Row on Click</title>
 
<script src="Scripts/jquery-1.3.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
    $(document).ready(function() {
        $("tr").filter(function() {
            return $('td', this).length && !$('table', this).length
        }).click(function() {
            $(this).toggleClass('currRow');
        });
    });
</script>
 
<style type="text/css">
    .currRow
    {
        background-color:Gray;
        cursor:pointer;
    }   
</style>
 
</head>

Ngăn chặn người dùng làm sáng 2 dòng Header và Footer, dùng toggleClass để làm sáng và hủy bỏ trên dòng.

2. Remove/Hide dòng được làm sáng của ASP.NET GridView. Thêm 1 HTML Button Control (Button1)

<input id="Button1" type="button" value="Remove Rows" />
The jQuery is as shown below:
<head id="Head1" runat="server">
    <title>Hide Highlighted Rows>/title>
 
    <script src="Scripts/jquery-1.3.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(document).ready(function() {
            $("tr").filter(function() {
                return $('td', this).length && !$('table', this).length
            }).click(function() {
                $(this).toggleClass('currRow');
            });
 
 
            $("#Button1").click(function() {               
                var hideRows = $("tr").hasClass("currRow");
                if (hideRows == true) {                   
                    $("tr.currRow").remove();
                }
            });
        });
       
    </script>
   
   
    <style type="text/css">
        .currRow
        {
            background-color:Gray;
            cursor:pointer;
        }   
    </style>
   
</head>

3. Remove/Hide ASP.NET GridView Rows bằng cách Click chuột lên nó

<script type="text/javascript">
        $(document).ready(function() {
                $("tr").filter(function() {
                    return $('td', this).length && !$('table', this).length
                }).click(function() {
                    $(this).remove();
                });
        });       
</script>
4. Hightlight ASP.NET GridView Row khi Mouse Hover
<head id="Head1" runat="server">
    <title>Highlight Row on Hover</title>
 
    <script src="Scripts/jquery-1.3.min.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(document).ready(function() {
            $("tr").filter(function() {
                return $('td', this).length && !$('table', this).length
            }).css({ background: "ffffff" }).hover(
                function() { $(this).css({ background: "#C1DAD7" }); },
                function() { $(this).css({ background: "#ffffff" }); }
                );
        });
    </script>
   
</head>

5. Drag và Drop Rows trong ASP.NET GridView

Dùng Table Drag and Drop Plugin, jQuery sẽ gọi thư viện Drag and Drop

<head runat="server">
    <title>Drag Drop Rows</title>
 
    <script src="Scripts/jquery-1.3.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tablednd_0_5.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        $(document).ready(function() {
            $("#GridView1").tableDnD();
        });
</script>
 
</head>

Advertisements

Author: dinhnn

Senior software developer, a technical leader. You can be reached at via email to dinhnguyenngoc@gmail.com, via my blog at dinhnguyenngoc.wordpress.com, and on Twitter @dinhnguyenngoc.

One thought on “Một số thủ thuật ASP.NET GridView UI dùng jQuery

  1. Pingback: Fix Jquery-1.3.min.js Errors - Windows XP, Vista, 7 & 8

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s