SharePoint 中时间轴 Timeline的实现
SharePoint 中时间轴 Timeline的实现
木宛城主 发表于3年前
SharePoint 中时间轴 Timeline的实现
  • 发表于 3年前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

客户需要在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 Handler
function 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 id
function 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都是有限制,对于数据量很大的情况下,是有风险的。

共有 人打赏支持
粉丝 1
博文 222
码字总数 199010
×
木宛城主
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: