office365 列表自定义与数据展示

总结：

一、列表数据的展示

1.可以在一个页中加入自定义的列表（如果用rest api会有权限问题），将列表隐藏。

2.在前台用Jquery来查调用列表数据，进行数据的展示。

二、列表数据的管理

xslt自定义列表数据（创，修，删）

1.自定义xslt 参见http://blog.csdn.net/wyaspnet/article/details/24517363

2.  main.xsl 
  internal.xsl

要保留，可以调用系统的定义路径及数据。

3.在apply-templates中加入<xsl:sort>排序。

<xsl:apply-templates select="/dsQueryResponse/Rows/Row">
    <xsl:sort data-type="number" select="@no" order="ascending"/>
 </xsl:apply-templates>

<Xsl>
<!--xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl" xmlns:ddwrt2="urn:frontpage:internal"
-->

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:pcm="urn:PageContentManager" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office" ddwrt:ghost="show_all">

  <xsl:include href="/_layouts/15/xsl/main.xsl"/>
  <xsl:include href="/_layouts/15/xsl/internal.xsl"/>

<xsl:output method="html" indent="yes"/>
   <xsl:template match="/" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:pcm="urn:PageContentManager" xmlns:o="urn:schemas-microsoft-com:office:office">
   
 <a href="msall.aspx" target="_self">管理</a>
 <table border="1">
 <tr>
 <td>选择</td>
  
 <td>序号</td>
 <td>广告标题</td>
  
 <td>图片</td>
 <td>图片说明</td>
  
 <td>链接地址</td>
 <td></td>
  
 </tr>
 <xsl:apply-templates select="/dsQueryResponse/Rows/Row">
    <xsl:sort data-type="number" select="@no" order="ascending"/>
 </xsl:apply-templates>
 
 </table>
 
 </xsl:template> 
  
    <xsl:template match="Row" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
     <xsl:param name="thisNode" select="."/>
      <xsl:variable name="titlevalue" select=">

 
 <tr>
 <td>
 <input type="checkbox" name="chid">
 
 <xsl:attribute name="value">
 
 <xsl:value-of select="@ID"/>
 
 </xsl:attribute>
 </input>
 </td>
 <td>
 <xsl:value-of select="@no"/>
 </td>
 <td>
 <xsl:value-of select="@Title"/>
 </td>
 <td>
 <img  width="100" height="30" alt="">
 <xsl:attribute name="src">
 
 <xsl:value-of select="@picimg"/>
 
 </xsl:attribute>
 </img>
 </td>
 <td>
 <xsl:value-of select="@linkurl.desc"/>
 
 </td>
 <td>
 <a target="_blank">
 <xsl:attribute name="href">
 
 <xsl:value-of select="@linkurl"/>
 
 </xsl:attribute>
 <xsl:value-of select="@linkurl"/>
 
 </a>
 </td>
 <td>
 <a>
 
 <xsl:attribute name="href">
 <xsl:value-of select="$FORM_EDIT"/>&amp;ID=<xsl:value-of select="@ID"/>&amp;ContentTypeId=<xsl:value-of select="@ContentTypeId"/>
 </xsl:attribute>
 编辑
 </a>
 
 </td>
 </tr>
 </xsl:template> 

</xsl:stylesheet></Xsl>
<DataFields>
</DataFields>
<XmlDefinition>

 

三、编辑

1.字段调用与隐藏

<div style="display:none">      
      <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="Edit" FieldName="picimg" __designer:bind="{ddwrt:DataBind('u',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@picimg')}"/>
      
       <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="picimg" ControlMode="Edit"/>
</div>
<div id="divimg">     
       <SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="Display" FieldName="picimg" __designer:bind="{ddwrt:DataBind('u',concat('ff5',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@picimg')}"/>
      
       <SharePoint:FieldDescription runat="server" id="ff5description{$Pos}" FieldName="picimg" ControlMode="Display"/>

</div>      

2.上传文档

<a href="javascript:cc()" runat="server">上传图片</a>
         <a href="javascript:bb()" runat="server">选择图片</a>
<script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script>
         
         <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
         
         <script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
         
         <script src="/_layouts/15/sp.js" type="text/javascript"></script>
         
         <script src="/_layouts/15/sp.ui.dialog.js" type="text/javascript"></script>
         

         <script type="text/javascript">
    var ss;
    $(document).ready(function(){
         // cc();
          var u=           $(&quot;input[title=&apos;picimg&apos;]&quot;).val();   
      $(&quot;#imgurl&quot;).attr(&quot;src&quot;,u);
   });
   function bb(){
     var options={
      arg:null,
      width:800,
      height:350,
      title:&quot;查看图片&quot;,
 

url:&quot;/adver/forms/slt.aspx&quot;,                 dialogReturnValueCallback:dialogCallback
    };         
              ss=SP.UI.ModalDialog.showModalDialog(options);
 
   }
  function cc(){          
   var options={
      arg:null,
      width:800,
      height:350,
      title:&quot;上传图片&quot;,
 url:&quot;/_layouts/15/upload.aspx?list=%7Bc1e7c6c2-928b-49d3-b880-3ade236330d0%7D&amp;rootfolder=&amp;isdlg=1&quot;,                 dialogReturnValueCallback:dialogCallback
    };         
              ss=SP.UI.ModalDialog.showModalDialog(options);
                               
                              
  }
  function dialogCallback(dialogResult,ReturnValue){        
    if(dialogResult==SP.UI.DialogResult.OK){                    $(&quot;input[title=&apos;picimg&apos;]&quot;).val(ss.$k_0.newFileUrl);       
    $(&quot;input[title=&apos;说明&apos;]&quot;).first().val(ss.$k_0.newFileUrl); 
    $(&quot;#divimg&quot;).html(&quot;<img src="+ss.$k_0.newFileUrl+" />&quot;);           
      alert(&quot;ok&quot;);
   }else{
      alert(&quot;non&quot;);
   }
  }      
        
        
  </script>