根据条件改变GridView单元格背景颜色或者添加背景图片

Question

现在的GridView的各个单元格里都有数据，相应的Footer里也有所有的汇总数据，现在想根据每个单元格的数据，占汇总数据的百分比，设置此单元格的背景色或图片比如说某单元格的数据是30，汇总数据是100，想达到的效果是这个单元格的背景色只填充30%，可不可以做到背景色只填充30%的宽度，或者用背景图片只拉伸这个单元格宽度的30%请问怎么做到，在线求结果啊！

Answer 1

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if (e.Row.Cells[6].Text == "0")
            {
                e.Row.Cells[6].Text = "未处理";
            }
            else if (e.Row.Cells[6].Text == "1")
            {
                e.Row.Cells[6].Text = "已处理";
                e.Row.Cells[6].ForeColor = System.Drawing.Color.Red;
            }
            if (e.Row.Cells[7].Text == "False")
            {
                e.Row.Cells[7].Text = "未复核";
                ((Button)e.Row.Cells[7].FindControl("btn_check")).CommandName = "check";
                ((Button)e.Row.Cells[7].FindControl("btn_check")).Text = "复核";
            }
            else if (e.Row.Cells[7].Text == "True")
            {
                e.Row.Cells[7].Text = "已复核";
                ((Button)e.Row.Cells[7].FindControl("btn_check")).CommandName = "uncheck";
                ((Button)e.Row.Cells[7].FindControl("btn_check")).Text = "反复核";
                e.Row.Cells[7].ForeColor = System.Drawing.Color.Red;
            }
        }

Answer 2

like this?
http://www.cnblogs.com/insus/archive/2012/04/01/2429442.html

Answer 3

对，类似于这种效果，可是怎么动态应用到gridview里呢

Answer 4

在RowDataBound绑定数据的时候，取得单元格的值，然后创建一个lable，颜色自定义红色之类，然后根据值比如30%就指定lable的width=30,具体值要通过实际效果运算。
概要代码:
RowDataBound事件:
Label lbInfo = new Lable();
lbInfo.width=运算的百分比取得的宽度。
lbInfo.color=red;
e.Controls.Add(btnuser);
...

Answer 5

获取列名之后，取得数据相应的值，再参考刚才的产生动态图片来实现：
http://www.cnblogs.com/insus/archive/2012/10/24/2737483.html由于没有相关测试环境，Insus.NET只能提供相关的方法.
有问题可以再讨论。

Answer 6

我的GirdView整个都是自动生成的，没有TemplateField ，这种方法也可以吗，label会不会把我的数据挤走。。

Answer 7

如果真是全自动生成，那只有在sql实现了。拷贝一份前台生成的代码，然后套用在sql语句中，这样显示时，就是自动显示了。
下面例子，也是在sql成生好的，在GridView显示即可。
http://www.cnblogs.com/insus/archive/2010/12/28/1918684.html

Answer 8

这个需求，可不可以用jquery来实现呢？
jquery不是很熟，有没有大神指点下！

Answer 9

$("#GridView1 tr td:contains('1')").css("background-color","#ddd");这样写的效果是把GridView1里所有单元格包含1的背景色变成灰色
如果我想把 这个百分比的效果加进来，请问应该怎么做啊？

Answer 10

不管是前台还是后台你必须有个东西覆盖在数据所在的单元格上，我做的话可能在前台做，取得单元格的内容得出值换算需要的宽度，然后生成一个指定宽度颜色的div盖在单元格所在位置。

Answer 11

    $(function () {
     var col = $('#GridView1 td:nth-child(1):not(:last)'); // 选择单元格，比如第一列但除了最后一格总计， 单元格中必须是数字
     var total = $('#GridView1 td:nth-child(1):last').text(); // 总计数，比如第一列最后一格
     col.each(function () {
$(this).css({ width:'100px', textAlign:'center', position:'relative'})
.append('<div style="background:red; position:absolute; top:0; height:100%; width:'
+ $(this).text() / total * 100 + '%;"/>');
     });
    });