SharePoint 2013 Designer系列之数据视图
来源:互联网 发布:网络大讲堂 编辑:程序博客网 时间:2024/05/04 16:43
在SharePoint使用中,数据展示是一块很重要的部分,很多时候我们会采用webpart的形式,但是有一些情况,我们不必使用开发,仅需使用Designer即可,下面让我简单介绍下数据视图的使用。
1、创建一个测试列表,以下为测试列表的字段,如下图:
2、插入一些测试数据(纯属捏造,仅供娱乐),如下图:
3、创建一个测试页面,如下图:
4、在PlaceHolderMain节点里,插入webpartzone,然后插入数据视图,选择我们的测试列表News,如下图:
5、切换到设计标签,选择第四个视图样式,如下图:
6、查看一眼demo页面,如下图:
7、设计一下分页,点击ribbon里的其他分页选项,如下图:
8、我这里6个项目分成一页,如下图:
9、然后在ribbon上,点击自定义xslt,选择自定义整个视图,如下图:
10、搜索”ms-stylebox”找到如下位置,修改里面的xslt,注意不要改错了,否则整个视图报错;然后加上相关的样式,如下图;
11、由于内容部分可能过长,我这里使用jq处理了一下长度,脚本附下:
<script type="text/javascript" src="/_layouts/15/Jquery/jquery-1.7.1.js"></script><script type="text/javascript">function ContentLimit(){ var Id = "customContent"; var Num = 50; var td = $('td[class=' + Id + ']'); //alert(td.length); for(var i = 0;i < td.length;i++) { if(td[i].innerText.length > Num) { td[i].innerText = td[i].innerText.substring(0,Num) + "..."; td[i].style.display = "block"; } else { td[i].style.display = "block"; } }}setInterval(ContentLimit,500);function TitleLimit(){ var Id = "customTitle"; var Num = 15; var td = $('td[class=' + Id + ']'); //alert(td.length); for(var i = 0;i < td.length;i++) { if(td[i].innerText.length > Num) { td[i].innerText = td[i].innerText.substring(0,Num) + "..."; td[i].style.display = "block"; } else { td[i].style.display = "block"; } }}setInterval(TitleLimit,500);</script>
12、保存完页面后,前台查看,我们使用数据视图制作的页面,还算不错吧?!
13、如果对分页不满意,可以找到如下位置,搜”ms-paging”即可,如下图:
14、如果想隐藏上面的工具栏的栏名称,可以找到<th标签,然后通通隐藏,如下图:
15、最后页面的效果,大家可以看一看,是不是挺棒的?!呵呵。
总 结
数据视图,顾名思义就是展示数据使用的视图,包含了筛选、分组等多种展现形式,大家有兴趣可以多多尝试,这里仅举一小例子介绍一下,希望能对有需要的人以帮助。
- SharePoint 2013 Designer系列之数据视图
- SharePoint 2013 Designer系列之数据视图筛选
- SharePoint 2013 工作流设计之Designer 使用“可视化视图”
- SharePoint 2013 Designer系列之自定义列表表单
- Sharepoint 轻量化应用构建之熟悉Sharepoint Designer 2013!
- 在SharePoint Designer 2007中使用交叉列表查询的数据视图
- SharePoint 2013 工作流之使用Designer配置示例篇
- SharePoint 2013 工作流之年假审批Designer配置篇
- 利用SharePoint 2013 创建Service Desk 网站之利用SharePoint Designer设定邮件发送动作!
- SharePoint 2013 图文开发系列之WebPart
- SharePoint 2013 图文开发系列之入门教程
- SharePoint designer 2013 打开工作流报错
- SharePoint 2013 Designer 自定义操作菜单
- SharePoint 2013 Designer 自定义操作菜单
- SharePoint Designer 2013 中的更改内容
- SharePoint 2013 SharePoint designer 2013 workflow开发综合实例
- SharePoint 2013 开发——SharePoint Designer 2013工作流
- [SharePoint Designer -3]DataForm Web Part中的数据操作
- SharePoint 2013 Designer系列之自定义列表表单
- category 功能
- ffmpeg编译错误,提示找不到相应的shared libraries :libavdevice.so.53
- java-快速排序
- C++基础之常用运算符
- SharePoint 2013 Designer系列之数据视图
- 安装expect
- PHP生成HTML静态页面实例代码
- SharePoint 2013 Designer系列之数据视图筛选
- timepicker与flexigrid
- 【DB.Oracle】彻底删除Oracle —— 解决Oracle卸载不完全的问题
- 笔记
- P2P平台惨遭“黑客劫” 缘起安全漏洞
- ubuntu centos 安装docker