SharePoint 2010 列表字段之KPI

vivion34

　　目前加入了新项目组，正在了解详细设计及Demo，在了解过程中发现有要改进的地方，主要是界面的用户体验上，
　　Demo如下图

　　修改后的界面

　　在一定程序上美化了体验效果，这一列是如何实现的呢，下面就对这KPI列做进一步的讲解：
　　第一步：通过IE查看源文件发现，每个字段对应的CSS为 ms-vb2 ，如果熟悉Jquery的兄弟们，不能发现，我们可以通过Jquery 的Each 方法遍历，修改属性，为了更好的进行定位，输入的值要以KPI_开头，这个根据自己的需求自己定了，本文以KPI_为例。         



$(document).ready(function () {
$('TD.ms-vb2:contains("KPI_")').each(function () {
$(this).html(SetKpi($(this).html()));
});
});
　　上面的代码可以定位到要修改的栏。
　　第二步：设置SetKpi 方法，把栏的值修改一下，变成KPI图标显示，在引用Script之间要先引用Jquery，否则会报错



<script type="text/javascript">
var strImage = "";
var strAlt = "";
var kpiValue = "";
$(document).ready(function () {
$('TD.ms-vb2:contains("KPI_")').each(function () {
$(this).html(SetKpi($(this).html()));
});
});
function SetKpi(Value) {
kpiValue = Value.toString().split('_')[1];
strAlt = "完成率" + kpiValue + "%";
if (kpiValue >= 90) {
strImage = "kpipepperalarm-0.gif";
}
else if (kpiValue < 90 && kpiValue >= 75) {
strImage = "kpipepperalarm-1.gif"
}
else if (kpiValue < 75 && kpiValue >= 60) {
strImage = "kpipepperalarm-2.gif"
}
else {
strImage = "kpinormal-0.gif";
}
return "<img src='/_layouts/images/" + strImage + "' border='0' alt='" + strAlt + "' title='" + strAlt + "'>"
}
</script>
　　第三步：代码写好，如果把JS代码嵌套到页面里面呢，下面来介绍一下内容编辑WebPart，截图吧，这样更容易说明

　　注意事项，这里不能在内容编辑器里面直接写代码，因这是以文本的形式来呈现的，这时要点 编辑HTML源代码 ，之后会弹出来一个对话框，之后把相应的JS添加进去就可以了，
　　第四部：一定要记得保存啊，否则没有效果的
　　兄弟们来试试吧！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
　　预祝：IT兄弟们 周未愉快