← 返回所有博客文章

概述

本文主要描述在Wijmo5下,FlexGrid如何做到列选择器,以及按需来隐藏不必要的列显示,应用的属性包括列集合,列属性。

第一步 :列属性

操作flexgrid的列属性,我们要知道如何得到他们,他们都有哪些属性需要设置,以达到我们的要求。

首先,这个链接讲解了flexgrid的属性,方法,事件

/developer/wijmojscore

无疑我们需要拿到ColumnCollection columns,这是数据表的列集合,对于Column(Represents a column on the grid.)做为每个数据子项,在他的属性下面有一个visible的属性,这是我们今天博客的核心。

visible of Column

Gets or sets a value that indicates whether the row or column is visible.

Inherited From
RowCol
Type
boolean

(注意:对于column的介绍中文api目前还不是很全,我们只能到美国的网站上看到。)

第二步:实践

介绍完我们的理论,现在我们来实践:

我们要用到的组件有flexgrid 、combox、button

首先初始化表格:

   1:      var data = [],
   2:          countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
   3:          products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'],
   4:          colors = ['Black', 'White', 'Red', 'Green', 'Blue'],
   5:          dt = new Date();
   6:              for (var i = 0; i < 100; i++) {
   7:                  var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
   8:                    countryId = Math.floor(Math.random() * countries.length),
   9:                    productId = Math.floor(Math.random() * products.length),
  10:                    colorId = Math.floor(Math.random() * colors.length);
  11:                  var item = {
  12:                      id: i,
  13:                      start: date,
  14:                      end: date,
  15:                      country: countries[countryId],
  16:                      product: products[productId],
  17:                      color: colors[colorId],
  18:                      countryId: countryId,
  19:                      productId: productId,
  20:                      colorId: colorId,
  21:                      amount1: Math.random() * 10000 - 5000,
  22:                      amount2: Math.random() * 10000 - 5000,
  23:                      amount3: Math.random() * 10000 - 5000,
  24:                      amount4: Math.random() * 10000 - 5000,
  25:                      amount5: Math.random() * 10000 - 5000,
  26:                      discount: Math.random() / 4,
  27:                      active: i % 4 == 0
  28:                  };
  29:                  data.push(item);
  30:              }
  31:   
  32:              // creante the grid
  33:              var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  34:                  showAlternatingRows:false,
  35:                  formatItem: function (s, e) {
  36:                      if (e.panel == s.topLeftCells) {
  37:                          e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';//添加列选器的按钮
  38:                      }
  39:                  },
  40:                  itemsSource: data,
  41:              });

然后绑定列选择器的按钮

   1:      // create the column picker
   2:              var theColumnPicker = new wijmo.input.ListBox('#theColumnPicker', {
   3:                  itemsSource: theGrid.columns,
   4:                  checkedMemberPath: 'visible',
   5:                  displayMemberPath: 'header',
   6:                  lostFocus: function () {
   7:                      wijmo.hidePopup(theColumnPicker.hostElement);
   8:                  }
   9:              });
   1:      // show the column picker when the user clicks the top-left cell
   2:              var ref = theGrid.hostElement.querySelector('.wj-topleft');
   3:              ref.addEventListener('mousedown', function (e) {
   4:                  if (wijmo.hasClass(e.target, 'column-picker-icon')) {
   5:                      wijmo.showPopup(theColumnPicker.hostElement, ref, false, true, false);
   6:                      theColumnPicker.focus();
   7:                      e.preventDefault();
   8:                  }
   9:              });

最后,设置按钮来完成动态隐藏列

   1:  document.getElementById('btnSave').addEventListener('click', function () {
   2:                  debugger
   3:                  //动态来判断隐藏列
   4:                  if (theGrid.columns[1].header == "Start") {
   5:                      theGrid.columns[1].visible = false;
   6:                  }
   7:                  if (theGrid.columns[6].header == "Country Id") {
   8:                      theGrid.columns[6].visible = false;
   9:                  }
  10:              });

最后的效果如下:

imageimageimage完成列筛选器。

imageimage完成动态隐藏列

demo附件:

了解Wijmo产品,访问如下链接:

/developer/wijmojscore

/developer/wijmojscore