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.cnblogs.com/Sunmoonfire/archive/2010/08/02/1789846.html
