Sharepoint2010使用AJAx 获取 OData Service （jQuery的集成与持久化 ）---第二篇

 

我上篇《Sharepoint2010使用AJAx 获取 OData Service  （实现客户端获取sharepoint2010的数据）---第一篇》讲了如何获取数据，下面我要做个Demo，体现jQuery在客户端的强大。

 

（一）我们先要准备一些东西 jQuery UI插件 ，我使用的是jquery-ui-1.8.4.custom。

（二）Demo

　　我们先看一下效果：

 

这里实现的效果是 卡片是浮动的，可以随意拖动，而且亮点是显示的数据是Sharepoint列表的数据，而且它会自动保存位置，下次打开这个页面时，位置依然是上次关闭时的位置。

 

1.准备工作： 先建一个列表（我这里是Tasks），记得里面要要建立两个“数字” 字段，分别是X,Y，它们的作用是保存图片的位置，然后准备2张图片，一张是页面背景

，一张是卡片背景 。

2.建一个页面替换成下面的代码：

代码

1 <% @ Assembly Name = " $SharePoint.Project.AssemblyFullName$ " %>
2 <% @ Import Namespace = " Microsoft.SharePoint.ApplicationPages " %>
3 <% @ Register TagPrefix = " SharePoint " Namespace = " Microsoft.SharePoint.WebControls "
4 Assembly = " Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c " %>
5 <% @ Register TagPrefix = " Utilities " Namespace = " Microsoft.SharePoint.Utilities " Assembly = " Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c " %>
6 <% @ Register TagPrefix = " asp " Namespace = " System.Web.UI " Assembly = " System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35 " %>
7 <% @ Import Namespace = " Microsoft.SharePoint " %>
8 <% @ Assembly Name = " Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c " %>
9
10 <% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " ApplicationPage1.aspx.cs "
11 Inherits = " SharePointProject3.Layouts.SharePointProject3.ApplicationPage1 " DynamicMasterPageFile = " ~masterurl/default.master " %>
12
13 < asp:Content ID ="PageHead" ContentPlaceHolderID ="PlaceHolderAdditionalPageHead" runat ="server" >
14 < style type ="text/css" >
15 .sys-template
16 {
17 display : none ;
18 }
19 </ style >
20 < script src ="../Scripts/MicrosoftAjax/Start.js" type ="text/javascript" ></ script >
21 < script src ="../Scripts/MicrosoftAjax/MicrosoftAjax.js" type ="text/javascript" ></ script >
22
23 < script src ="../Scripts/jQuery/jquery-1.4.2.js" type ="text/javascript" ></ script >
24
25 < script src ="../Scripts/jQuery/jquery-ui-1.8.4.custom.min.js" type ="text/javascript" ></ script >
26 < style type ="text/css" >
27 .sys-template
28 {
29 display : none ;
30 }
31
32 .userStoryBackground
33 {
34 background-image : url('db.png') ;
35 width : 695px ;
36 height : 397px ;
37 }
38
39 .userStoryCard
40 {
41 border : 1px solid #777777 ;
42 width : 206px ;
43 height : 124px ;
44 cursor : move ;
45 background-image : url('db1.png') ;
46 margin : 4px ;
47 position : absolute ;
48 }
49
50 .userStoryDescription
51 {
52 padding : 5px ;
53 line-height : 1.2 ;
54 }
55
56 .userStoryTitle
57 {
58 font-weight : bold ;
59 padding : 2px 5px 0px 5px ;
60 }
61
62 .userStoryButtons
63 {
64 position : absolute ;
65 right : 0px ;
66 padding : 2px 2px 0 0 ;
67 }
68
69 .userStoryButtons img
70 {
71 border : 0 none ;
72 }
73 </ style >
74 < script language ="javascript" type ="text/javascript" >
75 // Sys.require([
76 // Sys.components.dataView,
77 // Sys.components.openDataServiceProxy,
78 // Sys.scripts.jQuery
79 // ]);
80 // Sys.onReady(function () {
81 // var dataSource = Sys.create.openDataServiceProxy('/_vti_bin/ListData.svc');
82 // Sys.query("#userStoriesList").dataView({
83 // dataProvider: dataSource,
84 // fetchOperation: "Tasks",
85 // feachParameters: { orderby: 'Title' },
86 // autoFetch: "true"
87 // });
88
89 // });
90
91 // 声明
92 Sys.require([
93
94 Sys.components.dataView,
95
96 Sys.components.openDataContext,
97
98 ]);
99
100 var dataContext;
101
102 var dataView;
103
104 var userStoryDetails;
105
106 var detailsDataView;
107
108
109
110
111
112 Sys.onReady( function () {
113
114 userStoryDetails = document.getElementById( " userStoryDetails " );
115
116
117
118 dataContext = Sys.create.openDataContext({
119
120 serviceUri: " /_vti_bin/ListData.svc " ,
121
122 mergeOption: Sys.Data.MergeOption.appendOnly
123
124 });
125
126
127
128 dataView = Sys.query( " #userStoriesList " ).dataView({
129
130 dataProvider: dataContext,
131
132 fetchOperation: " Tasks " ,
133
134 feachParameters: { orderby: ' Title ' },
135
136 autoFetch: " true " ,
137
138 rendered: onRendered
139
140 }).get( 0 );
141
142
143
144 detailsDataView = Sys.query( " #userStoryDetails " ).dataView().get( 0 );
145
146
147
148 $create(Sys.Binding, {
149
150 source: dataView,
151
152 path: " selectedData " ,
153
154 target: detailsDataView,
155
156 targetProperty: " data "
157
158 });
159
160 });
161
162 function onRendered() {
163
164 $( " .userStoryCard " ).draggable({
165
166 stop: onDragStop
167
168 });
169
170 }
171
172 function onDragStop(event, ui) {
173
174 var userStoryCard = ui.helper[ 0 ];
175
176 var selectedUserStoryJsonObject = dataView.findContext(userStoryCard).dataItem;
177
178 var newX = ui.position.left;
179
180 var newY = ui.position.top;
181
182 Sys.Observer.setValue(selectedUserStoryJsonObject, " X " , newX);
183
184 Sys.Observer.setValue(selectedUserStoryJsonObject, " Y " , newY);
185
186 dataContext.saveChanges();
187
188 }
189
190
191
192 function openDialog() {
193
194 var options = {
195
196 html: userStoryDetails,
197
198 width: 580 ,
199
200 height: 320 ,
201
202 title: " User Story " ,
203
204 dialogReturnValueCallback: onDialogClose
205
206 };
207
208 SP.UI.ModalDialog.showModalDialog(options);
209
210 }
211
212
213
214 function onDialogClose(dialogResult, returnValue) {
215
216 if (dialogResult == SP.UI.DialogResult.OK) {
217
218 alert( ' ( ^_^ )/~~拜拜! ' );
219 }
220
221 if (dialogResult == SP.UI.DialogResult.cancel) {
222
223 alert(returnValue);
224 }
225
226 }
227
228 </ script >
229 </ asp:Content >
230 < asp:Content ID ="Main" ContentPlaceHolderID ="PlaceHolderMain" runat ="server" >
231
232 < div id ="userStoryDetails" class ="sys-template" >
233
234 < table class ="ms-formtable" width ="100%" >
235
236 < tr >
237
238 < td class ="ms-formlabel" width ="190" > 标题: </ td >
239
240 < td class ="ms-formbody" > {{ Title }} </ td >
241
242 </ tr >
243
244 < tr >
245
246 < td class ="ms-formlabel" width ="190" > Description: </ td >
247
248 < td class ="ms-formbody" > {{ Description }} </ td >
249
250 </ tr >
251
252 < tr >
253
254 < td colspan ="2" nowrap ="nowrap" >
255
256 < span > 创建于 </ span >
257
258 < span > {{ String.format("{0:yyyy-M-dd h:m tt}", Created) }} </ span >
259 < input type ="button" name ="OK" value ="确定" class ="ms-ButtonHeightWidth"
260
261 onclick ="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK); return false;" />
262
263 < input type ="button" name ="Cancel" value ="取消" class ="ms-ButtonHeightWidth"
264
265 onclick ="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'点了取消'); return false;" />
266
267 </ td >
268
269 </ tr >
270
271 </ table >
272
273 </ div >
274 < div id ="userStoriesList" class ="sys-template userStoryBackground" xmlns:sys ="javascript:Sys" >
275
276 < div class ="userStoryCard" sys:style ="{{ 'left:'+X+'px;top:'+Y+'px;'}}" >
277
278 < div class ="userStoryTitle" >
279
280 {{ Title }}
281
282 < span class ="userStoryButtons" >
283
284 < a href ="#" onclick ="javascript:openDialog(); return false;" sys:command ="select" >
285
286 < img alt ="edit" src ="/_layouts/images/edititem.gif" >
287
288 </ a >
289
290 </ span >
291
292 </ div >
293
294 < div class ="userStoryDescription" >< span > {{ Description }} </ span >
295 </ div >
296
297 </ div >
298
299 </ div >
300 </ asp:Content >
301 < asp:Content ID ="PageTitle" ContentPlaceHolderID ="PlaceHolderPageTitle" runat ="server" >
302 Application Page
303 </ asp:Content >
304 < asp:Content ID ="PageTitleInTitleArea" ContentPlaceHolderID ="PlaceHolderPageTitleInTitleArea"
305 runat ="server" >
306 My Application Page
307 </ asp:Content >
308
309

 这个就是我们刚才下载的JQuery的UI

< script src ="../Scripts/jQuery/jquery-ui-1.8.4.custom.min.js" type ="text/javascript" ></ script >

 

 

  这里的替换成自己的图片，当然可以改成自己喜欢的样式，userStoryBackground是背景样式，userStoryCard
是卡片样式。

代码

　.userStoryBackground
{
background-image: url('db.png');
width: 695px;
height: 397px;
}

.userStoryCard
{
border: 1px solid #777777;
width: 206px;
height: 124px;
cursor: move;
background-image: url('db1.png');
margin: 4px;
position:absolute;
}　

 

大家会发现声明中的openDataServiceProxy不见了，取而代之的是openDataContext，是因为openDataContext懂得如何把数据回传到Sharepoint

Sys.require([

Sys.components.dataView,

Sys.components.openDataContext,

]);

 

 

 

 这里的1.rendered: onRendered  它的作用是提出一个事件

          2.$(".userStoryCard").draggable 它的作用是userStoryCard这个控件绑定一个拖动事件

          3. stop: onDragStop  它的作用是鼠标停止拖动时，把当前鼠标的XY值传回Sharepoint列表项的XY

 　　　4.Sys.Observer.setValue(selectedUserStoryJsonObject, "X", newX); 它的作用是设置对应Sharepoint的字段名和要回传的值。

         5.dataContext.saveChanges(); 它的作用是执行回传。　　　　　　　　　　　　

代码

dataView = Sys . query( " #userStoriesList " ) . dataView({
dataProvider : dataContext ,
fetchOperation : " Tasks " ,
feachParameters : { orderby : ' Title ' } ,
autoFetch : " true " ,
rendered : onRendered
}) . get( 0 );

function onRendered() {
$( " .userStoryCard " ) . draggable({
stop : onDragStop
});
}

function onDragStop(event , ui) {
var userStoryCard = ui . helper[ 0 ];
var selectedUserStoryJsonObject = dataView . findContext(userStoryCard) . dataItem;
var newX = ui . position . left;
var newY = ui . position . top;
Sys . Observer . setValue(selectedUserStoryJsonObject , " X " , newX);
Sys . Observer . setValue(selectedUserStoryJsonObject , " Y " , newY);
dataContext . saveChanges();
}

 

 

 

 

这是一个Sharepoint的模式对话框代码，但它不是打开一个URL，而是打开一个userStoryDetails 这个DIV。如果不熟悉的话，可以看我的这篇文章《Sharepoint2010 常用 客户端对象模型 JS》

代码

function openDialog() {

var options = {

html: userStoryDetails,

width: 580 ,

height: 320 ,

title: " User Story " ,

dialogReturnValueCallback: onDialogClose

};

SP.UI.ModalDialog.showModalDialog(options);

}

 

 

 

注意其中sys-template类的使用。 任何dataView依附的元素都需要加上这个类。用于在页面加载时将该元素设为display:none，dataView显示时会将其设回到display:block。

< div id ="userStoryDetails" class ="sys-template" >

 

 

参考资料

http://www.endusersharepoint.com/EUSP2010/2010/05/20/client-side-ajax-applications-in-sharepoint-2010-%E2%80%93-part-4-jquery-integration-and-persistence/

http://www.cnblogs.com/Sunmoonfire/archive/2010/08/02/1789846.html

来源：http://www.cnblogs.com/jlydboy/articles/1808356.html

转载于:https://www.cnblogs.com/greeny/archive/2010/09/15/1827154.html