使用Angular JS的劍道網格中的工具欄“列菜單”

Question

如何在Kendo網格的工具欄中放置列菜單以根據需要選擇列？

dataSource: $scope.kDisplayReceivedOrders,
            toolbar: ["save", "cancel",
                {
                    template:
                        '<button class="k-button k-button-icontext " ng-click="confirmReceivedOrder()" >Confirm</button>' +
                        '<button class="k-button "  ng-click="printReceivedOrderDetails()">Print</button>'
                }
            ],

Answer 1

您不能從工具欄內的Kendo網格中插入columnMenu，因為Kendo會將columnMenu添加到當前網格中。

但是，您可以做的是在自己的工具欄中自動實現此菜單的行為。 我最近為一個項目完成了它。

我做了什么：

• 角度分量。
• 單擊該組件時，我會看到可見的列。
  • 我通過.getOptions()完成該操作，然后檢查返回對象的columns屬性。 不可見的列將具有hidden=true 。
• 然后，在模板中，我顯示所有列並帶有一個復選框，以切換可見性。
• hideColumn()和showColumn()應該附加到選中或取消選中復選框的操作。

角組件控制器：

init() {
 if(this.grid)
  this.columns = getColumns(this.grid.getOptions().columns);
}

checkbox(column) {
  column.visible === true ? this._objectViewService.grid.showColumn(column.field) : this._objectViewService.grid.hideColumn(column.field);
}

從kendo默認轉換為我的可視化系統的方法：

function getColumns(columns) {
 let cols = [];
 columns.forEach(column => cols.push({title: column.title, field:   column.field, visible: column.hidden !== undefined ? !column.hidden : true}));
 return cols;
}

模板：

<div class="columnDropdownComponent">
 <p class="title" ng-mouseover="$ctrl.init()">
  <button>Columns<span class="icon-navigation-down"></span></button>
 </p>
 <div class="dropdown">
  <div class="group">
   <label ng-repeat="column in $ctrl.columns" ng-class="{'checked': column.visible}">
    {{column.title}}
   <input type="checkbox" ng-model="column.visible" ng-click="$ctrl.checkbox(column)">
  </label>
 </div>
</div>