本文介绍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("οnclick='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());
}