zoukankan      html  css  js  c++  java
  • 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.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在代码中设置断点:

     

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

     

    查看Items属性:

     

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

    运行结果:

     

    深入开发 

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

    完成后的样子:

     

    步骤:

    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、完成。添加一条过滤。原本位于结果中的项,移到了过滤清单中。

     

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

     

    jPoint下载:
    jPoint主页

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

  • 相关阅读:
    数据库使用动态监听导致EM起不来的解决方法
    OCP-1Z0-053-V12.02-115题
    OCP-1Z0-053-V12.02-150题
    OCP-1Z0-053-V12.02-136题
    OCP-1Z0-053-V12.02-154题
    OCP-1Z0-053-V12.02-149题
    OCP-1Z0-053-V12.02-146题
    OCP-1Z0-053-V12.02-160题
    OCP-1Z0-053-V12.02-157题
    OCP-1Z0-053-V12.02-164题
  • 原文地址:https://www.cnblogs.com/Sunmoonfire/p/1760459.html
Copyright © 2011-2022 走看看