Question

目前，我正在调查Angular 2的SyncFusion网格syncfusion-ej2并找到了很棒的功能 - 打开列菜单以将所有控件（排序，分组，过滤器）放在一个位置。

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

例如，我想添加一个项目来直接隐藏当前列或固定此列。

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

提前致谢。

Answer 1

Essential JS 2 Grid v 15.4.24已经发布，并且包含了“上下文菜单事件触发”的问题修复。请找到以下工作的plunker样品。

$apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
$unixEpochStart = Get-Date -Date "01/01/1970"
$now = Get-Date
$timestamp = (New-TimeSpan -Start $unixEpochStart -End $now.ToUniversalTime()).TotalMilliseconds
$timestamp = ([math]::Round($timestamp, 0)).ToString()
$apimessage = "symbol=LTCBTC&side=BUY&type=LIMIT&timeInForce=GTC&quantity=1&price=0.1&recvWindow=5000&timestamp=$timestamp"
$apisecret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

$hmacsha = New-Object System.Security.Cryptography.HMACSHA256
$hmacsha.key = [Convert]::FromBase64String($apisecret)
$signature = $hmacsha.ComputeHash([Text.Encoding]::ASCII.GetBytes($apimessage))
$signature = [Convert]::ToBase64String($signature)

$uri = "https://api.binance.com/api/v3/order/test?$apimessage&signature=$signature"

$header = @{
        "X-MBX-APIKEY" = $apiKey
        }

Invoke-RestMethod -Method Post -Uri $uri -Headers $header -Verbose

Demo

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

Answer 2

嗯，大家好，我在文档的TypeScript部分找到了我的问题的解决方案here

不幸的是，它现在无法正常运行，就像它在演示中所示。但是他们说已经fixed这个问题，并且将于今天发布，即2018年1月10日。

以下是TypeScript版本的example。



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');

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。

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();
        }
    }
}

列菜单项列表自定义

2 个答案: