项目需求:自定义开发一个能分页显示列表项的小部件,允许左右翻页,能根据用户权限来显示管理链接等。
效果如下:
技术要求:使用sharepoint rest API 来获取列表项,这样性能高,能够快速响应用户操作。(关于REST API详细介绍见我的博客:SharePoint REST Service steps by steps)
注意: 这里我固定单页显示5项,可自行更改。当页面在第一页时,默认左分页隐藏,最后一页时,右分页默认隐藏。在页面加载过程会出现加载图片的效果,页面重新刷新时,不会记录之前用户所在分页,默认回到第一页,有兴趣的朋友,可以把这功能改改。
步骤:
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文件