开发者社区> 霖雨001> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

SharePoint 2013 Designer系列之数据视图

简介:   在SharePoint使用中,数据展示是一块很重要的部分,很多时候我们会采用webpart的形式,但是有一些情况,我们不必使用开发,仅需使用Designer即可,下面让我简单介绍下数据视图的使用。   1、创建一个测试列表,以下为测试列表的字段,如下图:   2、插入一些测试数据(纯属捏...
+关注继续查看

  在SharePoint使用中,数据展示是一块很重要的部分,很多时候我们会采用webpart的形式,但是有一些情况,我们不必使用开发,仅需使用Designer即可,下面让我简单介绍下数据视图的使用。

  1、创建一个测试列表,以下为测试列表的字段,如下图:

clip_image002

  2、插入一些测试数据(纯属捏造,仅供娱乐),如下图:

clip_image004

  3、创建一个测试页面,如下图:

clip_image006

  4、在PlaceHolderMain节点里,插入webpartzone,然后插入数据视图,选择我们的测试列表News,如下图:

clip_image008

  5、切换到设计标签,选择第四个视图样式,如下图:

clip_image010

  6、查看一眼demo页面,如下图:

clip_image012

  7、设计一下分页,点击ribbon里的其他分页选项,如下图:

clip_image014

  8、我这里6个项目分成一页,如下图:

clip_image016

  9、然后在ribbon上,点击自定义xslt,选择自定义整个视图,如下图:

clip_image018

  10、搜索”ms-stylebox”找到如下位置,修改里面的xslt,注意不要改错了,否则整个视图报错;然后加上相关的样式,如下图;

clip_image020

  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、保存完页面后,前台查看,我们使用数据视图制作的页面,还算不错吧?!

clip_image022

  13、如果对分页不满意,可以找到如下位置,搜”ms-paging”即可,如下图:

clip_image024

  14、如果想隐藏上面的工具栏的栏名称,可以找到<th标签,然后通通隐藏,如下图:

clip_image026

  15、最后页面的效果,大家可以看一看,是不是挺棒的?!呵呵。

clip_image028

总 结

  数据视图,顾名思义就是展示数据使用的视图,包含了筛选、分组等多种展现形式,大家有兴趣可以多多尝试,这里仅举一小例子介绍一下,希望能对有需要的人以帮助。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SharePoint 2013 图文开发系列之事件接收器
原文:SharePoint 2013 图文开发系列之事件接收器   在SharePoint的使用中,我们经常需要在完成一个动作之后,触发一个事件;比如,我们上传一个文档,但是没有标题,我们需要在上传完成之后,触发一个事件把文件名同步到标题,这就需要用到事件接收器。
832 0
SharePoint 2013 图文开发系列之创建内容类型
原文:SharePoint 2013 图文开发系列之创建内容类型   SharePoint内容类型,是很有特色的,就好比发布新闻,同在一张列表里,可以由内容类型区分图片新闻、文字新闻等,顾名思义,就是在一张列表里发布不同类型的项目。
852 0
SharePoint 2013 数据库中手动更新用户信息
  在SharePoint的使用过程中,尤其是Windows认证的情况下,而且没有配置用户配置文件服务,经常会出现如果更新AD中的用户信息(包括名字、显示名、邮件等),SharePoint这边站点并不会更新的情况。
751 0
SharePoint 2013 Designer 入门教程
  SharePoint的使用中,SharePoint Designer是非常重要的工具,我们可以通过Designer设计页面、母版页,维护、管理站点,也可以定制列表表单、数据视图,设计工作流等等。下面总结一下之前写过的一些关于Designer的博客,给需要的人参考一下。
1520 0
SharePoint 2013 Designer系列之自定义列表表单
  在SharePoint的使用中,默认的样式过于单调经常困扰着我们,其实,SharePoint使用Designer工具,可以很轻松解决这一问题,制作出各式各样漂亮的页面。下面,让我们简单介绍下这一过程。
1085 0
SharePoint 2013 图文开发系列之创建内容类型
  SharePoint内容类型,是很有特色的,就好比发布新闻,同在一张列表里,可以由内容类型区分图片新闻、文字新闻等,顾名思义,就是在一张列表里发布不同类型的项目。 1、添加新项目,选择SharePoint 2013 空项目,如下图: 2、选择调试网站和解决方案类型,如下图: 3、添...
887 0
SharePoint 2013 图文开发系列之事件接收器
  在SharePoint的使用中,我们经常需要在完成一个动作之后,触发一个事件;比如,我们上传一个文档,但是没有标题,我们需要在上传完成之后,触发一个事件把文件名同步到标题,这就需要用到事件接收器。   此例,就是在SharePoint 2013文档库中,上传文档以后,将标题更新为文档名称的事件接收器。
576 0
SharePoint 2013 图文开发系列之WebPart
  这是我们介绍SharePoint开发入门的第一篇,在这一篇里,我们会介绍SharePoint开发的几个关键物理路径,一些开发技巧和最基础的WebPart开发。 开发工具   在SharePoint 2013开发中,我们使用的是Visual Studio 2012/2013均可,但是VS2012要额外安装Microsoft Office Develop Tools for Visual Studio 2012,可以使用Microsoft Web PlatForm Install进行安装。
1087 0
SharePoint 2013 工作流之使用Designer配置示例篇
  在SharePoint 2013中,支持SharePoint Designer 2013(以下简称SPD)配置简单的工作流,完成我们的业务需要。下面,我们就举一个小例子,实现SPD配置工作流。 1、 首先,打开SPD,打开SharePoint站点,在Ribbon菜单上,选择列表工作流,选择需要...
1140 0
+关注
霖雨001
霖雨,微软最有价值专家SharePoint方向,CSDN学院讲师。2010年开始致力于SharePoint相关技术研究,精通SharePoint 环境搭建、架构、实施、开发、运维、排错等技术。
274
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载