在 Gridview 的列中隐藏/取消隐藏控件 - 移位问题答案

【问题标题】：Hiding/Unhiding Control in Gridview’s column - shifting problem在 Gridview 的列中隐藏/取消隐藏控件 - 移位问题
【发布时间】：2010-11-04 14:05:15
【问题描述】：

这是对我之前的问题的跟进： link text

在 gridview 的列中，我有一个链接按钮和一个标签。

我想在点击链接按钮时隐藏/取消隐藏标签。我使用 javascript 因为我不想要任何回发。代码：

protected void gvwComments_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            LinkButton lButton =  ((LinkButton)e.Row.Cells[2].FindControl("lbtnExpand"));
            Label label = ((Label)e.Row.Cells[2].FindControl("lblBody"));
            lButton.Attributes.Add("onclick",  string.Format("HideLabel('{0}'); return false;", label.ClientID));

        }
    }



function HideLabel(button) {

            var rowObj = document.getElementById(button);


            if (rowObj.style.display == "none") {
                rowObj.style.display = "block";

            }
            else {
                rowObj.style.display = "none";

            }

        }

问题是，当我通过单击按钮取消隐藏标签时，链接按钮会稍微向上移动它在单元格中的原始位置。是否可以在 gridviews 单元格中保留链接按钮的位置？

【问题讨论】：

标签： c# asp.net javascript css

【解决方案1】：

我建议您将 CSS 从 display:none 更改为 display:hidden，这将隐藏控件但保持空间防止跳跃。

【讨论】：

这不好，因为带有大量文本的隐藏标签会在单元格中保留空白空间，这是我不想要的！

【解决方案2】：

诀窍是使用关键字“this”，然后获取对该行的引用并从那里更改标签。

我有一个帖子here，其中有一个带有 CheckBox 列和一个 Name 列的 GridView。当 CheckBox 被选中时，该行上名称的背景颜色会发生变化。我从 CheckBox 列中的这个属性开始：

onclick="toggleSelected(this)"

然后我有一个 JavaScript 函数来查找行并更改下一个单元格：

function toggleSelected(sender) {
    // note that at this point the "this" is now "sender" -which is the checkbox
    // get a reference to the row using the helper function - see below.
    var row = GetParentElementByTagName(sender, "TR");

    if (sender.checked)
        row.cells[1].className = "selected";
    else
        row.cells[1].className = '';

}

这使用了辅助函数：

function GetParentElementByTagName(element, tagName) {
    var element = element;
    while (element.tagName != tagName)
        element = element.parentNode;
    return element;
}

您的要求稍有不同，因此您可以使用以下内容：

var lbl = row.cells[1].childNodes[0].getElementsByTagName('label')

获取对您的标签的引用。

【讨论】：