我有一个gridview,我必须使用javascript控制网格列的visiblitiy。考虑这个gridview。我有几栏。
<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkResource" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Resource">
<ItemTemplate>
<asp:Label ID="Resource" Text='<%# Bind("Resource") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Description" HeaderText="Resource Description" HtmlEncode="false">
<ItemStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
</asp:BoundField>
</asp:TemplateField>
</Columns>
</asp:GridView>
我可以使用这个 -
来控制服务器端这些列的可见性grdTest.Columns[n].Visible = false;
但是,我必须使用javascript控制客户端的可见性。我尝试了很多,但我只能访问行对象或gridview的任何特定单元格。
grid.rows[index].cells[i].style="display: none"; //for cell
有没有办法访问gridview的列对象并使用javascript控制其可见性?
答案 0 :(得分:1)
您可以尝试调用服务器端代码。以下是用于调用代码的js函数:
function HideColumns(sender, args)
{
PageMethods.HideSomeColumns(args, onSuccess, onError);
}
function onReportSuccess(result)
{
}
function onReportError(error)
{
alert("There was an error.");
}
这是服务器端功能,用于隐藏所需的列:
[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static void ReportTranslation(int n)
{
grdTest.Columns[n].Visible = false;
}
还有其他选择 - 使用纯js:
function show_hide_column(col_no, do_show) {
var stl;
if (do_show) stl = 'block'
else stl = 'none';
var tbl = document.getElementById('id_of_table');
var rows = tbl.getElementsByTagName('tr');
for (var row=0; row<rows.length;row++) {
var cels = rows[row].getElementsByTagName('td')
cels[col_no].style.display=stl;
}
}
答案 1 :(得分:0)
更简单的方法是使用jQuery并在要显示/隐藏的列的单元格上设置CSS类名。
<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate CssClass="hide-me">
<asp:CheckBox ID="chkResource" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
在样式表中将可见性设置为display:none,或者您也可以将其设置为单元格的样式:
.hide-me { display: none; }
然后从javascript使用jQuery:
$('.click-me').click(function(e) {
$('.hide-me').show();
// OR you could use toggle:
$('.hide-me').toggle();
});