WedX - журнал о программировании и компьютерных науках

как отобразить тег div под щелчком строки gridview

Я хочу отображать выбранную информацию о пользователе в теге div, который я поместил в gridview, когда пользователь нажимает на выбранную строку gridview под этой строкой, я хочу отображать информацию о пользователе. введите здесь описание изображения

14.05.2016

Ответы:


1

Этого можно достичь с помощью небольшого количества jQuery. Я надеюсь, что ответ ниже поможет вам

Код:

protected void Page_Load(object sender, EventArgs e)
{
    var users = new List<object>();

    users.Add(new { Name = "Name 1", Surname = "Surname 1" });
    users.Add(new { Name = "Name 2", Surname = "Surname 2" });
    users.Add(new { Name = "Name 3", Surname = "Surname 3" });
    users.Add(new { Name = "Name 4", Surname = "Surname 4" });
    users.Add(new { Name = "Name 5", Surname = "Surname 5" });
    users.Add(new { Name = "Name 6", Surname = "Surname 6" });
    users.Add(new { Name = "Name 7", Surname = "Surname 7" });
    users.Add(new { Name = "Name 8", Surname = "Surname 8" });
    users.Add(new { Name = "Name 9", Surname = "Surname 9" });
    users.Add(new { Name = "Name 10", Surname = "Surname 10" });

    gvUsers.DataSource = users;
    gvUsers.DataBind();
}

ASPX:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="WebApplication6.Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var gridId = "<%= gvUsers.ClientID %>";
            var rowClickEvent = "#" + gridId + " tr"
            var current = "";

            $("#" + gridId).on("click", "span.close", function () {
                //Remove the row when user click on X
                $(this).parent().parent().empty();
            });

            $(rowClickEvent).click(function () {
                //Add row containing aditional info when user click on a row inside the grid view
                var row = this;
                var name = row.children[0].innerHTML;
                var surname = row.children[1].innerHTML;

                if ((name + surname) != current) {
                    $("<tr style='background-color:yellow;'><td style='height:200px;vertical-align:top;'>Dear " + name + " " + surname + "<br />Your Account Was Created Successfully<td><td style='vertical-align:top;'><span class='close'>X</span></td></tr>").insertAfter(row);
                }

                current = name + surname;
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView ID="gvUsers" runat="server">
    </asp:GridView>
</asp:Content>

Вывод:

Показывать дополнительную информацию о щелчке строки сетки

15.05.2016
  • кодирование работает нормально, но проблема в том, что когда я нажимаю на строку под отображаемым тегом div, снова, если я нажимаю на ту же строку, отображается другой тег div, который я хочу закрыть тег div, когда я нажимаю второй раз на строку gridview 15.05.2016
  • Просто немного подправьте javascript, чтобы он работал именно так, как вы хотите. Пожалуйста, посмотрите на редактирование, чтобы предотвратить отображение дубликатов. Вы увидите, что я создал переменную с именем current, для которой вам нужно установить идентификатор или другое уникальное значение (в качестве примера я использовал комбинацию имени и фамилии), затем каждый раз, когда я добавляю строку, я проверяю эту переменную, чтобы убедиться, что для этой строки не добавлен другой div 15.05.2016
  • Я обнаружил некоторую проблему с приведенным выше кодом, можете ли вы предложить мне, как ее решить. Например, я нажал на Имя 1 --- в строке Div 1 открылся, если я снова щелкнул Имя 1, оно не открыто .... это нормально..... Но проблема не закрывается Div 1, если я нажимаю на Имя 2 или 3 .. --- под строкой Div 2 или 3 ... открытие без закрытия снова я вернулся к имени 1, если я снова щелкну другой Div 1 открытие bcz мой старый Div 1 все еще существует, я не хочу открывать новый Div 1 ниже Название 1 строки 19.05.2016
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]