列菜单项列表自定义

Question

目前，我正在研究 Angular 2 的 SyncFusion 网格 syncfusion-ej2 并发现了一个很棒的功能 - 打开列菜单以将所有控件（排序、分组、过滤器）集中在一个地方。

但这还不足以满足我的需求，我正在寻找自定义列菜单中项目列表的方法，例如我希望能够添加带有自定义操作的项目，以响应 click/select 用户操作。

比如我想添加一个项目来直接隐藏当前列或者固定这个列。

能否请您告诉我是否可行以及如何实现？或者我应该为此操作创建一个自定义组件？

提前致谢。

Answer 1

好吧，伙计们，我在正确的文档的 TypeScript 部分找到了我的问题的解决方案 here

不幸的是，它现在不能像演示中那样工作。但他们说已经 fixed 这个问题，发布日期是今天，2018 年 1 月 10 日。

这是一个有效的 example TypeScript 版本。

</p> <pre><code>import { Grid, ColumnMenu, Sort, Page } from '@syncfusion/ej2-grids'; import { MenuEventArgs } from '@syncfusion/ej2-navigations'; import { data } from './datasource.ts'; Grid.Inject(ColumnMenu, Page, Sort); // The problem is in the base constant value // columnMenuClick should have a value "columnMenuClick" // but it has a value "contextMenuClick" like contextMenuClick constant for context menu let grid: Grid = new Grid({ dataSource: data, allowPaging: true, allowSorting: true, showColumnMenu: true, columnMenuItems:[{text:'Clear Sorting', id:'gridclearsorting'}], contextMenuClick: function(args: MenuEventArgs){ if(args.item.id === 'gridclearsorting'){ grid.clearSorting(); } }, sortSettings:{ columns:[{direction: "ascending", field: "OrderID"}] }, columns: [ { field: 'OrderID', headerText: 'Order ID', width: 200, textAlign: 'right', showInColumnChooser: false }, { field: 'Freight', width: 150, format: 'C2', textAlign: 'right', editType: 'numericedit' }, { field: 'ShipName', headerText: 'Ship Name', width: 300 }, { field: 'ShipCountry', headerText: 'Ship Country', visible: false, width: 200 }, { field: 'ShipCity', headerText: 'Ship City', width: 200 } ] }); grid.appendTo('#Grid');

这是 Angular 4 版本的工作 example。 </p> <pre><code>import { Component, OnInit, ViewChild } from '@angular/core'; import { SortService, ResizeService, GroupService, ColumnMenuService, PageService, FilterService } from '@syncfusion/ej2-ng-grids'; import { ContextMenuItem, GroupSettingsModel, FilterSettingsModel, EditSettingsModel, ColumnMenuItemModel } from '@syncfusion/ej2-ng-grids'; import { GridComponent } from '@syncfusion/ej2-ng-grids'; import { MenuEventArgs } from '@syncfusion/ej2-navigations'; import { data } from './data'; @Component({ selector: 'control-content', templateUrl: 'columnmenu.html', }) export class ColumnMenuComponent implements OnInit { public data: Object[]; public groupOptions: GroupSettingsModel; public filterSettings: FilterSettingsModel; public columnMenuItems: ColumnMenuItemModel[]; @ViewChild('grid') public grid: GridComponent; ngOnInit(): void { this.data = data.slice(0, 60); this.groupOptions = { showGroupedColumn: true }; this.filterSettings = { type: 'checkbox' }; this.columnMenuItems = [{text:'Clear Sorting', id:'gridclearsorting'}]; } public columnMenuClick(args: MenuEventArgs): void { console.log('123'); if(args.item.id === 'gridclearsorting'){ this.grid.clearSorting(); } } }

Answer 2

Essential JS 2 Grid v 15.4.24 已经发布，其中包含“上下文菜单事件触发”的问题修复。请找到下面的工作 plunker 示例。

columnMenuClick(args){
    if(args.item.id === 'gridclearsorting'){
        this.grid.clearSorting();
    }
}

Demo

在该示例中，我们添加了自定义列菜单选项以清除网格排序。

列菜单项列表自定义

Column menu items list customization

javascript

syncfusion

typescript

angular