通过jQuery控制SharePoint展现——计算栏KPI和标签云

计算栏KPI

MOSS 2007本身具有创建KPI列表的能力，但是必须是企业版才能使用该功能。

基于项目管理的目的，我需要跟踪某个列表中的一些关键的里程碑的状态，并分别用红，绿，黄灯来形象的指示里程碑的状态。这个状态可能代表了截止日期，抑或是其他的一些关键状态值。

我们可以使用计算栏来输出最终需要的结果，然后通过jQuery处理这些结果，为其增加些视觉效果 ，使其变得更加形象生动。完成后如下所示：

以前我们往往用计算栏来实现一些复杂的公式计算并输出相应的HTML内容，这里其实可以直接输出一个图片——比如，“/_layouts/images/kpiryg-0.gif”。这中方式是可行的，尽管会需要编辑服务器12 目录下的fldtypes.xml文件。这里，我希望介绍的是一种更加面向最终用户的方式。

在本例中 ，我简单创建了一个列表，用单行文本字段存放了三种值：“KPI_Green”,“KPI_Yellow”,“KPI_Red”。如果你是用计算栏，那么只需要输出这三种值就可以了。

接下来，只需要在页面上添加一个内容编辑器WebPart，并粘贴下列的脚本到HTML源编辑器即可。代码中使用jQuery的标签选择器选中所有CSS类为“ms-vb2”并且包含“KPI_Green”,“KPI_Yellow”,“KPI_Red”的TD元素。 然后遍历这些元素，将其隐藏，并设置相应的html内容，然后以一个漂亮的滑动效果重新显示这些元素。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 
<script type="text/javascript">
 $(document).ready(function() {
 
$('TD.ms-vb2:contains("KPI_Green"),TD .ms-vb2:contains("KPI_Yellow"),TD .ms-vb2:contains("KPI_Red")').each(function()
    {
        $(this).hide();
            $(this).html(SetColour($(this).html()));
            $(this).show("slow");
    });
  });
 
function SetColour(Value)
{
var strImage = ""
switch(Value)
{
 
        case "KPI_Green" :
strImage = "kpidefaultlarge-0.gif"
        break;
 
        case "KPI_Yellow" :
strImage = "kpidefaultlarge-1.gif"
        break;
 
        case "KPI_Red" :
strImage = "kpidefaultlarge-2.gif"
        break;
}
 
return "<IMG src='/_layouts/images/" + strImage + "' border='0'>"
}
</script>

标签云

标签云可以用于快速定位SharePoint列表项或文档。使用方法也很简单。只需要在任何现有的列表或库上添加一个单行文本类型的自定义栏——“Tags”即可。接下来就是在编辑列表项时为其添加上一个或多个标签。（多个标签用分号隔开）。这里还是在上面用的KPI列表上进行演示，如下图所示：

添加好后的演示数据：

标签的最终目标是为了检索列表项。对于最终用户，只需要点击自己关心的标签就可以快速找到相应的项。这也是我们将实现的目标。

先来看一下运行效果：

点击其中的一个标签，比如“SharePoint”。弹出对话框，列出所有包含SharePoint标签的列表项。

该解决方案的执行过程为：

1、查询一个SharePoint列表，构建出所有的标签

2、使用jQuery来创建标签云

3、当用户点击某个标签时，查询该列表找到所有包含该标签的项

4、弹出一个jQuery对话框显示所有匹配的项（这里可以根据你的实际应用添加相应的链接或内容）

注意：本解决方案只针对一个列表。对于多个列表，跨网站，网站集的情况不在本文讨论范围内。

我会用到下面这些工具：

1、SPServices

2、DynaCloud jQuery插件

首先要做的也是在页面中添加脚本和CSS文件的引用，我采取的方式是用SharePoint Designer添加到页面的<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">里。内容如下：

 

?
1
2
3
4
5
<script type="text/javascript" src="/_layouts/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/_layouts/scripts/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="/_layouts/scripts/jquery.SPServices-0.5.6.min.js"></script>
<script type="text/javascript" src="/_layouts/scripts/jquery.dynacloud-5.js"></script>
<link type="text/css"  rel="stylesheet" href="/_layouts/scripts/css/smoothness/jquery-ui-1.7.3.custom.css"/>

剩下的工作就是在该页面上添加内容编辑器WebPart，并在HTML源编辑器中编写我们的代码。为了大家方便理解，这里我们将分段进行解释，完整的代码会列在最后面。

首先，我们要查询列表，以构建我们的标签云数据源。这里用到了Marc编写的SPServices库，方便我们进行SharePoint Web服务的调用。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "KPI",
    CAMLViewFields: "<ViewFields><FieldRef Name='Tags' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName=z:row]").each(function() {
 
         $('#CloudContent').append($(this).attr("ows_Tags").replace(/;/g, " "));
 
         $('#CloudContent').append(" ");
 
      });
 
    }
  });

我们遍历所有结果，将结果标签（其中的“;”替换为空格）附加到一个ID为CloudContent的DIV元素。

然后，我们只是简单的调用了DynaCloud插件，即可对标签施展魔法，使其变成标签云。

?
1
2
3
$.dynaCloud.sort = true;
   $("div.dynacloud").dynaCloud();
   $('#CloudContent').hide();

有关该插件的详细选项可参考其完整的文档。

此时的标签云已经变的很漂亮了。但是点它时不会做任何事。DynaCloud插件的初衷是在一个网页的文本区以外创建一个标签云，点击标签时高亮显示文本。这显然对我们没有用，因此需要对该插件的代码做些修改。

在SharePoint Designer中打开插件文件，将图中的位置进行替换。

其中把高亮显示文本替换成打开一个对话框，以便显示我们的检索结果。所以我们的页面上还要定义一个queryTagList函数。在该函数中：

1、清空将用于在jQuery对话框中显示的DIV

2、通过SPServices查询列表。通过所点击的标签过滤结果集。

3、使用得到的结果集构建将要显示在对话框中的HTML内容。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function queryTagList(textToQuery)
{
 
  $('#dialog').html("");
 
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "KPI",
    CAMLQuery: "<Query> \
   <Where> \
      <Contains> \
         <FieldRef Name=\"Tags\" /> \
         <Value Type=\"Text\">" + textToQuery + "</Value> \
      </Contains> \
   </Where> \
   <OrderBy> \
      <FieldRef Name=\"Title\" Ascending=\"True\" /> \
   </OrderBy> \
</Query>",
    CAMLViewFields: "<ViewFields><FieldRef Name='Tags' /><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("[nodeName=z:row]").each(function()    {
 
      if ($(this).attr("ows_Tags").indexOf(textToQuery) > -1)
      {
         //We want the dialog to close when someone opens a form
         var mouseup = "$('#dialog').dialog('close');";
 
         var url = "<div>"+  $(this).attr("ows_Title") + "</div>"
 
         $('#dialog').append(url)
         $('#dialog').dialog('option','show', 'blind');
         $('#dialog').dialog('option', 'width', 400);
         $('#dialog').dialog('option', 'height', 200);
         $('#dialog').dialog('open');
 
      }
 
      });
 
    }
  });
 
}

以下是完整的代码：

 

参考资料

Use jQuery to Create KPIs out of Calculated Columns

Use jQuery to Create a Tag Cloud

posted @   Sunmoonfire  阅读(2846)  评论(2)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2007-08-13 通过主机标头实现多个SharePoint Web应用程序共用一个端口
点击右上角即可分享
微信分享提示