文档章节

SharePoint 中时间轴 Timeline的实现

 木宛城主
发布于 2015/03/02 19:41
字数 1170
阅读 13
收藏 0
点赞 0
评论 0

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

© 著作权归作者所有

共有 人打赏支持
粉丝 2
博文 222
码字总数 199010
作品 0
黄浦
10个最实用的个时间轴插件(带详细说明)

建站的时候人人都想把网站建设的更有吸引力,在展示博客、照片、视频等应用上面,使用时间轴的会让你的网站看起来更加的好用,更有点击的欲望。通常这种时间轴的制作成本都不会很低。 但是,...

oschina ⋅ 2015/03/26 ⋅ 13

分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用

日期:2012-4-4 来源:GBin1.com 是不是想创建更加吸引眼球的网站和web应用?是不是想让你的网站和应用让用户感觉更加与众不同?如果你想让你的网站显得鹤立鸡群的话,绝对应该看 看今天我们...

gbin1 ⋅ 2012/04/04 ⋅ 0

快速简单的定制一个时间轴布局(LinearLayout)(2)

先搬运之前的文章吧。。。 http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0121/3902.html Git: https://github.com/razerdp/UnderLineLinearLayout 这一次要讲的是如何实现L......

WeiChaoFeng ⋅ 2017/12/13 ⋅ 0

时间轴组合-Timeline Portfolio

![时间轴组合-Timeline Portfolio][1] 时间轴组合-Timeline Portfolio ![时间轴组合-Timeline Portfolio][1] [1]: http://static.oschina.net/uploads/space/2014/0312/152048_4OlV_1048964.......

GaoLNMP ⋅ 2014/03/12 ⋅ 0

关于timeline联动的问题

@Kener-林峰 你好,想跟你请教个问题: 我现在有三个div,每个div都有一个图,每个图都有一个timeline,三个timeline的时间轴内容都是一样的,想请教下,如何做到点第一个timeline,另外两个...

贝壳里的海 ⋅ 2014/08/21 ⋅ 2

7 个漂亮的 JavaScript 的时间轴组件

时间轴:通过互联网技术,依据时间顺序,把一方面或多方面的 时间足迹事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户;时间轴可以运用于不同领域,最大的作用就是把过去...

红薯 ⋅ 2011/09/29 ⋅ 9

渴切-开源中文css框架新增timeline时间轴组件

PSD转HTML(p2h.cn)讯:渴切-开源中文css框架v3首个在框架中引进timeline时间轴组件。使用简单,命名规范。此举措是为 了满足渴切css用户的需要。同时使用渴切的用户在使用中遇到任何的问题...

tyshymy ⋅ 2013/06/08 ⋅ 3

时间轴事件改变,动态更新x轴和y轴的值时,chainpoint不在对应的节点位置。

@Kener-林峰 你好,想跟你请教个问题: ① 我的问题是:柱状图+timeline,时间轴事件改变,动态更新x轴和y轴的值时,chainpoint不在对应的节点位置。 绑定时间轴事件代码如下: //绑定时间轴...

刘红健 ⋅ 2015/02/11 ⋅ 1

echarts timeline+柱状图,动态更新x轴,chainpoint不在对应的节点位置

@Kener-林峰 你好,想跟你请教个问题: ① 我的问题是:柱状图+timeline,时间轴事件改变,动态更新x轴和y轴的值时,chainpoint不在对应的节点位置。 绑定时间轴事件代码如下: //绑定时间轴...

刘红健 ⋅ 2015/02/05 ⋅ 1

关于Echarts的timeline属性。

@Kener-林峰 你好,我现在弄那个timeline,但是看到文档上面就支持 bar »、scatter »、pie »、map » 这四种图形。我现在想做到:时间轴绑定click事件,点击到时间点的时候,后台根据时间...

秋分时节雨 ⋅ 2014/11/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 16分钟前 ⋅ 0

彻底删除Microsoft Office的方法

参照此链接彻底删除Office https://support.office.com/zh-cn/article/%e4%bb%8e-pc-%e5%8d%b8%e8%bd%bd-office-9dd49b83-264a-477a-8fcc-2fdf5dbf61d8?ui=zh-CN&rs=zh-CN&ad=CN......

Kampfer ⋅ 31分钟前 ⋅ 0

大盘与个股之间关系

大盘走多:积极出手 顺势加码 大盘走空: 少量出手 退场观望 大盘做头:逆势减码 少量操作 大盘做底 : 小量建仓 小量试单

guozenhua ⋅ 33分钟前 ⋅ 0

Day16 LVM(逻辑卷管理)与磁盘故障小案例

lvm详解 简述 LVM的产生是因为传统的分区一旦分区好后就无法在线扩充空间,也存在一些工具能实现在线扩充空间但是还是会面临数据损坏的风险;传统的分区当分区空间不足时,一般的解决办法是再...

杉下 ⋅ 39分钟前 ⋅ 0

rsync实现多台linux服务器的文件同步

一、首先安装rsync,怎样安装都行,rpm,yum,还是你用源码安装都可以。因为我用的是阿里云的ESC,yum install rsync就ok了。 二、配置rsync服务 1.先建立个同步数据的帐号 123 groupadd r...

在下头真的很硬 ⋅ 53分钟前 ⋅ 0

前端基础(三):函数

字数:1685 阅读时间:5分钟 函数定义 在最新的ES规范中,声明函数有4中方法: -函数声明 -函数表达式 -构造函数Function -生成器函数 1.函数声明 语法: function name([param[, param2 [....

老司机带你撸代码 ⋅ 今天 ⋅ 0

Java虚拟机的Heap监狱

在Java虚拟机中,我是一个位高权重的大管家,他们都很怕我,尤其是那些Java 对象,我把他们圈到一个叫做Heap的“监狱”里,严格管理,生杀大权尽在掌握。 中国人把Stack翻译成“栈”,把Hea...

java高级架构牛人 ⋅ 今天 ⋅ 0

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 今天 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 今天 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部