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

实现效果：

silverlight PivotViewer说明地址：

 

提前上代码：

主要分了几个类来实现：

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

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

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

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

 

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

#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 "
     
      \                                
      "+ obj.FirstName + "\                                
      " + obj.LastName + "\                             
     
";      };      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，如需了解请转到上一篇= =