如何使用JQuery模式窗口内的GridView检索在同一行上的TR数据 [英] How to retrieve the TR data on the same row within GridView using JQuery modal window

查看：294
本文介绍了如何使用JQuery模式窗口内的GridView检索在同一行上的TR数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想请点击此链接：<一个href=\"http://www.aspsnippets.com/Articles/Display-GridView-Row-details-inside-jQuery-Dialog-Modal-Popup-in-ASPNet.aspx\"相对=nofollow>链接到示例

我有以下的GridView在SP可视Web部件：

 ＆LT; ASP：GridView控件ID =BookingResults=服务器EnableModelValidation =真的AutoGenerateColumns =FALSEAllowSorting =真前景色=黑＆GT;
    ＆LT;柱体和GT;
        ＆LT; ASP：的TemplateField＆GT;
            ＆LT;＆HeaderTemplate中GT;
                ＆LT; ASP：标签=服务器ID =commHdr文本=显示指引/＆GT;
            ＆LT; / HeaderTemplate中＆GT;
            ＆LT;＆ItemTemplate中GT;
                ＆LT; ASP：LinkBut​​ton的=服务器ID =btnShow3的CssClass =btnSearch3文本=VIEW一项PostBackUrl =JavaScript的：无效（0）;的OnClientClick =JavaScript的：测试（）;返回false;＆GT;＆LT; / ASP：LinkBut​​ton的＆GT;
            ＆LT; / ItemTemplate中＆GT;
        ＆LT; / ASP：的TemplateField＆GT;
        ＆LT; ASP：BoundField的数据字段=ID的HeaderText =IDItemStyle-VerticalAlign =顶部/＆GT;
        ＆LT; ASP：BoundField的数据字段=主题的HeaderText =主题ItemStyle-VerticalAlign =顶部/＆GT;
        ＆LT; ASP：BoundField的数据字段=位置的HeaderText =位置ItemStyle-VerticalAlign =顶部/＆GT;
        ＆LT; ASP：BoundField的数据字段=特色的HeaderText =特色ItemStyle-VerticalAlign =顶部/＆GT;
        ＆LT; ASP：的TemplateField的HeaderText =提供程序名称＆GT;
             ＆LT;＆ItemTemplate中GT;
                  ＆LT; D​​IV的风格=WIDTH：155px;溢出：隐藏;文本溢出：省略号;空格：NOWRAP;＆GT;
                       ＆LT; ASP：标签ID =lblEllipsis=服务器文本='＆LT;％＃的eval（提供者）％GT;'工具提示='＆LT;％＃的eval（提供者）％GT;'＆GT;＆LT; / ASP：标签＆gt;
                  ＆LT; / DIV＆GT;
              ＆LT; / ItemTemplate中＆GT;
         ＆LT; / ASP：的TemplateField＆GT;
        ＆LT; ASP：的TemplateField的HeaderText =摘要ItemStyle-VerticalAlign =评出的＆GT;
            ＆LT;＆EditItemTemplate的GT;
                ＆LT; ASP：文本框ID =TextBox1的=服务器文本='＆LT;％＃绑定（摘要）％GT;'的CssClass =萨姆＆GT;＆LT; / ASP：文本框＆GT;
            ＆LT; / EditItemTemplate中＆GT;
            ＆LT;＆ItemTemplate中GT;
                ＆LT; ASP：标签ID =Label1的=服务器文本='＆LT;％＃绑定（摘要）％GT;'＆GT;＆LT; / ASP：标签＆gt;
            ＆LT; / ItemTemplate中＆GT;
        ＆LT; / ASP：的TemplateField＆GT;
        ＆LT; ASP：BoundField的数据字段=指引的HeaderText =指引ItemStyle-的CssClass =gLineHeaderStyle-的CssClass =gLine/＆GT;
    ＆LT; /专栏＆GT;
＆LT; / ASP：GridView的＆GT;

在生成code它看起来像这样在网页上：

每个行有它自己的数据和生成的HTML的示例：

 ＆LT; TR＆GT;
    ＆所述; TD＆GT;
         ＆LT;一的onclick =JavaScript的：测试（）;返回false; ID =ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_btnShow3级=btnSearch3的href =JavaScript的：WebForm_DoPostBackWithOptions（新WebForm_PostBackOptions(&quot;ctl00$ctl33$g_36ed1b14_1f08_43fb_8099_eb3423a33ed9$BookingResults$ctl05$btnShow3&quot;, ＆安培; QUOT;＆安培; QUOT ;,如此，和放大器; QUOT;＆安培; QUOT;，＆安培; QUOT;的javascript：无效（0）;＆安培; QUOT ;,假的，真正的））＆gt;查看＆LT; / A＆GT;
    ＆LT; / TD＆GT;
    ＆LT; TD VALIGN =顶＆GT;
        盘后
    ＆LT; / TD＆GT;
    ＆LT; TD VALIGN =顶＆GT;
        儿科;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
        ＆LT; D​​IV的风格=WIDTH：155px;溢出：隐藏;文本溢出：省略号;空格：NOWRAP;＆GT;
            ＆LT;跨度ID =ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_lblEllipsis称号=所有供应商;＆GT;
                所有供应商;
            ＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / TD＆GT;
    ＆LT; TD类=萨姆VALIGN =顶＆GT;
        ＆所述;跨度的id =ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_Label1＆GT;
            ＆LT; HTML和GT;
                ＆所述p为H.;
                    ＆LT;跨度风格=FONT-SIZE和放大器;＃58; 11磅;＆GT;回拨号码
                        ＆LT;跨度ID =MS-rterangepaste端＆GT;＆LT; / SPAN＆GT;
                    ＆LT; / SPAN＆GT;
                ＆所述; / P＆GT;
            ＆LT; / HTML＆GT;
        ＆LT; / SPAN＆GT;
    ＆LT; / TD＆GT;
    ＆LT; TD类=gLineVALIGN =顶＆GT; ＆LT;！ - 瞒过用户，但在SOURCE code  - ＆GT;
        ＆LT; HTML和GT;
            ＆所述p为H.;
                这是一个测试准则包括但显示给用户，但会显示在示范窗口。
            ＆所述; / P＆GT;
        ＆LT; / HTML＆GT;
    ＆LT; / TD＆GT;
＆LT; / TR＆GT;

CSS来从视图中隐藏列，但仍然从执行code-背后：

  .gLine {
    显示：无;
}

使用以下显示模式窗口：

 ＆LT; D​​IV ID =对话的风格=显示：无＆GT;
    ＆LT; B＆GT;编号：LT; / B＆GT; ＆所述;跨度的id =infoShow＆GT;＆下; /跨度＆GT;
＆LT; / DIV＆GT;

我想在指引头各自通过在JQuery的以下方法链接点击下排从显示的数据：

 函数test（）{
    警报（测试）;
    $（＃infoShow）HTML（$（gLine。$（本）.closest（TR））HTML（））;
    $（＃对话）。对话框（{
        标题：观指引，
        纽扣： {
            OK：功能（）{
                $（本）.dialog（'接近'）;
            }
        }，
        模式：真
    }）;
}

在上面的例子中，当我点击查看链接，模态窗口应该显示：

 ＆LT; HTML＆GT;
     ＆所述p为H.;
     这是一个测试准则包括但显示给用户，但会显示在示范窗口。
     ＆所述; / P＆GT;
＆LT; / HTML＆GT;

但它显示的是什么。

如何修改我的JQuery code以示与类TD gLine

内的文本

我试过下面的很好，但我不断收到未定义第二警报：

 函数test（）{
    警报（测试）;
    $（＃infoShow）HTML（$（gLine。$（本）.closest（TR））HTML（））;    VAR资料表= $（本）。儿童（TD）。图（函数（）{
        返回$（本）的.text（）;
    }）。得到（）;
    警报（资料表[5]）;
    $（＃对话）。对话框（{
        标题：观指引，
        纽扣： {
            OK：功能（）{
                $（本）.dialog（'接近'）;
            }
        }，
        模式：真
    }）;
}


解决方案

下面是你如何让你的演示作品：

首先，删除＆LT; HTML方式＆gt; 标记从标记

二删除的onclick =JavaScript的：测试（）;返回false;从你的链接

最后，你的code更改为这个（演示）：

  $（函数（）{    $（'表'）。点击（函数（）{        $（＃infoShow）HTML（$（gLine。$（本）.closest（TR））HTML（））;
        $（＃对话）。对话框（{
            标题：观指引，
            纽扣： {
                OK：功能（）{
                    $（本）.dialog（'接近'）;
                }
            }，
            模式：真
        }）;
    }）;}）;

请注意，当您使用jQuery UI，jQuery的包含的相应版本。

编辑：之所以在这个问题不起作用code是因为的onclick 呼吁测试（）没有任何参考的元素。如果是这样的：

 的onclick =JavaScript的：测试（本）;返回false;

那么测试功能，可以这样做：

 功能测试（元素）{
    // ...
    $（＃infoShow）HTML（$（gLine。$（元素）.closest（TR））HTML（））;
    // ...
}

I am trying to follow this link: Link to Example

I have the following GridView in a SP Visual Web Part:

<asp:GridView ID="BookingResults" runat="server" EnableModelValidation="True" AutoGenerateColumns="False" AllowSorting="true" ForeColor="Black">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:Label runat="server" ID="commHdr" Text="Show Guideline" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="btnShow3" CssClass="btnSearch3" Text="VIEW" PostBackUrl="javascript:void(0);" OnClientClick="javascript:test();return false;"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-VerticalAlign="Top" />
        <asp:BoundField DataField="Topic" HeaderText="Topic" ItemStyle-VerticalAlign="Top"  />
        <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-VerticalAlign="Top" />
        <asp:BoundField DataField="Specialty" HeaderText="Specialty" ItemStyle-VerticalAlign="Top" />
        <asp:TemplateField HeaderText="Provider Name">
             <ItemTemplate>
                  <div style="width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                       <asp:Label ID="lblEllipsis" runat="server" Text='<%#Eval("Provider") %>' ToolTip='<%#Eval("Provider") %>'></asp:Label>
                  </div>
              </ItemTemplate>
         </asp:TemplateField>
        <asp:TemplateField HeaderText="Summary" ItemStyle-VerticalAlign="Top">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Summary") %>' CssClass="sumM"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Summary") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Guideline" HeaderText="Guideline" ItemStyle-CssClass="gLine" HeaderStyle-CssClass="gLine" />
    </Columns>
</asp:GridView>

After the code is generated it looks like this on the webpage:

Each row has its own data and an example of generated HTML:

<tr>
    <td>
         <a onclick="javascript:test();return false;" id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_btnShow3" class="btnSearch3" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl33$g_36ed1b14_1f08_43fb_8099_eb3423a33ed9$BookingResults$ctl05$btnShow3&quot;, &quot;&quot;, true, &quot;&quot;, &quot;javascript:void(0);&quot;, false, true))">VIEW</a>
    </td>
    <td valign="top">
        After Hours
    </td>
    <td valign="top">
        Pediatrics;
    </td>
    <td>
        <div style="width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            <span id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_lblEllipsis" title="All Providers;">
                All Providers;
            </span>
        </div>
    </td>
    <td class="sumM" valign="top">
        <span id="ctl00_ctl33_g_36ed1b14_1f08_43fb_8099_eb3423a33ed9_BookingResults_ctl05_Label1">
            <html>
                <p>
                    <span style="FONT-SIZE&#58;11pt;">Callback Number
                        <span id="ms-rterangepaste-end"></span>​
                    </span>
                </p>
            </html>
        </span>
    </td>
    <td class="gLine" valign="top"> <!-- HIDDEN FROM USER BUT IN SOURCE CODE -->
        <html>
            <p>
                THIS IS A TEST GUIDELINE BUT NOT SHOWN TO THE USER BUT WILL BE SHOWN IN THE MODEL WINDOW.
            </p>
        </html>
    </td>
</tr>

CSS to hide the column from view but still execute from code-behind:

.gLine {
    display: none;
}

Using the following to display the modal window:

<div id="dialog" style="display: none">
    <b>Id:</b> <span id="infoShow"></span>
</div>

I am trying to display the data from row under the Guideline header respective to the link click by the following method in JQuery:

function test() {
    alert("test");
    $("#infoShow").html($(".gLine", $(this).closest("tr")).html());
    $("#dialog").dialog({
        title: "View Guideline",
        buttons: {
            Ok: function () {
                $(this).dialog('close');
            }
        },
        modal: true
    });
}

In the example above, when I click VIEW link, the modal window should display:

<HTML>
     <p>
     THIS IS A TEST GUIDELINE BUT NOT SHOWN TO THE USER BUT WILL BE SHOWN IN THE MODEL WINDOW.
     </p>
</HTML>

but it is displaying nothing.

How do I modify my JQuery code to show the text inside the TD with class gLine

I tried the below as well but I keep getting undefined for the second alert:

function test() {
    alert("test");
    $("#infoShow").html($(".gLine", $(this).closest("tr")).html());

    var tableData = $(this).children("td").map(function () {
        return $(this).text();
    }).get();
    alert(tableData[5]);
    $("#dialog").dialog({
        title: "View Guideline",
        buttons: {
            Ok: function () {
                $(this).dialog('close');
            }
        },
        modal: true
    });
}

解决方案

Here is how you can make your demo work:

First, remove the <html> tags from your markup.

Second remove the onclick="javascript:test();return false;" from your links

Lastly, change your code to this (demo):

$(function () {

    $('table a').click(function () {

        $("#infoShow").html($(".gLine", $(this).closest("tr")).html());
        $("#dialog").dialog({
            title: "View Guideline",
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
    });

});

Please note that when you use jQuery UI, include the appropriate version of jQuery.

Edit: The reason why the code in the question doesn't work is because the onclick is calling test() without any reference to the element. If it looked like this:

onclick="javascript:test(this);return false;"

then the test function could have done this:

function test(element) {
    // ...
    $("#infoShow").html($(".gLine", $(element).closest("tr")).html());
    // ...
}

这篇关于如何使用JQuery模式窗口内的GridView检索在同一行上的TR数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆