如何使用jquery基于列值突出显示gridview行

时间:2014-04-10 02:40:34

标签: jquery asp.net gridview

  • 我想突出显示最大id_column的gridview行。我使用了代码隐藏逻辑。
  • 可以使用客户端脚本吗?
  • 请帮忙

ASP.NET

 public void Bind_grid(ref DataTable DT, ref GridView GRID)
        {
            GRID.DataSource =  DT;
            GRID.DataBind();
            if (DT.Rows.Count == 0)
            {
                msg += "No DATA Found \\n";
            }
            else
            {
                var maxVal = DT.AsEnumerable().Max(r => r.Field<int>("ts_id"));
                DataRow[] rows = DT.Select("ts_id = '" + maxVal + "'");
                int updat_row = DT.Rows.IndexOf(rows[0]);
                GRID.Rows[updat_row].BackColor = Color.CadetBlue;
            }     
       }

1 个答案:

答案 0 :(得分:0)

我认为你需要做以下事情。 要访问基于我们需要决定行颜色的列,您可以在项目模板内的字段中添加一个类(请参阅aspx代码)。这个类将用于选择所有控件,以便我们可以循环访问它并检查控件的值。

这是一个简单的gridview,只有一列和一个隐藏字段,用于存储maxvalue

<asp:HiddenField ID="maxValForGrid" ClientIDMode="Static" runat="server" />
<asp:GridView ID="gridview1" runat="server">
    <Columns>
        <asp:TemplateField ItemStyle-BorderColor="Red" ItemStyle-BorderWidth="1px">
            <ItemTemplate>
                <asp:Label ID="testfield" CssClass="idcol" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>

</asp:GridView>

以下是创建数据表并将其设置为网格数据源的示例服务器代码。

protected void Page_Load(object sender, EventArgs e)
{
   DataTable dt = new DataTable();
   dt.Columns.Add(new DataColumn("Id",typeof(Int32)));
   DataRow row = dt.NewRow();
   row[0] = "1";
   dt.Rows.Add(row);
   row = dt.NewRow();
   row[0] = "2";
   dt.Rows.Add(row);
   row = dt.NewRow();
   row[0] = "2";
   dt.Rows.Add(row);
   maxValForGrid.Value = dt.AsEnumerable().Max(r => r.Field<int>("Id")).ToString();
   gridview1.DataSource = dt;
   gridview1.AutoGenerateColumns = false;
   gridview1.DataBind();
}

这是执行工作的javascript

    $(document).ready(function () { 
        var maxVal = $("#maxValForGrid").val();
        $(".idcol").each(function () { 
            if($(this).text() === maxVal){
                $(this).parent().parent().css("background-color", "Plum");
            }  
        }); 
    });

示例输出

Sample output