修改jQuery进度条's基于Gridview列的颜色
Modifying jQuery progressbar's color based on Gridview column
我正试图根据gridview中每行的boloean值(布尔值)修改进度条的颜色。如果值为True,则颜色为绿色,如果值为False,则颜色将为红色。但由于某些原因,设置颜色的条件不起作用!
提前感谢:
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>
脚本:
</style>
<link href="CSS/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-ui-1.10.3%20.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function () {
$('.pbcontainer').each(function () {
var val = parseInt($(".value", this).text());
var status = $(".status", this).text();
var progressColor = "Orange";
var progressBackColor = "lightYellow";
console.log(status);
if (status == "False") {
progressColor = "Red";
//console.log("Condition met color red status Flase");
}
else if (status == "True") {
progressColor = "Green";
//console.log(progressColor);
//console.log("Condition not met color Green status True");
}
$('.progressbar', this).progressbar({ value: val });
$('.progressbar', this).css({ 'background': progressBackColor });
$('.progressbar > div', this).css({ 'background': progressColor });
});
});
</script>
由于状态周围有多余的空白,因此条件不成立。。
你需要修改你的代码来修剪空白,就像这个
var status = $.trim( $(".status", this).text() );
查看此演示http://jsfiddle.net/aXTcV/1/
试试这个:
<script type="text/javascript">
$(function () {
$('.pbcontainer').each(function () {
var this_Progress = $(this);
var val = parseInt($.trim(this_Progress.find('.value').text()));
var status = $.trim(this_Progress.find('.status').text())
var progressColor = "Orange";
var progressBackColor = "lightYellow";
console.log(status);
if (status == "False") {
progressColor = "Red";
//console.log("Condition met color red status Flase");
}
else if (status == "True") {
progressColor = "Green";
//console.log(progressColor);
//console.log("Condition not met color Green status True");
}
this_Progress.find('.progressbar').progressbar({ value: val });
this_Progress.find('.ui-progressbar').css({ 'background': progressBackColor });
this_Progress.find('.ui-progressbar-value').css({ 'background': progressColor });
});
});
</script>
相关文章:
- ExtJS 5用程序点击actioncolumn gridview
- d3基于用户选择动态更新节点
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 基于两个条件退出While循环
- 基于粒子的粘弹性流体表面张力问题
- 如何放置'选择'基于angularJS中数据的html选项
- 基于localStorage的Meteor激活模板
- 基于数据类型的编辑框的汇总列表
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 更改基于它的Select OPTION's INDEX(Jquery)
- 选择不在GridView-ASP.NET中激发
- 具有大型几何图形的基于沙发的空间查询
- 基于窗口宽度jquery的函数的替代方法是什么
- 如何使用javascript函数在gridview中按行启用/禁用复选框
- 基于下拉菜单创建开关
- 基于比较c#中gridview的文本框值来启用或禁用按钮
- 修改jQuery进度条's基于Gridview列的颜色
- 基于某些条件的Gridview行闪烁
- 基于权限的GridView编辑警报
- 如何更新一个文本框的值基于输入的另一个文本框在gridview使用javascript