注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

忘忧草的博客

品味人生--精通IT管理和技术

 
 
 

日志

 
 
 
 

Client Side AJAX Applications in SharePoint 2010 – Part 6: Master-Details  

2012-02-22 21:44:13|  分类: Moss2010 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Showing .selectedData

In order to show the currently selected item we will need some HTML that we can pop up that will bind to the currently selected list item.  Here’s the simplest possible example that will still work:

 
1 <div id="userStoryDetails" class="sys-template">{{ Title }}</div>

Notice the class of sys-template?  As mentioned in a previous post that class is required for any elements that a dataView attaches to.  It sets the element to display: none when the page is loaded, but the dataView sets it back to display: block when it renders.

Next, we’ll need a second dataView object that we’ll bind to the HTML above using the jQuery syntax:

1 detailsDataView = $("#userStoryDetails").dataView().get(0);

Note that we didn’t set the dataProvider or fetchOperation as we did for the main dataView.  The reason is that we will bind its data property to the main dataView’s selectedData property like this:

 
1 $create(Sys.Binding, {
2     source: dataView,
3     path: "selectedData",
4     target: detailsDataView,
5     targetProperty: "data"
6 });

selectedData is a special property on dataView that represents the currently selected item.  We’re pretty close to completing the master-details scenario.  The main item that remains is telling the master dataView when to update the selectedData.  We can accomplish this by simply adding sys:command="select" onto an element within the main dataView’s template.  Adding it to the button that opens the modal dialog is a logical location:

1 <a href="#" onclick="javascript:openDialog(); return false;" sys:command="select">
2     <img src="/_layouts/images/edititem.gif" />
3 </a>

And now we’re in business:

Client Side AJAX Applications in SharePoint 2010 – Part 6: Master-Details - 忘忧草 - 忘忧草的博客

Flushing out the Master’s Details

So far the details view is a bit sparse.  In the next article we will allow editing the fields of a particular user story and support saving it back to SharePoint.  For now, however, let’s add some additional read-only fields:

 
01 <div id="userStoryDetails" class="sys-template">
02   <table class="ms-formtable" width="100%">
03     <tr>
04       <td class="ms-formlabel" width="190">Title:</td>
05       <td class="ms-formbody">{{ Title }}</td>
06     </tr>
07     <tr>
08       <td class="ms-formlabel" width="190">Points:</td>
09       <td class="ms-formbody">{{ Points }}</td>
10     </tr>
11     <tr>
12       <td colspan="2" nowrap>
13         <span>Created at <span>
14         <span>{{ String.format("{0:M/d/y h:m tt}", Created) }}</span>
15   
16         <input type="button" name="OK" value="OK" class="ms-ButtonHeightWidth"
17           onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK); return false;" />
18         <input type="button" name="Cancel" value="Cancel" class="ms-ButtonHeightWidth"
19           onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel); return false;" />
20       </td>
21     </tr>
22   </table>
23 </div>

There are two things to note about the details view above.  The first is that we can display fields like Points that are not displayed by the main dataView (assuming they exist in the list).  This works because the master dataView downloaded all fields off of the main list by default.  How to retrieve data from related lists will the topic of a future article.

The second item to note is how easily we can deal with dates and times.  String.format is a method provided by the AJAX Library that can format the dates provided by SharePoint exactly like the C# / VB format specifiers readers are likely used to.  Here’s what the new details view looks like:

Client Side AJAX Applications in SharePoint 2010 – Part 6: Master-Details - 忘忧草 - 忘忧草的博客

Here is the source for the entire application so far

 
001 <%@ Assembly Name="PreDemo, Version=1.0.0.0, Culture=neutral, PublicKeyToken=0a3e0ca56c5f97ba" %>
002 <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
003 <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
004 <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
005 <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
006 <%@ Import Namespace="Microsoft.SharePoint" %>
007 <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
008 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserStories.aspx.cs" Inherits="PreDemo.Layouts.PreDemo.UserStories" DynamicMasterPageFile="~masterurl/default.master" %>
009   
010 <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
011     <STYLE type="text/css">
012         .sys-template
013         {
014             display: none;
015         }
016         .userStoryBackground
017         {
018             background-image: url('Images/corkboard4.png');
019             width: 100%;
020             height: 600px;
021             position: relative;
022         }
023         .userStoryCard
024         {
025             border: 1px solid #777777;
026             width: 200px;
027             cursor: move;
028             background-image: url('Images/blankcard4.png');
029             position: absolute;
030         }
031         .userStoryDescription
032         {
033             font-size: 13px;
034             padding: 0px 5px 5px 5px;
035         }
036         .userStoryTitle
037         {
038             font-size: 15px;
039             font-weight: bold;
040             padding: 0px 0px 0px 0px;
041             padding: 0px 5px 0px 5px;
042         }
043         .userStoryButtons
044         {
045             position: absolute;
046             right: 0px;
047             padding: 2px 2px 0 0;
048         }
049         .userStoryButtons img
050         {
051             border: 0 none;
052         }
053     </STYLE>
054   
055     <script
056         src="../Scripts/jquery-ui-1.8.1.custom/js/jquery-1.4.2.min.js"
057         type="text/javascript"></script>
058   
059     <script
060         src="../Scripts/jquery-ui-1.8.1.custom/js/jquery-ui-1.8.1.custom.min.js"
061         type="text/javascript"></script>
062   
063     <script
064         src="../Scripts/MicrosoftAjax/jQueryStart.js"
065         type="text/javascript"></script>
066   
067     <script
068         src="../Scripts/MicrosoftAjax/MicrosoftAjax.js"
069         type="text/javascript"></script>
070   
071     <script type="text/javascript">
072         Sys.require([
073             Sys.scripts.jQuery,
074             Sys.components.dataView,
075             Sys.components.openDataServiceProxy
076             ]);
077   
078         var dataView;
079         var detailsDataView;
080         var dataContext;
081         var userStoryDetails;
082   
083         Sys.onReady(function () {
084             userStoryDetails = document.getElementById('userStoryDetails');
085   
086             dataContext = Sys.create.openDataContext({
087                 serviceUri: "/Demo/_vti_bin/ListData.svc"
088             });
089   
090             dataView = $("#userStories").dataView({
091                 dataProvider: dataContext,
092                 fetchOperation: "UserStories",
093                 fetchParameters: { orderby: 'Title' },
094                 autoFetch: "true",
095                 rendered: onRendered
096             }).get(0);
097   
098             detailsDataView = $("#userStoryDetails").dataView().get(0);
099   
100             $create(Sys.Binding, {
101                 source: dataView,
102                 path: "selectedData",
103                 target: detailsDataView,
104                 targetProperty: "data"
105             });
106         });
107   
108         function onRendered() {
109             $(".userStoryCard").draggable({
110                 stop: onDragStop
111             });
112         }
113   
114         function onDragStop(event, ui) {
115             var userStoryCard = ui.helper[0];
116             var selectedUserStoryJsonObject = dataView.findContext(userStoryCard).dataItem;
117   
118             var newX = ui.position.left;
119             var newY = ui.position.top;
120   
121             Sys.Observer.setValue(selectedUserStoryJsonObject, "X", newX);
122             Sys.Observer.setValue(selectedUserStoryJsonObject, "Y", newY);
123   
124             dataContext.saveChanges();
125         }
126   
127         function openDialog() {
128             var options = {
129                 html: userStoryDetails,
130                 width: 500,
131                 height: 200,
132                 title: "User Story",
133                 dialogReturnValueCallback: onDialogClose
134             };
135             SP.UI.ModalDialog.showModalDialog(options);
136         }
137   
138         function onDialogClose(dialogResult, returnValue) {
139             if (dialogResult == SP.UI.DialogResult.OK) {
140   
141             }
142             if (dialogResult == SP.UI.DialogResult.cancel) {
143   
144             }
145         }
146     </script>
147 </asp:Content>
148   
149 <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
150     <div id="userStoryDetails" class="sys-template">
151         <table class="ms-formtable" width="100%">
152             <tr>
153                 <td class="ms-formlabel" width="190">Title:</td>
154                 <td class="ms-formbody">{{ Title }}</td>
155             </tr>
156             <tr>
157                 <td class="ms-formlabel" width="190">Points:</td>
158                 <td class="ms-formbody">{{ Points }}</td>
159             </tr>
160             <tr>
161                 <td colspan="2">
162                     <span>Created at <span>
163                     <span>{{ String.format("{0:M/d/y h:m tt}", Created) }}</span>
164                     <span>
165                     <input type="button" name="OK" value="OK"
166                         onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK); return false;" accesskey="O" class="ms-ButtonHeightWidth" target="_self" />
167                     <input type="button" name="Cancel" value="Cancel"
168                         onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancelled clicked'); return false;" accesskey="C" class="ms-ButtonHeightWidth" target="_self" />
169                     </span>
170                 </td>
171             </tr>
172         </table>
173     </div>
174   
175     <div id="userStories"
176         class="sys-template userStoryBackground"
177         xmlns:sys="javascript:Sys">
178   
179         <div class="userStoryCard"
180             sys:style="{{ 'left: ' + X + 'px; top: ' + Y + 'px;'}}">
181   
182             <div class="userStoryTitle">
183                 {{ Title }}
184                 <span class="userStoryButtons">
185                     <a href="#" onclick="javascript:openDialog(); return false;" sys:command="select">
186                         <img src="/_layouts/images/edititem.gif" />
187                     </a>
188                 </span>
189             </div>
190             <div class="userStoryDescription"><div>{{ Description }}</div>
191         </div>
192     </div>
193 </asp:Content>
194   
195 <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
196 Pre Demo
197 </asp:Content>
198   
199 <asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" >
200 Pre Demo
201 </asp:Content>

Summary

We’ve seen how to data bind a details dataView to the currently selected item of a master dataView and formatting options for different data types.  The next article in the series will update the detailsView to support editing list items.

  评论这张
 
阅读(510)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018