javascript实现silverlight pivotViewer控件

时间：2022-07-03 07:53:24

一时无事，就用js实现了一个silverlight pivotViewer控件来练手。

实现效果：

javascript实现silverlight pivotViewer控件

silverlight PivotViewer说明地址：https://msdn.microsoft.com/zh-cn/library/system.windows.controls.pivot.pivotviewer(v=vs.95).aspx

提前上代码：pivotViewer

主要分了几个类来实现：

PivotViewer:主控件，负责设置属性，组合控件，绑定数据。也是调用的入口

PivotViewerDateTimeProperty、PivotViewerStringProperty:属性绑定，说明属性名称，对应绑定的数据

PivotViewerSelection、PivotViewerDataSourceFilter、PivotViewerPropertyComboBox、PivotViewerViewMode:内部控件，用来显示用户选择的过滤条件、设置过滤条件、设置排序（分组）属性、设置显示模式（表格、图表）

PivotViewerDataSource:处理用户输入的数据源，包括分组、数据排序等。这里的分组功能只做了简单的日期分组和唯一值分组

调用方法很简单，直接模仿的silverlight，所以和silverlight类似：

<div id="panel">

<div class="filter" id="filter"></div>

<div class="selection" id="selection"></div>

<div class="viewMode" id="viewMode"></div>

<div class="sortMode" id="sortMode"></div>

<div class="pivotMain" id="pivotMain"></div>

</div>

#panel { width:100%;height:100%;position:relative;}

    .filter { position:absolute;left:0;width:200px;top:50px; bottom:0px;z-index:1;overflow:auto; }

    .selection { position:absolute;left:0;width:100%;top:0;height:50px;z-index:1; }

    .viewMode { position:absolute;right:0px;margin-top:10px;height:30px;z-index:2; }

    .sortMode { position:absolute;right:300px;margin-top:10px;height:30px;z-index:2; }

    .pivotMain { position:absolute;left:200px;right:0;top:50px;bottom:0; }

    .pivot_wrap { width:100%;height:100%;position:relative;}

    .pivot_item { position:absolute;}

    .pivot_item {

      -webkit-transition: all .5s linear;

      -moz-transition: all .5s linear;

      -ms-transition: all .5s linear;

      transition: all .5s linear;

    }

    .pivot_groupbg { position: absolute; z-index: -1; height: 100%; }

    .pivot_group_title { text-align:center; position: absolute; height: 50px; bottom: 0px; width: 100%; line-height: 50px; }

　　

window.onload = function () {

      var pivot = new PV.PivotViewer();

      pivot.PivotProperties = [new PV.PivotViewerStringProperty(

        { Id: "FName", Options: PV.PivotViewerPropertyOptions.CanFilter, DisplayName: "First Name", Binding: "FirstName" }

        ), new PV.PivotViewerStringProperty(

        { Id: "LName", Options: PV.PivotViewerPropertyOptions.CanFilter, DisplayName: "Last Name", Binding: "LastName" }

        ), new PV.PivotViewerDateTimeProperty(

        { Id: "Birthdate", Options: PV.PivotViewerPropertyOptions.CanFilter, DisplayName: "Birthdate", Binding: "Birthdate" }

        )];

      pivot.ItemTemplates = function (obj) {

        return "<div class='pivot_item'>\

                                <span>"+ obj.FirstName + "</span>\

                                <span>" + obj.LastName + "</span>\

                             </div>";

      };

      pivot.ItemSource = [

        { FirstName: "Albert", LastName: "Rinoff", Birthdate: DateTime(1949, 06, 04), Department: "Sales", Office: "212" },

        { FirstName: "Bertha", LastName: "Smith", Birthdate: DateTime(1968, 07, 12), Department: "Marketing", Office: "324" },

        { FirstName: "Larry", LastName: "Summers", Birthdate: DateTime(1952, 08, 25), Department: "R $amp; D", Office: "150" },

        { FirstName: "Susan", LastName: "Stendy", Birthdate: DateTime(1953, 09, 05), Department: "Marketing", Office: "334" },

        { FirstName: "Mary", LastName: "Gomez", Birthdate: DateTime(1965, 10, 09), Department: "Sales", Office: "210" },

        { FirstName: "Mary", LastName: "Rodrigues", Birthdate: DateTime(1976, 04, 11), Department: "R $amp; D", Office: "140" }

      ];

      pivot.render(document.getElementById("panel"));

    };

    DateTime = function (year, month, day) {

      return new Date(year, month, day);

    };

动画用了css3；没有引入jquery，所以用了getElementsByClassName，请使用适当的浏览器打开示例。

思路都是抄的，就不写辣莫详细。大家看看js就好，有没有一种c#的感脚。

用了自己的wod.CLS，如需了解请转到上一篇= =　

　　

相关文章