我有一个Gridview,其中包含一个包含进度条值的列。我设法显示每行的进度,但我正在寻找一种方法来改变进度条的颜色,基于另一列布尔值(True / False)。如果值为True,则颜色变为绿色。如果值为False,则颜色变为红色。 我已经改变了一个进度条颜色,但是我无法在每一行的Gridview中做到这一点!布尔列为状态,进度条值为进度。
提前致谢!
ASP:
中的GridView更新
<Columns>
<asp:TemplateField>
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="progress" HeaderText="Progress" SortExpression="progress" />
<asp:BoundField DataField="status" HeaderText="status" SortExpression="status" />
<asp:TemplateField>
<ItemTemplate>
<div class="pbcontainer">
<div class="progressbar"><span><%# Eval("progress") %>%</span></div>
<div class="value" style="visibility:hidden; height:0; width:0;"> <%# Eval("progress") %> </div>
<div class="status" style="visibility:hidden; height:0; width:0;"> <%# Eval("status") %> </div>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
脚本:
更新:
<script>
$(function () {
$('.pbcontainer').each(function () {
var val = parseInt($(".value", this).text());
var status = $(".status", this).text();
var progressColor = "Orange";
var progressBackColor = "lightYellow";
if (status == "False") {
progressColor = "Red";
console.log(progressColor);
}
else {
progressColor = "Green";
console.log(progressColor);
}
$('.progressbar', this).progressbar({ value: val });
$('.progressbar', this).css({ 'background': progressBackColor });
$('.progressbar > div', this).css({ 'background': progressColor });
});
});
</script>
修改:我已经更新了代码,但颜色仍然是绿色!喜欢If语句不起作用?!
答案 0 :(得分:0)
在您的代码段中,隐藏字段中的值与进度范围中的值相同。所以你宁愿使用相同的值来决定着色。
<强>更新强>
例如你要说两行值为true和false
<div class="progressbar"><span>70%</span></div>
<div class="progressbar"><span>20%</span></div>
<div class="status" style="visibility:hidden; height:0; width:0;">true</div>
<div class="status" style="visibility:hidden; height:0; width:0;">false</div>
现在,您可以读取每个项目中的值并相应地为它们着色。
var progressColorRed = "Red";
var progressColorGreen = "Green";
var progressBackColor = "lightYellow";
var progressLate = true;
$('.progressbar').each(function(index, item) {
var progressValue = $(".status").eq(index).text();
console.log(progressValue);
if(progressValue == "true")
{
$(item).css({ 'background': progressBackColor });
$(item).css({ 'background': progressColorGreen });
}
else
{
$(item).css({ 'background': progressBackColor });
$(item).css({ 'background': progressColorRed });
}
});
这里是fiddle demo相同的