展开所有gridview

时间:2012-06-26 15:29:15

标签: javascript gridview expand

我在la page中有一个.ascx控件。在该控件中,我有一个具有可扩展内容的GridView。到现在为止还挺好。当我尝试创建全部展开/全部折叠按钮时,我的问题就出现了。出于某种原因,我必须将.javascript函数放在.aspx页面中,否则无法找到它们。

如何从控件中检索gridview数据?我想为每一行调用我的expandOne函数,但我无法访问行。 expandOne可以在一行中正常工作。

var gvObject = document.getElementById('GridView1'); 

为空。

var gvObject = $('GridView1');

给出的东西不是网格(gvObject.rows为null)和gvObject.length == 0

var grid = document.getElementById('<%=GridView1.ClientID %>');

将崩溃('GridView1'在当前上下文中不存在。)

这是HTML

<asp:GridView ID="GridView1" runat="server" AllowPaging="false" AutoGenerateColumns="False" ShowHeader="false">
<Columns>
  <asp:TemplateField>
      <ItemTemplate>
          <a href="javascript:collapseExpand('Job-<%# Eval("Index") %>');" >
          <img id="imageJob-<%# Eval("Index") %>"  alt="Click to show/hide orders"  border="0" src="../images/plus.png" /></a>
      </ItemTemplate>
  </asp:TemplateField>
  <asp:BoundField DataField="TitleCnt" />

  <asp:TemplateField>
      <ItemTemplate>
          <tr><td colspan="100%">
              <div id="Job-<%# Eval("Index") %>" style="display:none; left:25px;" class="answer">
                <asp:Label Text="Some content" runat="server"></asp:Label>
              </div>
          </td></tr>
      </ItemTemplate>
  </asp:TemplateField>
</Columns>
</asp:GridView>

和javascript

function expandOne(obj) {
    var gvObject = document.getElementById(obj);
    var imageID = document.getElementById('image' + obj);
    gvObject.style.display = "inline";
    imageID.src = "../images/moins.png";
}

function ExpandAll() {
    var gvMaster = $('GridView1');
    for (i = 0; i < gvMaster.rows.length; i++) {
        expandOne('Job' + i);
    }
}

非常感谢。

1 个答案:

答案 0 :(得分:0)

如果您使用的是.Net 4,则可以设置GridView的ClientIDMode="Static"。这将导致客户端上的id属性为“GridView1”的表。那么这应该是你的表:

var gvObject = document.getElementById('GridView1');

您的jQuery选择也会起作用,但您必须包含#character:

var gvObject = $('#GridView1');

有关ClientIDMode的信息,请参阅http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx