SharePoint 2013 使用嵌入JavaScript方式实现一个垂直滚动列表

原创 2013年01月26日 22:27:13

本文介绍SharePoint 2013(其实也适用于2010,支持JavaScript OM) 中使用嵌入JavaScript方式实现一个垂直滚动列表:

当鼠标进入Item时停止滚动,当鼠标点击对应的Item时,显示对应的Item内容:

实现的大概思路是使用一段较短的JavaScript代码嵌入SharePoint页面,这个JavaScrip片段(可设置相关参数,如列表名,过滤条件等)调用另一个较大的JavaScript文件VerticalScrollingWebPart.js(存储到SharePoint 的SiteAssets/JavaScript中), VerticalScrollingWebPart.js 文件负责使用JavaScript OM 查询后台列表,并根据参数画出一个滚动列表:

嵌入的JavaScript 代码:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/SiteAssets/Javascript/VerticalScrollingWebPart.js"></script>
<script type="text/javascript">
init_fillScrollableDiv({'web':'',
    'listBaseUrl': 'http://MossHost/Lists/ReadMarkList/DispForm.aspx',
    'listName': 'ReadMarkList',	
	'viewFields':['Title','Body'],    
    'Filter':'<Where> <Or>  <IsNull> <FieldRef Name=\"Expires\" />  </IsNull>  <Geq> <FieldRef Name=\"Expires\"></FieldRef> <Value Type=\"DateTime\"> <Today></Today> </Value> </Geq> </Or> </Where>',
	'viewFieldsStyle':['font-weight:bold','padding:0 0 0 5'],	
	'divID':'myScrollableDiv',
	'divHeight':'250px',
	'divWidth':'500px',	
	'speed':4,
	'linkBack':true});    
</script>

主要参数说明:

1. web,如果取子站点的列表需要填

2. listBaseUrl, 显示list item的地址

3. listName,要读取的list 名称

4.viewFields, 要显示的字段

5.Filter 过滤条件(CAML结构的 Where 子句)

 

VerticalScrollingWebPart.js 代码:

/*
 A vertical scrolling web part for SharePoint 2013
*/
function init_fillScrollableDiv(obj) {
    // Build the div
    var myDivBuffer = [];
    myDivBuffer.push("<div style='vertical-align:top;position:relative;overflow:hidden;cursor:default;height:" + obj.divHeight + ";width:" + obj.divWidth + "'>");
    myDivBuffer.push("<div id='" + obj.divID + "' style='position:relative'></div>");
    myDivBuffer.push("</div>");
    myDivContainer = myDivBuffer.join('');
    document.write(myDivContainer);
    $(document).ready(function () {
        // fillScrollableDiv(obj)
        ExecuteOrDelayUntilScriptLoaded(function () { queryItemsByViewName(obj); }, "sp.js");
        //queryItemsByViewName(obj);
    });
}

function fillScrollableDiv(info, items) {    
    info.animBegin = 0;
    info.animPart = 0;
    if (items.length == -1) alert("An error occured - check the parameters \"listBaseUrl\", \"web\"......");
    var finalBuffer = [];
    var path = info.listBaseUrl;
    var res = new Object();
    res.items = items;
    $.each(res.items, function (i, item) {
        var partBuffer = [];       
        $.each(info.viewFields, function (idx, fin) {
            var style = '';
            var thisVal = (item[fin] == null) ? '' : item[fin];
            if (thisVal.indexOf(';#') > -1) {
                thisVal = thisVal.substring(thisVal.indexOf(';#') + 2);
            }
            if (info.viewFieldsStyle[idx] != undefined) {
                style = " style='" + info.viewFieldsStyle[idx] + "'";
            }
            partBuffer.push("<tr><td" + style + ">" + thisVal + "</td></tr>");
        });
        finalBuffer.push("<hr style='height:1px;color:black' />");
        if (info.linkBack) {
            finalBuffer.push("<table title='Go to item' style='cursor:pointer' ");
            finalBuffer.push("onclick='javascript:location.href=\"" + info.listBaseUrl + "?ID=" + item['ID'] + "&Source=" + location.href + "\"' ");
            finalBuffer.push("cellspacing='0' cellpadding='0'>" + partBuffer.join('') + "</table>");
        } else {
            finalBuffer.push("<table cellspacing='0' cellpadding='0'>" + partBuffer.join('') + "</table>");
        }
    });
    var myContents = finalBuffer.join('');
    // Update the content in the scrollable div
    $("#" + info.divID).html(myContents)
		.mouseenter(function () {
		    var now = new Date();
		    info.animPart += (now - info.animBegin);
		    $(this).stop();
		})
		.mouseleave(function () {
		    $(this).stop();
		    var partScr = parseInt($(this).css('top'));
		    scrollMyDiv(partScr, info);
		});

    // Call scroll function
    scrollMyDiv('', info);
}

function scrollMyDiv(scroll, info) {
    info.animBegin = new Date();
    var myDiv = $("#" + info.divID);
    var ch = myDiv.height();
    var chpHeight = myDiv.parent().height();
    if (scroll == '') {
        var scroll = chpHeight;
    }
    var duration = (ch * (info.speed * 10)) - info.animPart;
    myDiv.css({ 'top': scroll }).animate({ "top": -ch }, duration, 'linear', function () {
        info.animPart = 0;
        scrollMyDiv('', info);
    });
}


// Function to pull items from view
function queryItemsByViewName(info) {
    // ToDo Invoke JavaScript OM query the items
    var ctx = new SP.ClientContext();
    var caml = "<View><Query>" + info.Filter + "</Query></View>";
    var list = ctx.get_web(info.web).get_lists().getByTitle(info.listName);
    var query = new SP.CamlQuery();
    query.set_viewXml(caml);

    // Contact include from viewFields
    var include = "";
    for (i = 0; i < info.viewFields.length; i++) {
        include += info.viewFields[i] + ","
    }

    include += include + 'ID';

    var listItems = list.getItems(query);
    ctx.load(listItems, "Include(" + include + ")")

    var delegateParameter = new Object();
    delegateParameter.info = info;
    delegateParameter.listItems = listItems;
    ctx.executeQueryAsync(
       Function.createDelegate(this, function () { onCamlQuerySuccessedForVerticalScrollingWebpart(delegateParameter); }),
       Function.createDelegate(this, onCamlQueryFailedForVerticalScrollingWebpart)
    );
}

function onCamlQuerySuccessedForVerticalScrollingWebpart(delegateParameter) {    
    var itemsEnumerator = delegateParameter.listItems.getEnumerator();
    var count = delegateParameter.listItems.get_count();
    var items = new Array(count);
    var j=0;
    while (itemsEnumerator.moveNext()) {
        var currentItem = new Object();
        var currentListItem = itemsEnumerator.get_current();       
        for(i=0; i< delegateParameter.info.viewFields.length; i++)
        {
            var fieldName = delegateParameter.info.viewFields[i];
            currentItem[fieldName] = currentListItem.get_item(fieldName);
            if (currentItem[fieldName].length > 200) {
                var index = currentItem[fieldName].indexOf(" ", 200);
                currentItem[fieldName] = currentItem[fieldName].substring(0, index) + "......";
            }
        }

        currentItem['ID'] = currentListItem.get_item('ID');
        items[j] = currentItem;
        j++;
    }

    fillScrollableDiv(delegateParameter.info, items); 
}

function onCamlQueryFailedForVerticalScrollingWebpart(sender, args) {
    alert('Request failed. ' + args.get_message() +
      '\n' + args.get_stackTrace());
}

 

SharePoint 2013 中使用JSLink 来改变列表中某个字段或view(视图)的显示方式

本文讲述在SharePoint 2013 中使用JSLink 来改变列表中某个字段或view(视图)的显示方式。...

Sharepoint2013 列表的NewForm 页面添加一个 保存新建 按钮

昨天一同事问我如何在sharepoint2013的NewForm.aspx页面上添加一个 save and new的button。实现save 和new的功能,save的功能和默认的save按钮效果一...
  • dz45693
  • dz45693
  • 2014年07月19日 13:54
  • 2768

sharepoint2013列表实现项目级权限控制

在sharepoint2013权限控制中,有时候会

SharePoint 2013 中开发可以被标记为未读和已读的列表之代码实现篇

本文介绍SharePoint 2013 中开发可以被标记为未读和已读的列表之代码实现,只介绍核心代码,完整代码请到codeplex 下载:http://readmarkablelist.codeple...

实现类似天猫列表消息自动垂直滚动效果

一、先看效果 前段时间在交流群里看到有小伙伴在问一个消息滚动列表怎么做,正好最近在学校准备毕业答辩,公司请了两周假,忙里偷闲把这个效果实现了,整体感觉还是不错的,代码量也比较少,练练手的同时也给小...

JavaScript实现垂直向上无缝滚动特效

一、循环向上滚动的文字,如上面的滚动效果 二、实现的思路 1、建立三个层dome、dome1、dome2 2、垂直滚动的文字在dome1上 3、通过层的滚动来实现文字滚动 三、源代码...

SharePoint 2013/2010 使用JavaScript 将Div转换(render)成 Rich Text Box

本文讲述在SharePoint 2013/2010中 使用JavaScript 将Div转换(render)成 Rich Text Box。 在SharePoint 开发的过程中,如果不能使用C#代码...

SharePoint 2010/2013 使用Javascript来判断权限的三种方法

本文讲述SharePoint 2010/2013 使用Javascript来判断权限的三种方法的实现方式及其优缺点。...

SharePoint 2010/2013 使用Javascript 动态添加Ribbon 按钮

本文讲述如和在SharePoint 210/2013中使用JavaScript 动态添加Ribbon 按钮。

SharePoint 2013 使用JavaScript对象模型配置智能提示

前言   默认在VS2012/2013中编写SharePoint JavaScript 客户端对象模型,都没有智能感知的功能,用起来非常麻烦;其实,我们可以手动配置一下,让JavaScript可以进...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SharePoint 2013 使用嵌入JavaScript方式实现一个垂直滚动列表
举报原因:
原因补充:

(最多只允许输入30个字)