概述
本文主要描述在Wijmo5下，FlexGrid如何做到列选择器，以及按需来隐藏不必要的列显示，应用的属性包括列集合，列属性。
第一步 ：列属性
操作flexgrid的列属性，我们要知道如何得到他们，他们都有哪些属性需要设置，以达到我们的要求。
首先，这个链接讲解了flexgrid的属性，方法，事件
无疑我们需要拿到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.
（注意：对于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: });
最后的效果如下：
完成列筛选器。
完成动态隐藏列
demo附件：
了解Wijmo产品，访问如下链接：
