Phát triển Multi Selected GridView trong ASP.NET sử dụng JQUERY

Tên bài viết: Phát triển Multi Selected GridView trong ASP.NET sử dụng JQUERY
Tác giả: Quang IT
Cấp độ bài viết: Chưa đánh giá

Tóm Tắt: GridView là một trong những Control khá phổ biến và được sử dụng hầu như ở tất cả các ứng dụng web .NET. Việc select một hàng hay nhiều hàng(dòng) là chức năng phổ biến bên trong GridView. Hầu hết các trường hợp select theo checkbox. Nhưng nếu biết phối hợp sử dụng các control tích hợp + một chút Jquery thì nó sẽ tùy biến hơn là checkbox như hình bên dưới

Hình 1: Multi Select GridView sử dụng checkbox


 
Mult-Select lựa sử dụng JQuery

Ở đây, tôi sử dụng sức mạnh của chức năng Select JQuery để thực hiện lựa chọn Side Customer và phía máy chủ một thao tác hàng. Hy vọng điều này sẽ giúp bạn rất nhiều trong tổ chức GridView.

Từng bước thực hiện multiselect bằng cách sử dụng JQuery.
Bước 1:

Tải về và thêm tập tin Jquery vào dự án của bạn. Tải tại http://jquery.com/ Nó là hoàn toàn miễn phí

Thêm tham chiếu JQuery đến các trang web.
<script src="jquery-1.4.3.js" type="text/javascript"> </ script>
Đặt ở trong thẻ Head
Bước 2:
Thêm một HiddenField của TemplateField bên trong thẻ GridView <Column>, mà sẽ lưu trữ các chế độ select (Đây HiddenField tương tự như CheckBox kiểm tra trạng thái) .
Ở đây tôi có thêm HiddenField cùng với các cột Id.

<asp:TemplateField HeaderText="Id#" HeaderStyle-Width="50px">
    <ItemTemplate>
        <asp:Label ID="lblId" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
        <asp:HiddenField ID="hdnIsItemSelected" runat="server" />
    </ItemTemplate>
</asp:TemplateField>

Bước 3:

Thêm đoạn mã Javascript này vào:

<script type="text/javascript">
$(document).ready(function () {
$('input[id*=hdnIsItemSelected][value=true]')
             .parent().parent().addClass('RowHighlight');
});

$(function () {
$('#MultiSelectGrid tr').mouseover(function () {
$('#MultiSelectGrid tr').removeClass('RowHover');
$(this).addClass('RowHover');
});
});

$(function () {
$('#MultiSelectGrid tr td').click(function () {
if ($(this).parent()[0].className == 'RowHover') {
$(this).parent().addClass('RowHighlight');
$('input[id*=hdnIsItemSelected]')[$(this).parent()[0]
             .rowIndex - 1].value = 'true';
}
else {
$(this).parent().removeClass('RowHighlight');
$('input[id*=hdnIsItemSelected]')[$(this).parent()[0]
            .rowIndex - 1].value = 'false';
}
});
});
</script>

Bước 4:
Thêm đoạn CSS này vào bên trong thẻ Head để xử lý việc di chuột vào GridView

 .RowHighlight
{
    color: #336699;
    cursor: pointer;
    background-image: url('images/selected_item_back.png');
    background-repeat: repeat-x;
}

.RowHover
{
    color: #336699;
    cursor: pointer;
    background-image: url('images/hover_item_back.png');
    background-repeat: repeat-x;
}

Bước 5:
Bây giờ trong sự kiện click nút hoặc trong sự kiện postback, tìm kiếm mỗi trạng thái HiddenField, nếu nó là "true" thì lựa chọn khác không được chọn.

foreach (GridViewRow row in MultiSelectGrid.Rows)
{
    HiddenField selectionButton = (HiddenField)row.FindControl("hdnIsItemSelected");
    if (selectionButton.Value == "true")
    {
        // do your operation here...
        selectedName += (selectedName == "" ? "" : " / ") + ((Label)row.FindControl("lblFirstName")).Text;
    }
}

Bước 6:

Bây giờ chạy các ứng dụng và xem tác động của JQuery trong khi lựa chọn hàng. Trong các ứng dụng mẫu, tôi đã thêm các DataSource cho GridView trong sự kiện Page_Load ().

Dưới đây hai hình mẫu cho Multi-Row Selected và Single Row Selected của GridView.

Hình 2: Multi Selected GridView sử dụng Jquery

Hình 3: Single Selected GridView sử dụng Jquery