jPoint开发简介

jPoint是一套开源的用于SharePoint的javascript API框架。jPoint本身基于jQuery,继承了 jQuery快速、敏捷的特性,同时更扩充了针对SharePoint表单,页面,Web服务通讯等等的一些操作。另外还内置了一些有用的jPart插件。在我们进行SharePoint客户端脚本开发时jPoint框架不失为一套得力工具。

jPoint当前版本是针对SharePoint 2007的,SharePoint 2010的话本身提供了客户端对象模型已经非常完整了。

jPoint目前主要包括了以下几大块的内容:

  • 表单(Form)
  • 列表(List)
  • WebPart
  • Web Service

注意:撰写本文时jPoint版本是0.8 beta。由于该项目本身在不断更新,文中内容可能会有出入。 

开始工作

首先添加对库的引用。 如果想快速开始,可以添加引用:

<script src="//sharejpoint.googlecode.com/files/jPointLoader.js"></script>

我更倾向于使用直接引用的方式:

< script src = " /Asset/js/jQuery.js " >< / script>
< script src = " /Asset/js/jPoint.min.js " >< / script>

 其中“Asset"是我的SharePoint站点下的一个文档库,js是文件夹。将下载中的js文件上传到该文件夹下,方便以后引用。

实例

我们通过一个实例,进一步体会一下jPoint的优点。本实例试图通过脚本,得到当前用户所属的部门。需要注意的是,这里并不会通过调用用户配置文件相关的web service(之所以如此,相信用过的人都知道。一般用户的权限问题。这里就不详述了),而是通过分析用户信息页面的方式。

在SharePoint中,当前用户都可以通过点击页面右上方的欢迎按钮->“我的设置” ,进入自己的用户信息页。

jPoint开发简介_第1张图片

从该页面中,可以看到有我们需要的部门信息。我们会利用jPoint.userprofile.js来抓取到该信息。代码很简单:

 

代码
< script src = " /Asset/js/jQuery.js " >< / script>
< script src = " /Asset/js/jPoint.min.js " >< / script>
< script src = " /Asset/js/jPoint.userprofile.js " >< / script>
< div id = outdiv  / >
< script >
$(document).ready(
function (){
  
var  user  =  jP.getUserProfile();
  
var  out  =   "" ;
  out 
+=   " <b>当前用户所属部门为: <font color='#ee6699'> " + user.Department + " </font></b> "
  $(
" #outdiv " ).html(out);
});
< / script>

 

为了能够深入观察jPoint的对象,我们可以在firefox浏览器中通过firebug在代码中设置断点:

jPoint开发简介_第2张图片 

点击user对象,查看其详细属性:

jPoint开发简介_第3张图片 

查看Items属性:

jPoint开发简介_第4张图片 

可以看到,经过jPoint包装,操作SharePoint用户对象变的非常容易!

运行结果:

 

深入开发 

下面我们做一个更复杂一点的开发。编写一个简化版搜索结果过滤器。原理是在SharePoint搜索结果中的项上添加一个javascript操作,可以将该条结果项添加到一个名为“结果过滤”的自定义列表中。然后,通过css样式(这也是之所以称为简化版的原因。比较地道的做法当然是通过服务器端对象模型取得整个结果集,再依据前面的结果过滤列表进行过滤处理)将该条结果项隐藏起来。为了直观和实验操作方便,我们会直接把添加的过滤项显示在结果页右侧,并挂接了“编辑”,“删除”等操作。

完成后的样子:

 jPoint开发简介_第5张图片

步骤:

1、为了方便的通过jQuery得到结果项,我们需要对默认的结果显示xsl进行加工,添加自己的标签。

修改核心搜索结果WebPart,数据视图属性,xsl编辑器。以下是完整的xsl代码,加粗显示部分为我们添加的标签。

<!-- Main body template. Sets the Results view (Relevance or date) options -->
<xsl:template name="dvt_1.body">
  
<div class="srch-results">
  
<xsl:if test="$ShowActionLinks">
  
<div class="srch-sort"> <xsl:value-of select="$ResultsBy" /> 
   
<xsl:if test="$ViewByUrl">  
......
  
<br /><br />
  
</xsl:if>
  
<xsl:apply-templates select="*" />

  
</div>  
  
<xsl:call-template name="DisplayMoreResultsAnchor" />

</xsl:template> 

2、在结果项后面添加一个操作项。以便用户点击进行添加过滤操作。

还是在核心搜索结果WebPart,数据视图属性的xsl代码里,加粗显示部分为我们添加的标签。

<!-- This template is called for each result -->
<xsl:template match="Result"> 
  
<xsl:variable name="id" select="id"/>
  
<xsl:variable name="url" select="url"/>
  
......
  
<span class="srch-Title">
   
<href="{$url}" id="{concat('CSR_',$id)}" title="{$url}">
    
<xsl:choose>
     
<xsl:when test="hithighlightedproperties/HHTitle[. != '']">
         
<xsl:call-template name="HitHighlighting">
          
<xsl:with-param name="hh" select="hithighlightedproperties/HHTitle" /> 
         
</xsl:call-template>   
     
</xsl:when>
     
<xsl:otherwise><xsl:value-of select="title"/></xsl:otherwise> 
    
</xsl:choose>
   
</a><img src="/_layouts/images/blank.gif" width="18px" height="1px" alt=""/>
   
<href="javascript:filterAction('{$url}')">
   
<img src="/_layouts/images/delete.gif" alt="" border="0"/></a>
    
<br/> 
   
</span>

 3、接下来,在页面右侧拖放一个表单WebPart,用于放置我们的jPoint代码。

样式

代码

库的引用

< script  type ="text/javascript"  src ="/Asset/js/jquery.js" ></ script >
< script  src ="/Asset/js/jPoint.min.js"  type ="text/javascript" ></ script >
< script  src ="/Asset/js/popup.js"  type ="text/javascript" ></ script >

这里的popup.js是一个消息框的库,不是重点。点此下载

放一个div来容纳输出的结果信息。

<div id="outtable" class="ms-WPBody"></div>

点击结果项后的添加过滤操作,执行的javascript代码:

var stringFiltervalue = "" ;
function filterAction(str)
{
    var siteurl
= " / " ;
    var listname
= " 结果过滤 " ;
    stringFiltervalue
= str;
    stringFiltertitle
= $( " div .srch-results>div:[title=' " + str + " ']>span.srch-Title " ).text();
    
try
    {
        var list
= jP.Lists.setSPObject(siteurl,listname);
        var querybeforeadd
= " <Where><Eq><FieldRef Name='Title'></FieldRef><Value Type='Text'> " + stringFiltervalue + " </Value></Eq></Where> " ;
        list.getSPItemsWithQuery(querybeforeadd);
        
if (list.ItemCount > 0 )
        { 
            ShowConfirm(
' 确定 ' , ' 该项目已添加过滤,是否取消对其的过滤? ' , ' Button4 ' , '' , 340 , 80 );
            
return ;
        }
        
else
        {
            var addresult 
=  list.updateItem([{id: 0 , Title:stringFiltervalue,Description:stringFiltertitle}]);
            
if (addresult.id !=   - 1  )
            {
                ShowAlert(
' 提示框 ' , ' 已添加过滤  " ' + stringFiltertitle, 200 , 100 );
displayFilter();
            }
        }
    }
    
catch (e)
    {
        alert(e.toString());
    }
} 

其中,使用了jPoint的列表相关操作。首先查询是否已经添加了该项的过滤。然后调用updateItem添加一条列表项。

下面是取消过滤,即删除列表项的代码:

function delFilter()
{
    var siteurl
= " / " ;
    var listname
= " 结果过滤 " ;
    var stringvalue
= stringFiltervalue;
    
try
    {
        var list
= jP.Lists.setSPObject(siteurl,listname);
        var querybeforeadd
= " <Where><Eq><FieldRef Name='Title'></FieldRef><Value Type='Text'> " + stringvalue + " </Value></Eq></Where> " ;
        list.getSPItemsWithQuery(querybeforeadd);
        
if (list.ItemCount > 0 )
        { 
            var data
= list.JQueryData;
            
for (var j = 0 ;j < data.length;j ++ )
            {
                var idvalue
= $(data[j]).attr( " ows_ID " );
                var delresult
= list.deleteItem(idvalue);
var descriptionvalue
= $(data[j]).attr( " ows_Description " );
                
if (delresult.errorCode == 0 )
                {
                    ShowAlert(
' 提示框 ' , ' 已取消过滤  ' + descriptionvalue, 200 , 100 );
$(
" div .srch-results>div:[title=' " + stringvalue + " '] " ).removeClass( " ms-Hidden " );
displayFilter();
                }
            }
        }
    }
    
catch (e)
    {
    alert(e.toString());
    } 
}

其中,也是使用了jPoint的列表操作。首先查询是否存在该过滤项。然后调用deleteItem删除一条列表项。

显示过滤项的清单:

function displayFilter()
{
    var siteurl
= " / " ;
    var listname
= " 结果过滤 " ;
    
try
    {
        var list
= jP.Lists.setSPObject(siteurl,listname);
        var query 
=   " <OrderBy><FieldRef Name='ID' Ascending='FALSE' /></OrderBy> " ;       
        list.getSPItemsWithQuery(query);      
        var data 
=  list.JQueryData;
        
// 解包data到items
        var items  =  {};
        
for (var j = 0 ; j  <  data.length; j ++ )
        {
            var ItemFields 
=  data[j].attributes;
            items[j] 
=  {};
            
for  (i = 0 ; i < ItemFields.length; i ++ )
            {
              var ItemFieldName 
=  ItemFields[i].name.replace( / ows_ / i,  "" ).replace( / _x0020_ / g,  "" );
              items[j][ItemFieldName]
= ItemFields[i].value;
            }
        }
        var 
out   =   " <div class='ms-nav ms-quicklaunch' style='padding:4px'><a>结果过滤</a></div> " ;
        $.each(items, function (i, v){
out   +=   " <div class='xwbuitems'><A href=' " + v.LinkTitle + " '  target='_blank' > " + v.Description + " </A><A href='/Lists/UrlFilterList/DispForm.aspx?ID= " + v.ID + " ' target='_blank'  title=' " + v.LinkTitle + " '><img src='/_layouts/images/edit.gif' border=0 alt='编辑' /></A><A  href=\ " javascript:delfromlinklist( ' "+v.LinkTitle+" ' )\ "  ><img src='/_layouts/images/delete.gif' border=0 alt='删除' /></A></div> " ;
$(
" div .srch-results>div:[title=' " + v.LinkTitle + " '] " ).addClass( " ms-Hidden " );    
    });       
        $(
" #outtable " ).html( out );
     }
    
catch (e)
    {
        alert(e.toString());
    }
}

加粗的一句为使用css对结果项进行隐藏。 也可以先不隐藏。这时再次点击同一结果项,会询问是否取消该项的过滤。看个人喜好了。主要考虑将来采用服务器端结果集过滤时会使用这种方式的操作。

其中用到的在结果项清单中删除当前项的代码:

 

function  delfromlinklist(str)
{
stringFiltervalue
= str;
delFilter();
}

 

在页面加载后显示过滤:

$(document).ready( function (){
displayFilter();
      });    

上面还用到一个隐藏按钮,用于确认确认框里的事件调用(不是重点,popup.js的要求):

 

< input  type ="button"  id ="Button4"   onclick ="delFilter()"  value ="test"  style ="visibility: hidden; display: none" />

 

 

4、完成。添加一条过滤。原本位于结果中的项,移到了过滤清单中。

 jPoint开发简介_第6张图片

打开该过滤项,可以看到其确实已经存放在SharePoint列表中。 

jPoint开发简介_第7张图片 

jPoint下载:
jPoint开发简介_第8张图片

API文档:http://www.sharejpoint.com/docs/api/jpoint%20api.aspx 

你可能感兴趣的:(poi)