SharePoint 2010 列表字段之KPI

目前加入了新项目组，正在了解详细设计及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兄弟们 周未愉快