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 JS Link 之(二) 改变表单中column的颜色

按照前一篇(  SharePoint JS Link 之(一) 改变column的颜色 )修改之后,查看文档属性,发现Language列颜色并没有变: 要想让这个颜色变,需要...
  • SPFarm
  • SPFarm
  • 2015年02月06日 13:25
  • 1264

在SharePoint 2013中使用JSLink + Callout 展示信息(1)

SharePoint 2013 JSLink + Callout 展示信息
  • shrenk
  • shrenk
  • 2014年10月03日 15:01
  • 892

SharePoint 2013 使用JQuery 一些记录如(SharePoint js 获得当前用户)等基本操作。

SharePoint 2013 使用JQuery 一些记录。  通过 REST 使用列表 以下示例演示如何创建列表。 url: http://site ...
  • jason_dct
  • jason_dct
  • 2016年07月14日 16:00
  • 2327

sharepoint 2010 使用自定义列表模版创建列表(1)

我们在使用sharepoint的过程中,发现一个比较好用的功能,就是“将此列表另存为模版”(save list as template),这个功能的作用是,创建一个和当前列表或者文档库一模一样的配置,...
  • cxx2325938
  • cxx2325938
  • 2013年08月27日 13:57
  • 6700

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

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

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

本文介绍SharePoint 2013(其实也适用于2010,支持JavaScript OM) 中使用嵌入JavaScript方式实现一个垂直滚动列表: 当鼠标进入Item时停止滚动,当鼠标点击...
  • farawayplace613
  • farawayplace613
  • 2013年01月26日 22:27
  • 2245

在SharePoint 2013中使用JSLink + Callout 展示信息(2)

Callout是SharePoint 2013的另一个新功能,
  • shrenk
  • shrenk
  • 2014年10月26日 03:33
  • 1057

sharepoint 2013 自定义列表栏(一)

1)在Vs2012 中创建一个空SharePoint 2013空项目,然后添加一个新的公开类,并使此类继承Microsoft.SharePoint.SPFieldText. 2)创建自定义字段类...
  • u011435642
  • u011435642
  • 2013年11月27日 10:15
  • 941

SharePoint 2013 集成嵌入 BI工具 DataZen

SharePoint 2013 集成嵌入 BI工具 DataZen. 最近微软出了一个BI工具,收购了一个公司的产品吧。支持HTML5 支持手机显示。 后台数据可以来自于SQL server 、E...
  • jason_dct
  • jason_dct
  • 2015年05月22日 15:31
  • 2007

应用AJAX技术,获取SharePoint信息。

using System;using System.Text;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web...
  • SpringLiu
  • SpringLiu
  • 2007年05月30日 16:06
  • 568
收藏助手
不良信息举报
您举报文章:SharePoint 2013 使用嵌入JavaScript方式实现一个垂直滚动列表
举报原因:
原因补充:

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