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