javascript实现silverlight pivotViewer控件

一时无事，就用js实现了一个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，如需了解请转到上一篇= =