Question

我正在寻找在我的GridView中编辑的行的样式。

我知道如何更改背景颜色和字体，但我需要的是它看起来像是在网格上，就像阴影一样，编辑的行必须真正突出显示。

我的styles.css：

.grid_normalRow /*on mouse out event*/
{
       background-color:white;
}
.grid_highlightedRow /*on mouse over event*/
{
       background-color:aqua;
}
.grid_editedRow /*on row editing event - The one i need to change */
{
       background-color:yellow;
       font-weight: bold;
       height: 30px;

}

我找不到合适的CSS风格来完成我的要求。

Answer 1

您如何看待这种方法？

编辑：如果您使用的是表格，则可以通过在display: block上添加tr来制作Box Shadow。我更新了Codepen以显示其工作原理。

＆＃13;

.grid_editedRow
/*The one i need to change*/

{
  background-color: lemonchiffon;
  font-weight: bold;
  height: 30px;
  border: 1px solid;
  box-shadow: 0 0 5px black;
}
.grid_normalRow
/*on mouse out event*/

{
  /* adding bg color messes with the shadow effect */
  /* background-color:white; */
}
.grid_highlightedRow
/*on mouse over event*/

{
  background-color: aqua;
}
tr {
  display: block;
}

＆＃13;

<table>
  <tr class="grid_normalRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
  <tr class="grid_editedRow">
    <td>Hi</td>
    <td>How</td>
    <td>Are</td>
    <td>you?</td>
  </tr>
  <tr class="grid_normalRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
  <tr class="grid_highlightedRow">
    <td>yet</td>
    <td>another</td>
    <td>grid</td>
    <td>row</td>
  </tr>
</table>

＆＃13;

您可以在此Codepen

中看到效果

Answer 2

首先在gridview行编辑功能中设置行的css。

    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        GridView1.EditRowStyle.CssClass = "EditRow";
        GridView1.DataBind();
    }

然后将css设置为

    .EditRow 
    {
    background-color:yellow;
    border-radius: 5px;
    box-shadow: 1px 1px 6px 4px #000;
    font-weight: bold;
    height: 30px;
    }

你可以使用border-radius和box-shadow值稍微玩一下，使它成为你最喜欢的方式

已编辑行GridView ASP.NET的自定义样式

2 个答案: