阅读目录
成果演示
实现原理
总结
客户需要在OA中实现每日动态功能，能够记录每一位员工的每天的工作动态，我很快想到了时间轴，因为时间轴能很直观的现实员工每一刻的动态。就像Facebook的Timeline效果（点击查看）。
尝试着搜索这个效果，园友的这篇博文正好给我启发，接下来就去实现吧。
回到顶部
成果演示
最终的效果如下所示：
点击每个员工的姓名，即可进入他当天的工作动态（只能看），若点击自己的名字（既能看又能发送/编辑/删除动态），如下所示：
动态的详细页，如下所示：
点击时间轴，即可新增动态，如下所示：
编辑效果，鼠标移至内容区域，现实黄色提醒，如下所示：
单击即可显示编辑界面，如下所示：
移开鼠标，即可自动保存。
当然如果想把一条当太删掉，点击右上角X即可。
回到顶部
实现原理
关于效果的实现原理可以参考这篇文章。
了解了上面提到的这篇文章之后（Masonry.js），接下来就是Sharepoint 客户端对象模型的实现了，比如Ecmascript。
根据登陆的用户点击的员工名字获取当天的动态，这儿需要利用CAML拼接出查询条件
function GetCurrentUser(){ //Get the current context var context=new SP.ClientContext.get_current(); //Load the web object var web=context.get_web(); //Get current user this.currentUser=web.get_currentUser(); //load currentUser context.load(currentUser); //Make a query call to execute the above statements context.executeQueryAsync(OnGetCurrentUserSuccess,OnGetCurrentUserFailed);}function OnGetCurrentUserSuccess(){ GetDailyWorks();}function OnGetCurrentUserFailed(sender,args){ console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());}function GetDailyWorks(){ //Get the current context var context=new SP.ClientContext.get_current(); //Load the web object var web=context.get_web(); //Get the list var list=web.get_lists().getByTitle(listNameForDailyWork); //Get items by caml in the specific list var camlQuery=new SP.CamlQuery(); var d=new Date(); //Get specific field name this.userNameWhenClickView=$("#currentUserHidden").val(); camlQuery.set_viewXml('<View><Query>'+ '<Where>'+ '<And>'+ '<And>'+ '<And>'+ '<Eq>'+ '<FieldRef Name=\'Title\'/>'+ '<Value Type=\'Text\'>'+userNameWhenClickView+'</Value>'+ '</Eq>'+ '<Eq>'+ '<FieldRef Name=\'CurrentYear\'/>'+ '<Value Type=\'Text\'>'+d.getFullYear()+'</Value>'+ '</Eq>'+ '</And>'+ '<Eq>'+ '<FieldRef Name=\'CurrentMonth\'/>'+ '<Value Type=\'Text\'>'+(d.getMonth()+1)+'</Value>'+ '</Eq>'+ '</And>'+ '<Eq>'+ '<FieldRef Name=\'CurrentDay\'/>'+ '<Value Type=\'Text\'>'+d.getDate()+'</Value>'+ '</Eq>'+ '</And>'+ '</Where>'+ '<OrderBy>'+ '<FieldRef Name=\'Created\' Ascending=\'True\'/>'+ '</OrderBy></Query></View>'); dailyWorks=list.getItems(camlQuery); //Load the web in the context and retrieve only selected columns to improve perfomance context.load(dailyWorks,'Include(ID,Title,DailyContent,Created)'); //Make a query call to execute the above statements context.executeQueryAsync(OnGetDailyWorksSuccess,OnGetDailyWorkFailed); }function OnGetDailyWorksSuccess(){ //Get the collection var dailyWorksCollection=dailyWorks.getEnumerator(); //Iterate through daily works while(dailyWorksCollection.moveNext()){ //Load the current daily work item in iterate var workItem=dailyWorksCollection.get_current(); //Add work item to container addWorkToContainer(workItem.get_item('ID'),workItem.get_item('Title'),workItem.get_item('DailyContent'),workItem.get_item("Created")); } //Items has added in container and execute AutoMasonry method AutoMasonry(); //Init in line edit if current user has permission to edit if(userNameWhenClickView==currentUser.get_title()){ InitInlineEdit($('.editable, .editable-area')); } }//Error Handlerfunction OnGetDailyWorkFailed(sender,args){ console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());}当然Add一个Item也是比较方便的，当Add Item完毕后，很重要的一点是利用Masonry Reload一下所有的item
function AddNewDailyWorkItem(content){ //get the current context var context=new SP.ClientContext.get_current(); //Load the web object var web=context.get_web(); //Get the list var list =web.get_lists().getByTitle(listNameForDailyWork); //create the ListItemInfomational object var listItemInfo=new SP.ListItemCreationInformation(); //add the item to the list this.listItem=list.addItem(listItemInfo); //get current user display name var userDisplayName=currentUser.get_title(); //Assign values for fields listItem.set_item('Title',userDisplayName); listItem.set_item('DailyContent',content); //Get current year ,month,day and assign values for fields var newObj=new Date(); listItem.set_item('CurrentYear',newObj.getFullYear()); listItem.set_item('CurrentMonth',newObj.getMonth()+1); listItem.set_item('CurrentDay',newObj.getDate()); //Apply changes to item listItem.update(listItem); context.load(listItem); //Make a query call to execute the above statements context.executeQueryAsync(AddDailyWorkItemSuccess,AddDailyWorkItemFailed); }function AddDailyWorkItemSuccess(sender,args){ var content = $("#update").val(); $('<div class="item"><a href="#" itemId="'+listItem.get_id()+'" class="deletebox">X</a>' + '<div class="inner"><p itemId="'+listItem.get_id()+'" class="editable-area">' + content + '</p></div><p class="sendStyle">发送于'+(new Date()).getHours()+':'+((new Date()).getMinutes()<10?"0"+(new Date()).getMinutes():(new Date()).getMinutes())+'</p></div>').insertBefore("div#popup"); //reload masnory $("#container").masonry("reload"); //Hiding existing arrows $(".rightCorner").hide(); $(".leftCorner").hide(); //injecting fresh arrows Arrow_Points(); //clear popup text box value $("#update").val(""); //popup hide $("#popup").hide(); //Init in line edit $('p[itemId='+listItem.get_id()+']'); InitInlineEdit($('p[itemId='+listItem.get_id()+']')); }function AddDailyWorkItemFailed(sender,args){ console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());}Update 和Add是相同的逻辑，记得最后Reload即可
function UpdateDailyWorkItem(itemId,updateContent){ //If no title is setted then show alert and set focus /*if(updateContent==''){ $() }*/ //Get the current context var context = new SP.ClientContext.get_current(); //Load the web object var web=context.get_web(); //Get the list var list=web.get_lists().getByTitle(listNameForDailyWork); //Get item to update by Id from the specific list this.listItem=list.getItemById(itemId); //Set the new property value listItem.set_item('DailyContent',updateContent); //Call the update method to commit the change listItem.update(); context.executeQueryAsync(updateWorkItemSuccess,updateWorkItemFailed); }function updateWorkItemSuccess(){ $editable .removeClass('active-inline') .children() .replaceWith(edited); if ($editable.hasClass('editable-area')) { rapture($editable); } //reload masnory $("#container").masonry("reload"); //Hiding existing arrows $(".rightCorner").hide(); $(".leftCorner").hide(); //injecting fresh arrows Arrow_Points();}function updateWorkItemFailed(){}Delete Item，根据item id进行删除，同Add和Update逻辑，删除完毕后也是需要Reload
//Delete daily work item by item idfunction deleteDailyWork(workElement){ //Get the daily work item id var itemId=workElement.attr("itemId"); //Get the current context var context=new SP.ClientContext.get_current(); //Load the web object var web=context.get_web(); //Get the list var list=web.get_lists().getByTitle(listNameForDailyWork); //Get item to delete by if form the list var itemToDelete=list.getItemById(itemId); //Add Delete method to the query itemToDelete.deleteObject(); //Execute the query to perform the deletion context.executeQueryAsync(DeleteWorkItemSuccess,DeleteWorkItemFailed); }function DeleteWorkItemSuccess(){ //Masonry Reload}function DeleteWorkItemFailed(sender,args){ console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());}总结
值得注意的是我将每日的动态存入List中，对于List，他能负担的item的个数和一次从数据库里获取的item都是有限制，对于数据量很大的情况下，是有风险的。