在自定义字段类型的CAML中使用AJAX jQuery

it2022-05-05  59

本文将通过两种方式实现SharePoint 2007中自定义字段的CAML调用 jQuery AJAX。分别是:

1、传统的编写代码的方式,配合FLDTYPES_你的字段类型.xml,生成自定义字段类型。

2、使用jianyi的 SPCAMLEditor工具,直接修改某列表的字段的CAML。

前者可重用性高, 而后者简单快速,大家可以根据自己的情况进行选择。

我们知道,在字段的架构CAML中可以编写客户端代码,如HTML标记,CSS和Javascript代码。得益于jQuery AJAX的强大,我们可以进一步的在字段CAML中以异步方式处理与服务器端的查询,而不必重新加载页面。两者结合起来,一定可以极大丰富自定义字段的使用体验。

首先 ,我们来看传统编码方式的实现步骤:

新建一个项目, 本例中,我们直接使用类库项目。为其起一个名字:

复制12 hive目录(就是C:\Program Files\Common Files\Microsoft Shared\web server extensions\12,这是 Todd Bleeker的说法)的结构,以便放置自定义字段类型。根据需要重命名class1.cs(这里为QuickViewField.cs)

我们创建了XML文件夹来存放字段定义文件FLDTYPES_...,在这个文件里会调用jQuery。我们还创建了LAYOUTS\jQuery来存放jquery文件。你可以从http://jquery.com/下载它。

有很多方式可以引用jquery文件。你可以直接通过google引用,但这种方式不推荐用于生产环境。你也可以将其存放在_layouts下的某个地方,或者放在样式库中,完全看个人喜好了。

本例中,我决定把它放在LAYOUTS下。

接下来,你需要为你的组件添加一个强名。

现在,开始编写QuickViewFieldType.cs的代码:

public   class  QuickViewFieldType:SPFieldText {      public  QuickViewFieldType(Microsoft.SharePoint.SPFieldCollection fields,  string  typeName,  string  displayName)         :  base (fields, typeName, displayName)     { }      public  QuickViewFieldType(SPFieldCollection fields,  string  fieldName)         :  base (fields, fieldName)     { }      public   override   void  OnAdded(SPAddFieldOptions op)     {          base .OnAdded(op);          this .ShowInDisplayForm  =   false ;          this .ShowInEditForm  =   false ;          this .ShowInNewForm  =   false ;          this .Update( true );     } }

里面有2个默认的构造器。OnAdded覆写方法是为了确保该字段不会显示在Disp/Edit/NewForm.aspx中(也就是列表的显示,编辑,新建页面)。

然后,我们添加FLDTYPES_QuickViewField.xml到12\XML中,并编写其代码:

<? xml version="1.0" encoding="utf-8"  ?> < FieldTypes >    < FieldType >      < Field  Name ="TypeName" > QuickViewField </ Field >      < Field  Name ="TypeDisplayName" > 快速查看 </ Field >      < Field  Name ="TypeShortDescription" > 快速查看信息 </ Field >      < Field  Name ="ParentType" > Text </ Field >      < Field  Name ="FieldTypeClass" > QuickViewField.QuickViewFieldType, QuickViewField, Version=1.0.0.0, Culture=neutral, PublicKeyToken= c53268548ae274d8 </ Field >      < Field  Name ="UserCreatable" > TRUE </ Field >      < Field  Name ="ShowInListCreate" > TRUE </ Field >      < Field  Name ="ShowInSurveyCreate" > TRUE </ Field >      < Field  Name ="ShowInDocumentLibraryCreate" > TRUE </ Field >      < RenderPattern  Name ="HeaderPattern" >        < HTML >          <![CDATA[ <script type="text/javascript" src="/_layouts/jQuery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var columnlabels = new Array("标题 :","创建者 :","修改者 :","修改时间 :","创建时间 :","文件大小 :","版本 :","Url :","内容类型 :"); var columns = new Array("ows_Title","ows_Author","ows_Editor","ows_Modified","ows_Created","ows_FileSizeDisplay","ows__UIVersionString","ows_EncodedAbsUrl","ows_ContentType"); function GetProperties(Document) { CurrentId=Document; var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \ <soapenv:Body> \ <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \ <listName> ]]>        </ HTML >        < ListProperty  Select ='Name' />        < HTML >          <![CDATA[ </listName> \ <query> \ <Query><Where><Eq><FieldRef Name='ID' /><Value Type='Counter'>"+Document+"</Value></Eq></Where></Query> \ </query> \ <viewFields> \ <ViewFields> \ <FieldRef Name='Title'/><FieldRef Name='Author'/><FieldRef Name='Created'/><FieldRef Name='Editor'/><FieldRef Name='FileSizeDisplay'/><FieldRef Name='_UIVersionString'/><FieldRef Name='File_x0020_Size'/><FieldRef Name='Last_x0020_Modified'/><FieldRef Name='ContentType'/><FieldRef Name='EncodedAbsUrl'/> \ </ViewFields> \ </viewFields> \ </GetListItems> \ </soapenv:Body> \ </soapenv:Envelope>"; $.ajax({ url: "/_vti_bin/lists.asmx", type: "POST", dataType: "xml", data: soapEnv, complete: ReadProperties, contentType: "text/xml; charset=\"utf-8\"" }); } function ReadProperties(xData, status) { $("#__"+CurrentId).text(''); $("#__"+CurrentId).fadeIn('slow'); $(xData.responseXML).find("z\\:row").each( function() { for(var i=0;i<columns.length;i++) $("#__"+CurrentId).append('<div class=ms-toolbar><b>'+columnlabels[i]+'</b>'+StripIDs($(this).attr(columns[i]))+'</div>'); }); } function StripIDs(InputString) { if(InputString == undefined || InputString == '') return ''; if(InputString.indexOf(';#')!=-1) { return InputString.substring(InputString.indexOf(';#')+2); } return InputString; } </script> ]]>        </ HTML >      </ RenderPattern >      < RenderPattern  Name ="DisplayPattern" >        < HTML > <![CDATA[ <table><tr><td><span class="ms-toolbar" id="__ ]]> </ HTML >        < Column  Name ="ID" />        < HTML > <![CDATA[ "></span></td><td><img οnclick="if(this.src.indexOf('RECURSML')!=-1) {GetProperties(' ]]> </ HTML >        < Column  Name ="ID" />        < HTML >          <![CDATA[ ');this.src='_layouts/images/CHECK.GIF';} else {$('#__ ]]>        </ HTML >        < Column  Name ="ID" />        < HTML >          <![CDATA[ ').fadeOut('slow');this.src='_layouts/images/RECURSML.GIF';}" src="_layouts/images/RECURSML.GIF"/></td></tr></table> ]]>        </ HTML >      </ RenderPattern >    </ FieldType > </ FieldTypes >

里面的完成的主要工作是声名我们的字段类型(记得替换其中的公钥),告诉SharePoint要调用哪个类库。此外,还定义了HeaderPattern和DisplayPattern。在HeaderPattern中,我们引用了jquery文件并构建了一个函数来执行一个到标准的SharePoint “list.asmx”服务的CAML查询。接下来,读取返回的属性并创建必要的HTML,然后使用一些漂亮的jQuery特效(fade-in,fade-out)显示其内容。

完成后,就可以通过WSPBuider(或其他类似的工具)编译并部署解决方案了。

在SharePoint里为列表创建一个栏,选择我们的自定义字段类型: 

在AllItems.aspx列表视图中,可以看到我们的自定义字段功能如下:

点击同步双箭头小图片,有关文档的属性会直接显示出来,不需要刷新页面。你可以根据需要改造这个功能,使用相同的技术执行其他一些更酷的查询。例如重其他列表中获取数据,从搜索结果中获取数据等等。

相同效果也使用SPCAMLEditor完成。

打开SPCAMLEditor,导航到目标列表,直接复制一个已有的“编辑”字段,在其基础上修改SchemaXml即可。

注意到没法编写HeaderPattern的内容。因此,需要在页面上拖放一个内容编辑器WebPart,以便存放Header里的脚本。

内容编辑器中的代码如下:

< script type = " text/javascript "  src = " /_layouts/jQuery/jquery-1.4.2.min.js " >< / script> < script type = " text/javascript " > var  columnlabels  =   new  Array( " 标题 : " , " 创建者 : " , " 修改者 : " , " 修改时间 : " , " 创建时间 : " , " 文件大小 : " , " 版本 : " , " Url : " , " 内容类型 : " ); var  columns  =   new  Array( " ows_Title " , " ows_Author " , " ows_Editor " , " ows_Modified " , " ows_Created " , " ows_FileSizeDisplay " , " ows__UIVersionString " , " ows_EncodedAbsUrl " , " ows_ContentType " ); function  GetProperties(Document) { CurrentId = Document; var  soapEnv  =   " <soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> <soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName> thumbnails </listName><query><Query><Where><Eq><FieldRef Name='ID' /><Value Type='Counter'> " + Document + " </Value></Eq></Where></Query></query><viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='Author'/><FieldRef Name='Created'/><FieldRef Name='Editor'/><FieldRef Name='FileSizeDisplay'/><FieldRef Name='_UIVersionString'/><FieldRef Name='File_x0020_Size'/><FieldRef Name='Last_x0020_Modified'/><FieldRef Name='ContentType'/><FieldRef Name='EncodedAbsUrl'/></ViewFields></viewFields></GetListItems></soapenv:Body></soapenv:Envelope> " ; $.ajax({ url:  " /_vti_bin/lists.asmx " , type:  " POST " , dataType:  " xml " , data: soapEnv, complete: ReadProperties, contentType:  " text/xml; charset=\ " utf - 8 \ "" }); } function  ReadProperties(xData, status) { $( " #__ " + CurrentId).text( '' ); $( " #__ " + CurrentId).fadeIn( ' slow ' ); $(xData.responseXML).find( " z\\:row " ).each( function () { for ( var  i = 0 ;i < columns.length;i ++ ) $( " #__ " + CurrentId).append( ' <div class=ms-toolbar><b> ' + columnlabels[i] + ' </b> ' + StripIDs($( this ).attr(columns[i])) + ' </div> ' ); }); } function  StripIDs(InputString) { if (InputString  ==  undefined  ||  InputString  ==   '' return   '' ; if (InputString.indexOf( ' ;# ' ) !=- 1 ) { return  InputString.substring(InputString.indexOf( ' ;# ' ) + 2 ); } return  InputString; } < / script>

注意替换其中的listName为你实际的列表名。

运行后看到的效果与上面第一种方式相同。 

参考资料

Using AJAX Jquery-like in the CAML of Custom Field Types 

转载于:https://www.cnblogs.com/Sunmoonfire/archive/2010/07/16/1778340.html

相关资源:数据结构—成绩单生成器

最新回复(0)