SharePoint 2013 自定义翻页显示列表项
2024-08-30 01:13:11
项目需求：自定义开发一个能分页显示列表项的小部件，允许左右翻页，能根据用户权限来显示管理链接等。
效果如下：
技术要求：使用sharepoint rest API 来获取列表项，这样性能高，能够快速响应用户操作。（关于REST API详细介绍见我的博客：SharePoint REST Service steps by steps）
注意： 这里我固定单页显示５项，可自行更改。当页面在第一页时，默认左分页隐藏，最后一页时，右分页默认隐藏。在页面加载过程会出现加载图片的效果，页面重新刷新时，不会记录之前用户所在分页，默认回到第一页，有兴趣的朋友，可以把这功能改改。
步骤：
1. 创建一个自定义list，无需创建其他字段， 添加数据即可， 我这里list名称是News
2. 编辑当前list页面， 添加ScriptContent Webpart.
3. 编辑该scriptconten webpart, 加入下列布局代码片段：
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/Style Library/CustomJSLink/news.js"></script>
<link rel="stylesheet" type="text/css" href="/Style Library/CustomJSLink/news.css"> <div> <div class="news"> <div class = "title">News</div> <div class="hidden" id="newsLink"><a class="manageLink">Manage Link</a></div> </div> <div class="btn"> <img id="pre" src="http://dev-sp/Marketing%20Document/pre.JPG"> </div> <div id="result" ><img id="load" src="http://dev-sp/Marketing%20Document/busy.gif"></div> <div class = "btn"> <img id="next" src="http://dev-sp/Marketing%20Document/next.JPG"> </div> </div>
4. 引入CSS文件和JS文件，保存下列代码到ｓｈａｒｐｏｉｎｔ 站点。
ｎｅｗｓ．ｃｓｓ 文件
#result
{
float: left;
width: 200px;
height: 200px;
text-align: left;
margin-left: 5px;
margin-right: 5px; } .btn
{
float: left;
width: 20px;
height: 20px;
} .head
{
font-size: 15px;
color: #19abef;
float:left;
max-width:150px;
overflow:hidden;
text-overflow:ellipsis;
} .time
{
clear:both;
font-size: 15px;
color: grey;
} .btn:hover img
{
border: 1px solid #0000ff;
} .news
{
width: 100%;
float:left;
clear:both;
margin-left:10px;
margin-bottom:10px;
} .title
{
font-size: 25px;
width: 70px;
float:left;
} #newsLink
{
width: 100px;
font-size: 15px;
font:#19abef;
float:left;
margin-top:10px;
margin-left:50px; } #load
{
margin-left:70px;
} .hidden
{
display:none;
}
ＪＳ文件：
var skip = 5;
var count = 0; function formatDate(date, pattern) {
var d;
if ((d = parseDate(date)) == null) {
return "";
}
if (!pattern) {
pattern = "yyyy-MM-dd";
}
var arrWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "Sunday", "Monday", "Tuesday", "Tuesday", "Thursday", "Friday", "Saturday"];
var value = new Object();
value["y"] = parseString(date.getFullYear());
value["M"] = parseString(date.getMonth() + 1);
value["d"] = parseString(date.getDate());
value["H"] = parseString(date.getHours());
value["h"] = parseString(value["H"] > 12 ? (value["H"] - 12) : value["H"]);
value["m"] = parseString(date.getMinutes());
value["s"] = parseString(date.getSeconds());
value["S"] = parseString(date.getMilliseconds());
value["E"] = arrWeek[date.getDay()];
value["e"] = arrWeek[date.getDay() + 7];
value["a"] = (value["H"] > 12 ? "PM" : "AM");
value["A"] = (value["H"] > 12 ? "下午" : "上午");
var result = "";
var i = 0;
var hasE = false;
var hasAMPM = false;
while (i < pattern.length) {
var c = pattern.charAt(i++);
var lc = c;
var tmpStr = c;
while (i < pattern.length && (c = pattern.charAt(i)) == lc) {
tmpStr += c;
i++;
}
if (value[lc] != "" && value[lc] != null && value[lc] != "undefined") {
if ((lc == "E" || lc == "e") && !hasE) {
result += value[lc];
hasE = true;
} else if (lc == "E" || lc == "e") {
result += tmpStr;
} else if ((lc == "a" || lc == "A") && !hasAMPM) {
result += value[lc];
hasAMPM = true;
} else if ((lc == "a" || lc == "A")) {
result += tmpStr;
} else {
if (tmpStr == "d" || tmpStr == "M" || tmpStr == "H" || tmpStr == "h" || tmpStr == "m" || tmpStr == "s") {
result += value[lc];;
} else {
result += value[lc].fillChar(tmpStr.length);
}
}
} else {
result += tmpStr;
}
}
return result;
} function parseDate(value) {
var date = null;
if (Date.prototype.isPrototypeOf(value)) {
date = value;
} else if (typeof (value) == "string") {
date = new Date(value.replace(/-/g, "/"));
} else if (value != null && value.getTime) {
date = new Date(value.getTime());
}
;
return date;
}; function parseString(value) {
if (value == null) {
return "";
} else {
return value.toString();
}
};
String.prototype.fillChar = function (length, mode, char) {
if (!char) {
char = "0";
}
if (this.length > length) {
if (mode == "after") {
return this.substr(0, length);
} else {
return this.substr(this.length - length, length);
}
}
var appendStr = "";
for (var i = 0; i < (length - this.length) / char.length; i++) {
appendStr += char;
}
if (mode == "after") {
return this + appendStr;
}
else {
return appendStr + this;
}
}; function execute(url, type, verb, data, success, error) {
var host = window.location.protocol + '//' + window.location.host;
var webUrl = _spPageContextInfo.webServerRelativeUrl;
var urlFull = host + webUrl;
$.ajax({
url: urlFull + "/_api/web/lists/GetByTitle('News')/" + url,
type: type,
data: data,
headers: {
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"IF-MATCH": "*",
"X-HTTP-Method": verb
},
cache: false,
success: success,
error: error
});
} function retriveListItem() {
$("#pre").off("click");
$("#next").off("click");
$("#result").html("<img id=\"load\" src=\"http://wsscfd/CEC/PublishingImages/busy.gif\">");
var skips = skip * count;
var numItmes = skip * (count + 1);
numPlus = numItmes + 1; execute(
"items?$orderby=Created desc&$select=ID,Title,Created&$top=" + numPlus,
"GET",
"GET",
null,
function (data, status, xhr) {
$("#result").html("");
var body = "";
var length = data.d.results.length;
if (length > numItmes) {
$("#next").show();
}
else {
$("#next").hide();
}
if (length <= 5) {
$("#pre").hide();
$("#next").hide();
}
if (length > 6) {
$("#pre").show();
}
else {
$("#pre").hide();
} for (var i = 0; i < data.d.results.length; i++) {
if (i >= skips && i < numItmes) {
var item = data.d.results[i];
var date = new Date(item.Created);
var str = date.toDateString();
var month = str.substr(4, 3);
dateFormat = formatDate(date, "dd yyyy hh:mm a");
var host = window.location.protocol + '//' + window.location.host;
var webUrl = _spPageContextInfo.webServerRelativeUrl;
var itemUrl = host + webUrl + "/Lists/News/DispForm.aspx" + "?ID=" + item.ID;
var sourceUrl = window.location.href;
if (sourceUrl.indexOf("&Source=") > 0) {
var sourceUrlR = sourceUrl.substring(0, sourceUrl.indexOf("&Source="));
sourceUrl = sourceUrl.replace(sourceUrlR, "");
}
else {
var sourceUrl = "&Source=" + window.location.href;
}
$("#result").append("<div class='item'><div class='head'><a href='" + itemUrl + sourceUrl + "' title = '" + item.Title + "'>" + item.Title + "</a></div>" + "<div class='time'>" + month + " " + dateFormat + "</div>" + "</div>");
}
} $("#pre").one("click", pre); $("#next").one("click", next);
},
function (xhr, status, error) {
$("#result").empty().text(error);
});
} function next() {
count++;
retriveListItem();
} function pre() {
if (count > 0) {
count--;
retriveListItem();
}
} function CheckPermissionOnWebForSpec() {
context = new SP.ClientContext.get_current(); web = context.get_web(); this._currentUser = web.get_currentUser(); context.load(this._currentUser); context.load(web, 'EffectiveBasePermissions'); context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethodForSpec), Function.createDelegate(this, this.onFailureMethodForSpec));
} function onSuccessMethodForSpec(sender, args) {
if (web.get_effectiveBasePermissions().has(SP.PermissionKind.manageWeb)) {
var specAccessManageLink = document.getElementById('newsLink');
specAccessManageLink.classList.remove('hidden'); var host = window.location.protocol + '//' + window.location.host;
var webUrl = _spPageContextInfo.webServerRelativeUrl;
var allItems = host + webUrl + "/Lists/News/AllItems.aspx";
$(".manageLink").attr("href", allItems);
}
} function onFailureMethodForSpec(sender, args) {
alert('error' + args.message);
} $(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(CheckPermissionOnWebForSpec, "sp.js");
ExecuteOrDelayUntilScriptLoaded(retriveListItem, "sp.js");
});
５. 到此，大功告成！如有疑问，相互探讨。。。。
最新文章
- eclipse 快捷键Alt+/ 不能补充syso
- java面向对象编程——第四章 类和对象
- SQL —— 一些需要注意的地方（持续更新）
- 解决android sdk manage打开闪退的解决方法
- or1200下raw-os学习(任务篇)
- Mysql innodb 后台的7大线程与3大内存
- CDH集群频繁告警（host频繁swapping）
- C#入门经典第八章面向对象编程-3-Windows应用程序中的OOP
- Nginx + ngx_lua安装测试【CentOs下】
- Vue项目结构说明
- Jmeter性能测试 如何利用SQLserver造出大批的数据
- IOC之Unity的使用详解
- hdu 1241 Oil Deposits （简单搜索）
- css样式兼容各个浏览器时的部分总结
- plsql 用法和技巧
- 淘宝JAVA中间件Diamond详解之简介&快速使用 管理持久配置的系统
- Java中获取32位UUID
- go-study
- Beautiful Year(拆分四位数)
- LeetCode——Range Sum Query - Immutable