Member 12605293 Ответов: 1

Как сделать всплывающее окно события строки в gridview, когда я нажимаю на конкретный ro человека


Привет , я хочу отобразить всплывающее сообщение, отображающее детали человека, когда я нажимаю на конкретную строку либо в скрипте, либо в коде позади.

Примечание: без использования какой-либо кнопки для отображения

<pre>$(document).on("click",  function () {
                $("#id").html($(".EmpId", $(this).closest("tr")).html());
                $("#name").html($(".EmpName", $(this).closest("tr")).html());
                $("#add").html($(".add", $(this).closest("tr")).html());
                $("#dialog").dialog({
                    title: "View Details",
                    buttons: {
                        Ok: function () {
                            $(this).dialog('close');
                        }
                    },
                    modal: true
                });
                return false;
            });
    </script>


Что я уже пробовал:

<pre> <div id="dialog" style="display: none">
    Id: <span id="id"></span>
    <br />
    Name: <span id="name"></span>
    <br />
    Department: <span id="Department"></span>
                <br />
    Age: <span id="Age"></span>
                <br />
    Salary: <span id="Salary"></span>
</div>

1 Ответов

Рейтинг:
5

Karthik_Mahalingam

попробовать это

protected void Page_Load(object sender, EventArgs e) {
           if (!this.IsPostBack)
           {
               DataTable dt = new DataTable();
               dt.Columns.Add("Id");
               dt.Columns.Add("Name");
               dt.Columns.Add("Description");
               dt.Rows.Add(1, "Apple", "a fruit");
               dt.Rows.Add(2, "Ball", "an object");
               dt.Rows.Add(3, "Cat", "meow");
               dt.Rows.Add(4, "Dog", "bow wow");
               GridView1.DataSource = dt;
               GridView1.DataBind();
           }

       }



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            var grid = document.getElementById('<%= GridView1.ClientID%>');
        $('tr', grid).on('click', function () {
            $("#id").html($(".Id", $(this).closest("tr")).html());
            $("#name").html($(".Name", $(this).closest("tr")).html());
            $("#description").html($(".Description", $(this).closest("tr")).html());
            $("#dialog").dialog({
                title: "View Details",
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    });

    
    </script>


<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"

                runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
                    <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />
                    <asp:BoundField DataField="Description" ItemStyle-CssClass="Description" HeaderText="Description"

                        ItemStyle-Width="150" />
                    
                </Columns>
            </asp:GridView>
            <div id="dialog" style="display: none">
                Id: <span id="id"></span>
                <br />
                Name: <span id="name"></span>
                <br />
                Description: <span id="description"></span>
            </div>


слегка модифицированный из этот основываясь на вашем вопросе.


Member 12605293

Привет Картик
Спасибо ю

Karthik_Mahalingam

добро пожаловать :)

Member 12605293

Привет Картик
Я использую Itemtemplate вместо boundfield и он не работает :(

Karthik_Mahalingam

разместите разметку gridview

Karthik_Mahalingam

я добавил Это
&ЛТ;АСП:таблицы с ID="gridview1, на" HeaderStyle-свойства backcolor="#3AC0F2" HeaderStyle-цвет="белый"
runat=" server "AutoGenerateColumns= "false">
& lt;колонки>
&ЛТ;как ASP:BoundField datafield в="идентификатор" ItemStyle-CssClass="идентификатор" HeaderText="идентификатор" ItemStyle-ширина="30" /&ГТ;
<asp:BoundField DataField= "Name" ItemStyle-CssClass=" Name "HeaderText= "Name" ItemStyle-Width= "150" />

<asp:BoundField DataField=" Description " ItemStyle-CssClass=" Description "HeaderText=" Description"
ItemStyle-Width= "150" />
<asp:templatefield>
& lt;itemtemplate>
&ЛТ;АСП:текстовое поле с ID="поле textbox2" атрибут runat="сервер" текст=в'<%# Персонализация("описание") %&ГТ; в'>







все еще работает нормально.

Member 12605293

Привет
Вот мой код

& lt;название>





$(функция () {
var grid = document. getElementById('& lt;%= gvDetails.ClientID%>');
$('тр', сетки).функция на('нажмите', () {
$("#идентификатор").в формате HTML($(".Empid в", $(этот).ближайший("тр")).HTML-код());
$("#имя").в формате HTML($(".Столбец empname", $(этот).ближайший("тр")).HTML-код());
$("#описание").в формате HTML($(".ДЭП", $(этот).ближайший("тр")).HTML-код());
$("диалог#").диалог({
название: "просмотр деталей",
кнопки: {
ОК: функция () {
$(этот).диалог ("закрыть");
}
},
модальный: истинный
});
});
});



&низкотемпературный;%--
div: hover {
цвет фона: зеленый;
цвет: оранжевый;
}--%>

& lt;%-- --%>






Сведения О Сотруднике




&ЛТ;как ASP:dropdownlist с ИД="ddlAge" атрибут runat="сервер" autopostback элемента управления="истина" ширина="120px" стиль="маржи-левой:790px; маржи-топ:-1985px"
Font-Size=" 11px "onselectedindexchanged=" ddlAge_SelectedIndexChanged " >



&ЛТ;как ASP:dropdownlist с ИД="ddlAddSalary1" атрибут runat="сервер" AppendDataBoundItems="истинный" стиль="маржи-левой:1040px;маржи-топ:-3185px" autopostback элемента управления="истинный" OnSelectedIndexChanged="ddlAddSalary1_SelectedIndexChanged1" ширина="120px" &ГТ;
&ЛТ;как ASP:RequiredFieldValidator идентификатор="ddlsal" ValidationGroup="проверка" ControlToValidate="ddlAddSalary1" атрибут runat="сервер" onselectedindexchanged="ddlAddSalary1_SelectedIndexChanged"&ГТ;



&ЛТ;в ASP:GridView в идентификатор="gvDetails" стиль="фон-цвет:салатовый" DataKeyNames="empid в,столбец empname" атрибут runat="сервер"

AutoGenerateColumns= "false" HeaderStyle-BackColor= " #61A6F8"
ShowFooter="истинный" HeaderStyle-шрифт-жирный="истинный" HeaderStyle-цвет="белый"
CellPadding= " 5 "CellSpacing=" 0"
AllowPaging= "true" PageSize= " 5"
AllowSorting= "True" OnRowDataBound= " gvDetails_OnRowDataBound"
Метода onrowcancelingedit="gvDetails_RowCancelingEdit"
OnRowDeleting=" gvDetails_RowDeleting "OnRowEditing=" gvDetails_RowEditing"
OnRowUpdating= " gvDetails_RowUpdating"
OnRowCommand= "gvDetails_RowCommand">

& lt;колонки>


<asp:TemplateField HeaderText= "EmployeeID">
& lt;itemtemplate>
< asp:Label ID=" lblempid "runat=" сервер"
Text='<%# Eval ("EmpId")%>'>

& lt;footertemplate>
<asp:TextBox ID= " txtempid"
MaxLength= " 5 "runat=" сервер " >
&ЛТ;как ASP:RequiredFieldValidator идентификатор="rfvempid" атрибут runat="сервер" ControlToValidate="txtempid" текст="*" ValidationGroup="проверки" /&ГТ;





<asp:TemplateField HeaderText= "EmployeeName">
< edititemtemplate>
&ЛТ;АСП:текстовое поле с ID="txtempname" атрибут runat="сервер" текст=в'<%#Ивала("столбец empname") %&ГТ;' /&ГТ;

& lt;itemtemplate>
&ЛТ;АСП:метка идентификатор="lblempname" атрибут runat="сервер" текст=в'<%#Ивала("столбец empname") %&ГТ;' /&ГТ;

& lt;footertemplate>
&ЛТ;АСП:текстовое поле с ID="txtempname1" атрибут runat="сервер" метода onkeypress=" возвращение onlyAlphabets(событие,этот);" /&ГТ;
<asp:RequiredFieldValidator ID= "rfvempname" runat=" server "ControlToValidate=" txtempnam

Member 12605293

<asp:TemplateField HeaderText= "отдел">
< edititemtemplate>
&ЛТ;АСП:текстовое поле с ID="txtdep" атрибут runat="сервер" текст=в'<%#Ивала("ДЭП") %&ГТ;' /&ГТ;

& lt;itemtemplate>
&ЛТ;АСП:метка идентификатор="lbldep" атрибут runat="сервер" текст=в'<%#Ивала("ДЭП") %&ГТ;' /&ГТ;

& lt;footertemplate>
<asp:TextBox ID=" txtdep1 "runat= "server" />
&ЛТ;как ASP:RequiredFieldValidator идентификатор="rfvdep" атрибут runat="сервер" ControlToValidate="txtdep1" текст="*" ValidationGroup="проверки" /&ГТ;




<asp:TemplateField HeaderText= "возраст">
& lt;headertemplate>
Возраст






< edititemtemplate>
&ЛТ;АСП:текстовое поле с ID="txtage" атрибут runat="сервер" текст=в'<%#Ивала("возраст") %&ГТ;' /&ГТ;

& lt;itemtemplate>
&ЛТ;АСП:метка идентификатор="lblage" атрибут runat="сервер" текст=в'<%#Ивала("возраст") %&ГТ;' /&ГТ;

& lt;footertemplate>
&ЛТ;АСП:текстовое поле с ID="txtage1" атрибут runat="сервер" параметр maxlength="3" метода onkeypress=" возвращают числовые(событие,этот);" onChange, после="handleChange(этот);" /&ГТ;
&ЛТ;как ASP:RequiredFieldValidator идентификатор="rfvage" атрибут runat="сервер" ControlToValidate="txtage1" текст="*" ValidationGroup="проверки" /&ГТ;






<asp:TemplateField HeaderText= "зарплата">
& lt;headertemplate>
Зарплата




< edititemtemplate>
&ЛТ;АСП:текстовое поле с ID="txtsal" атрибут runat="сервер" текст=в'<%#Ивала("Сэла") %&ГТ;' /&ГТ;

& lt;itemtemplate>
&ЛТ;АСП:метка идентификатор="lblsal" атрибут runat="сервер" текст=в'<%#Ивала("Сэла") %&ГТ;' /&ГТ;

& lt;footertemplate>
&ЛТ;АСП:текстовое поле с ID="txtsal1" атрибут runat="сервер" параметр maxlength="7" метода onkeypress=" возвращение numeric1(событие,этот);" /&ГТ;
&ЛТ;как ASP:RequiredFieldValidator идентификатор="rfvsal" атрибут runat="сервер" ControlToValidate="txtsal1" текст="*" ValidationGroup="проверки" /&ГТ;



<asp:TemplateField HeaderText= "Edit/Delete" HeaderStyle-Width= " 5%">
< edititemtemplate>
&ЛТ;как ASP:ImageButton с ИД="imgbtnUpdate" Имя_команды="обновить" атрибут runat="сервер" Url_изображения="~/изображения/обновление.ПНГ" подсказка="обновить" высота="20 ПКС" ширина="20 ПКС" /&ГТ;
&ЛТ;как ASP:ImageButton с ИД="imgbtnCancel" атрибут runat="сервер" Имя_команды="отмена" Url_изображения="~/изображения/отменить.ПНГ" подсказка="закрыть" высота="20 ПКС" ширина="20 ПКС" /&ГТ;

& lt;itemtemplate>
&ЛТ;как ASP:ImageButton с ИД="imgbtnEdit" Имя_команды="редактировать" атрибут runat="сервер" Url_изображения="~/изображения/вставить.ПНГ" подсказка="редактировать" высота="20 ПКС" ширина="20 ПКС" /&ГТ;
&ЛТ;как ASP:ImageButton с ИД="imgbtnDelete" Имя_команды="удалить" текст="редактировать" атрибут runat="сервер" Url_изображения="~/изображения/удалить.ПНГ" подсказка="удалить" высота="10 ПКС" ширина="значение 10px" /&ГТ;

& lt;footertemplate>
&ЛТ;как ASP:ImageButton с ИД="imgbtnAdd" атрибут runat="сервер" Url_изображения="~/изображения/добавить.ПНГ" Имя_команды="добавить" ширина="20 ПКС"

Karthik_Mahalingam

в чем же проблема
всплывающее окно не видно ?

Member 12605293

Да, и это показывает, что диалог не является функцией.
Нужен ли какой-нибудь плагин ? Или у меня есть значения в базе данных, и вы использовали их динамически в codebehind,это проблема??.

Karthik_Mahalingam

добавить их
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />

Member 12605293

Да, я добавил.Все еще не работает

Karthik_Mahalingam

Убедитесь, что добавлена только одна ссылка jquery..
Удалить дубликат

Member 12605293

Да Картик это не работает

Karthik_Mahalingam

Теперь какая ошибка

Member 12605293

Диалоговое окно пустое я не знаю, какой код мне нужно включить функцию eval("") или изменить код этикетки ,или пункт Код этикетки

Karthik_Mahalingam

Этикетка

Member 12605293

Диалоговое окно отображается, но я не получаю значения в соответствующей метке

Karthik_Mahalingam

Вам придется запросить значение из соответствующих элементов управления в шаблоне элемента th3

Member 12605293

Можете ли вы показать мне на примере Картик

Karthik_Mahalingam

Какие управляющие данные вы хотите показать

Member 12605293

Id, имя и отдел

Karthik_Mahalingam

Теперь я нахожусь в такси, как только приближаюсь к ПК. Я пришлю

Member 12605293

ладно.

Karthik_Mahalingam

Используйте отладчик и исследуйте

Member 12605293

Да я делаю только это

Karthik_Mahalingam

Хорошо

Member 12605293

Вы хотите, чтобы я добавил элемент управления datasource на страницу aspx?

Karthik_Mahalingam

Как этикетка

Karthik_Mahalingam

я вернулся к компьютеру, какие данные вы хотите показать во всплывающем окне

Member 12605293

Empid, Empname, отдел, возраст и зарплата

Karthik_Mahalingam

я сделаю для emp id ты сделаешь для всего остального

Member 12605293

еще один вопрос .Всплывающее окно появляется даже тогда, когда я пытаюсь ввести новое значение внутри сетки и не позволяю мне редактировать

Member 12605293

Вот моя база данных
охраняемых недействительными gvDetails_RowCommand(объект отправителя, GridViewCommandEventArgs е)
{
если (электронная.Имя_команды."Равно" ("Добавить"))
{
TextBox txtEmpId = (TextBox)gvDetails.FooterRow.FindControl ("txtempid");
TextBox txtEmpName = (TextBox)gvDetails.FooterRow.FindControl ("txtempname1");
TextBox txtEmpDep = (TextBox)gvDetails.FooterRow.FindControl ("txtdep1");
TextBox txtAge = (TextBox)gvDetails.FooterRow.FindControl ("txtage1");
TextBox txtSal = (TextBox)gvDetails.FooterRow. FindControl ("txtsal1");

спицы.Открыть();
SqlCommand cmd =
новая команда SqlCommand(
"вставить в gvdetails17(EmpId,EmpName,Dep,Age,Sal) значения('" + txtEmpId.Текст + "', '" + txtEmpName.Текст + "','" +
txtEmpDep.Текст + "', '" + txtAge.Текст + "', '" + txtSal.Текст + "')", cn);
int result = cmd.Метод executenonquery();
спицы.Рядом();
если (результат == 1)
{
связывать();

}
ещё
{

}
}
}

Karthik_Mahalingam


<asp:TemplateField HeaderText="EmployeeID">
<ItemTemplate>
<asp:Label ID="lblempid" runat="server" class="clsempid"
Text='<%# Eval("EmpId")%>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>




$("#description").html($(".clsempid", $(this).closest("tr")).text());


отметить это класс= " clsempid"

Member 12605293

Вот моя страница aspx с несколькими фрагментами кода

<asp: GridView ID=" gvDetails "style=" background-color:lightgreen; border-collapse: collapse;
цвет фона: светло-зеленый;
margin-top: - 53px; "DataKeyNames=" EmpId, EmpName "runat=" сервер"
OnPageIndexChanging= " OnPaging"
AutoGenerateColumns= "false" HeaderStyle-BackColor= " #61A6F8"
ShowFooter="истинный" HeaderStyle-шрифт-жирный="истинный" HeaderStyle-цвет="белый"
CellPadding= " 10 "CellSpacing=" 0"
AllowPaging= "true" PageSize= " 5"
AllowSorting= "True" OnRowDataBound= " gvDetails_OnRowDataBound"
Метода onrowcancelingedit="gvDetails_RowCancelingEdit"
OnRowDeleting=" gvDetails_RowDeleting "OnRowEditing=" gvDetails_RowEditing"
OnRowUpdating= " gvDetails_RowUpdating"
OnRowCommand= "gvDetails_RowCommand" OnSelectedIndexChanged= "OnSelectedIndexChanged" >

& lt;колонки>


<asp:TemplateField HeaderText= "EmployeeID">
& lt;itemtemplate>
< asp:Label ID=" lblempid "runat=" сервер"
Text='<%# Eval ("EmpId")%>'>

& lt;footertemplate>
<asp:TextBox ID= " txtempid"
MaxLength= " 5 "runat=" сервер " >
&ЛТ;как ASP:RequiredFieldValidator идентификатор="rfvempid" атрибут runat="сервер" ControlToValidate="txtempid" текст="*" ValidationGroup="проверки" /&ГТ;





<asp:TemplateField HeaderText= "EmployeeName">
< edititemtemplate>
&ЛТ;АСП:текстовое поле с ID="txtempname" атрибут runat="сервер" текст=в'<%#Ивала("столбец empname") %&ГТ;' /&ГТ;

& lt;itemtemplate>
&ЛТ;АСП:метка идентификатор="lblempname" атрибут runat="сервер" текст=в'<%#Ивала("столбец empname") %&ГТ;' /&ГТ;

& lt;footertemplate>
&ЛТ;АСП:текстовое поле с ID="txtempname1" атрибут runat="сервер" метода onkeypress=" возвращение onlyAlphabets(событие,этот);" /&ГТ;
&ЛТ;как ASP:RequiredFieldValidator идентификатор="rfvempname" атрибут runat="сервер" ControlToValidate="txtempname1" текст="*" ValidationGroup="проверки" /&ГТ;




<asp:TemplateField HeaderText= "отдел">
< edititemtemplate>
&ЛТ;АСП:текстовое поле с ID="txtdep" атрибут runat="сервер" текст=в'<%#Ивала("ДЭП") %&ГТ;' /&ГТ;

& lt;itemtemplate>
&ЛТ;АСП:метка идентификатор="lbldep" атрибут runat="сервер" текст=в'<%#Ивала("ДЭП") %&ГТ;' /&ГТ;

& lt;footertemplate>
<asp:TextBox ID=" txtdep1 "runat= "server" />
&ЛТ;как ASP:RequiredFieldValidator идентификатор="rfvdep" атрибут runat="сервер" ControlToValidate="txtdep1" текст="*" ValidationGroup="проверки" /&ГТ;

Karthik_Mahalingam

выложил образец, попробуй вот так

Member 12605293

Да, Karthik работает хорошо, но небольшая проблема,он не позволяет добавлять/редактировать/обновлять

Karthik_Mahalingam

:( не по теме.
пожалуйста, закройте это и опубликуйте это как новый вопрос.. я думаю, что нить тянется долго. :)

Karthik_Mahalingam

-

Member 12605293

Привет Я отправил электронное письмо, пожалуйста, посмотрите их и ответьте на эти идентификаторы электронной почты tw0.Спасибо Картик

С уважением,
Алстон

Karthik_Mahalingam

нет, не могу, я сейчас в офисе..
ответьте здесь.

Member 12605293

ОК Картик
Моя единственная проблема заключается в том, как ограничить всплывающее окно, когда я нажимаю на такие элементы управления, как insert update delete и footer textboxes.

1.Is можно ли добавить класс в нижнюю часть колонтитула?
2. или есть какой-то другой способ ограничить эту проблему
3.Когда я нажимаю в любом месте внутри представления сетки ,появляется всплывающее окно, я хочу только событие строки, но не кнопки и элементы управления Нижним колонтитулом, которые также находятся внутри представления сетки.

Karthik_Mahalingam

$('tr', grid). on ('click', function (a,b, c) {
console. log(a, b, c);

проверьте, что вы получаете в a, b,c в окне консоли или google chrome ( F12 )

Member 12605293

$(функция () {

var grid = document. getElementById('<%= gvDetails.ClientID%>');
$('тр', сетки).функция на('нажмите', (объект, Б) {
если (['обновить', 'редактирование', 'добавить'].метод indexOf(obj-файлы.цель.тип) == "изображения")
вернуть true;
ещё
$("#идентификатор").в формате HTML($(".clsempid", $(этот).ближайший("тр")).HTML-код());
$("#имя").в формате HTML($(".clsempid1", $(этот).ближайший("тр")).HTML-код());
$("#факультет").в формате HTML($(".clsempid2", $(этот).ближайший("тр")).HTML-код());
$("#возраст").в формате HTML($(".clsempid3", $(этот).ближайший("тр")).HTML-код());
$("#сал").в формате HTML($(".clsempid4", $(этот).ближайший("тр")).HTML-код());
$("диалог#").диалог({
название: "просмотр деталей",
кнопки: {
ОК: функция () {
$(этот).диалог ("закрыть");
}
},
модальный: истинный
});
});
});

Karthik_Mahalingam

$('tr', grid).on('click', function (obj, b) {
console.log(obj);
console.log(b);


в приведенном выше 2-м объекте вы будете получать информацию о кнопках, но попробуйте найти, какая именно.

Member 12605293

Привет Картик
Экран окна не отображается.Как это сделать?

Karthik_Mahalingam

https://developer.chrome.com/devtools

Karthik_Mahalingam

вы из Индии?

Member 12605293

да.Я новичок в развитии.В прошлом году я закончил школу.

Karthik_Mahalingam

ладно.

Member 12605293

Привет, Картик.
Спасибо за ваше терпение
Ф.Событие {originalEvent: события mouseevent, типа: "нажать", метки: 3206.8650000000002, jQuery17203965917977842508: правда, toElement: ввод gvDetails_txtempid#…}
Grid20fin1:148 неопределенно
Grid20fin1:147 Ф.Событие {originalEvent: события mouseevent, типа: "нажать", метки: 18886.180000000004, jQuery17203965917977842508: правда, toElement: ООО "ТД"…}
Grid20fin1:148 неопределенно

Karthik_Mahalingam

разверните весь узел, сделайте скриншот и поделитесь ссылкой

Karthik_Mahalingam

: ( его локальный хост, я не могу получить доступ

Member 12605293

:(

Karthik_Mahalingam

сделайте скриншот, опубликуйте и поделитесь ссылкой

imgur.com

Member 12605293

Привет, извините за задержку. разместил изображение там, но оно все еще показывает url:imgur.com

Karthik_Mahalingam

:(

Member 12605293

Братан, вы немедленно отвечаете на мое сообщение, но я не могу справиться с вашей потребностью : (..спасибо

Karthik_Mahalingam

это показывает интерес.

Member 12605293

Если это возможно пожалуйста проверьте почту

Karthik_Mahalingam

как я уже сказал, У меня нет доступа к почте

Member 12605293

Вы находитесь в wattsapp?

Karthik_Mahalingam

я не поощряю whatspp.. так как я получаю много пингов

Member 12605293

ладно.Кстати, спасибо за ответы.До поры до времени я обходил эту проблему с помощью doubleclick

Karthik_Mahalingam

ладно