Question

好的，我有一个像这样的 GridView ：

<asp:GridView ID="gv" runat="server" ... >
...
<HeaderStyle CssClass="header" />
<RowStyle CssClass="datarow" />
<AlternatingRowStyle CssClass="datarow alt" />
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox runat="server" ID="gvchkDelete" />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
...
</asp:GridView>

请注意自定义 RowStyle 和 AlternatingRowStyle css类。我想要的是每当选择 gvchkDelete CheckBox时更改行的样式，并在不选择时将其删除。所以我想出了类似的东西：

protected void gv_PreRender(object sender, EventArgs e)
{
    DUtil.GridViewRowHighlight(gv, "gvchkDelete");
}

//External Class
public class DUtil
{
public static void GridViewRowHighlight(GridView gv, string CheckBoxControlID)
{
    foreach (GridViewRow gvr in gv.Rows) {
        GridViewRowHighlight(gvr, CheckBoxControlID);
    }
}

public static void GridViewRowHighlight(GridViewRow gvr, string CheckBoxControlID)
{
    string scriptFormat = "if(this.checked){{document.getElementById('{0}').className+=' {1}';}}else{{document.getElementById('{0}').className=document.getElementById('{0}').className.replace('{1}','');}};";
    string script = String.Format(scriptFormat, gvr.ClientID, DEstilos.HighlightStyle);
    CheckBox chk = (CheckBox)gvr.FindControl(CheckBoxControlID);
    if (chk.Checked) AddCssClass(gvr, DEstilos.HighlightStyle);
    else RemoveCssClass(gvr, DEstilos.HighlightStyle);
    chk.Attributes.Add("onclick", script);
}

public static void AddCssClass(WebControl control, string cssClass)
{
    List<string> classes = new List<string>(control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries));
    classes.Add(cssClass);
    control.CssClass = ToDelimitedString(classes, " ");
}

public static void RemoveCssClass(WebControl control, string cssClass)
{
    List<string> classes = new List<string>(control.CssClass.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries));
    classes.Remove(cssClass);
    control.CssClass = ToDelimitedString(classes, " ");
}

public static string ToDelimitedString(IEnumerable<string> list, string delimiter)
{
    StringBuilder sb = new StringBuilder();
    foreach (string item in list) {
        if (sb.Length > 0)
            sb.Append(delimiter);

        sb.Append(item);
    }
    return sb.ToString();
}
//End class
}

//External Class
public class DEstilos
{
public const string HighlightStyle = "highlight";
//End Class
}

所有这一切的作用是：对于gridview.Rows集合中的每个复选框，都会在复选框的onclick属性中添加一个JavaScript函数，这样当单击复选框的父行时，它会添加/删除Highlight样式。此外，如果默认选中/取消选中复选框，则添加/删除突出显示样式。

所有这一切只是为了确保每当进行回发时，带有所选复选框的行都会保留突出显示样式（当然，仅启用viewstate不会发生这种情况）。问题是gridview标记中定义的 RowStyle 和 AlternatingRowStyle css类似乎是“忽略”或“已删除< / strong>“，为什么？

UPDATE ：不使用jQuery或Prototype的解决方案会更好，除非这是当然这样做的唯一方法。

更新2,3 ：如果删除行：

if (chk.Checked) AddCssClass(gvr, DEstilos.HighlightStyle); else RemoveCssClass(gvr, DEstilos.HighlightStyle);
从GridViewRowHighlight方法
，然后将RowStyle和AlternatingRowStyle css类 DO 添加到HTML标记中，我得到了所需的效果，但在每次回发时都会删除高亮效果，同时复选框保持不变这是以前的状态。

感谢您的帮助！

Answer 1

我相信这是jQuery的主要候选者。调整HTML控件的CSS类很简单。

Answer 2

听起来你有两个问题：

呈现页面时，您正在设置的CSS类不受尊重。
您希望网格每行的复选框行为切换其父网格行的样式。

尝试解决问题＃2：

将<asp:CheckBox runat="server" ID="gvchkDelete" />更改为<asp:CheckBox runat="server" ID="gvchkDelete" OnClientClick="javascript:ToggleHighlight(this);" />

添加此javascript函数并确保其可以通过您的加载页面访问：

function ToggleHighlight(elem)
{  
  if(!elem)
  {
    return;
  }

  var gridRow = elem;

  while(gridRow.tagName != "TR" && gridRow.parentNode)
  {
    gridRow = gridRow.parentNode;
  }

  gridRow.className = elem.checked ? 
                      (gridRow.className + " highlight") :
                      gridRow.className.replace("highlight", "");
}

对于问题＃1，请验证您的CSS样式是否确实进入了渲染页面。

对于绕过服务器端代码的替代方法，您可以在页面加载时执行以下操作（这使用jQuery库）：

$(document).ready
(
  function()
  {
    $("input[id$=gvchkDelete]")
      .each
      (
        function()
        {
          ToggleHighlight(elem);
        }
      );
  }
);

为什么添加/删除这样的css类不起作用？

2 个答案: