ui-grid、angular 的自定义 header 模板
Custom header template for ui-grid , angular
我正在尝试 angular's ui-grid 一个项目,但发现很难为我的网格构建自定义模板。当我检查源代码时,我得到了下面的 html 模板,我将它保存到一个文件中,header-template.html 并在配置网格时引用它。
<div class="ui-grid-header">
<div class="ui-grid-top-panel">
<div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class="">
<div class="ui-grid-group-panel ng-scope">
<div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0">
Drag a column header here and drop it to group by that column.</div>
<ul ng-show="groupings.length > 0" class="ngGroupList ">
<!-- ngRepeat: group in configGroups -->
</ul>
</div>
</div>
<div class="ui-grid-header-viewport">
<div class="ui-grid-header-canvas">
<!--ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
<div class="ui-grid-header-cell clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell="" col="col" render-index="$index" ng-style="$index === 0 && colContainer.columnStyle($index)">
<div ng-class="{ 'sortable': sortable }" class="sortable">
<div class="ui-grid-vertical-bar"> </div>
<div class="ui-grid-cell-contents" col-index="renderIndex">
<span class="">{{col.colDef.name}}</span>
<span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }" class="ui-grid-invisible ui-grid-icon-blank"> </span>
</div>
<!-- ngIf: grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false -->
<!-- ngRepeat: colFilter in col.filters -->
<!-- ngIf: filterable -->
<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
{{colFilter}}
<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" placeholder="">
<div class="ui-grid-filter-button" ng-click="colFilter.term = null">
<i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term"> </i>
<!-- use !! because angular interprets 'f' as false -->
</div>
</div>
<!-- end ngIf: filterable --><!-- end ngRepeat: colFilter in col.filters -->
</div>
</div>
<!-- end ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
</div>
</div>
<div ui-grid-menu="" class=""><!-- ngIf: shown -->
</div>
</div>
</div>
我已经通过
指定了 gridOptions
$scope.gridOptions = {
data: 'gridData',
enableRowHeaderSelection: false,
multiSelect: false,
enableFiltering: true,
columnDefs: $scope.columnDef,
enableColumnMenus: false,
headerTemplate:'views/header-template.html'
};
但由于某种原因,我不知道为什么,我得到了这个,如图所示。模板再次打印,位于我尝试构建的模板下方
请帮忙..
headerTemplate
将作为 <div class="ui-grid-header-viewport">
的前一个兄弟添加到 <div class="ui-grid-top-panel">
,因此您的 views/header-template.html
应仅包括:
<div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class="">
<div class="ui-grid-group-panel ng-scope">
<div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0">
Drag a column header here and drop it to group by that column.
</div>
<ul ng-show="groupings.length > 0" class="ngGroupList ">
<!-- ngRepeat: group in configGroups -->
</ul>
</div>
</div>
参考这个official demo
为了获得我想要实现的目标,我必须在网格的 columnDefs 中指定一个 headerCellTemplate(不是 headerTemplate),如下所示:
{
field: key, displayName: key
, headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-vertical-bar"> </div>' +
'<div class="ui-grid-cell-contents" col-index="renderIndex">' +
'<span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">' +
' ' +
'</span>' +
'</div>' +
'<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">' +
'<i class="ui-grid-icon-angle-down"> </i>' +
'</div>' +
'<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">' +
'<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-attr-placeholder="{{col.displayName || \'\'}}" />' +
'<div class="ui-grid-filter-button" ng-click="colFilter.term = null">' +
'<i class="ui-grid-icon-cancel" ng-show="!!colFilter.term"> </i>' + <!-- use !! because angular interprets 'f' as false -->
'</div>' +
'</div>' +
'</div>'
}
因为对于 ui-grid , headerCellTemplate 附加在 headerTemplate 里面。默认的 headerCellTemplate 提供如下 link
谢谢
我正在尝试 angular's ui-grid 一个项目,但发现很难为我的网格构建自定义模板。当我检查源代码时,我得到了下面的 html 模板,我将它保存到一个文件中,header-template.html 并在配置网格时引用它。
<div class="ui-grid-header">
<div class="ui-grid-top-panel">
<div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class="">
<div class="ui-grid-group-panel ng-scope">
<div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0">
Drag a column header here and drop it to group by that column.</div>
<ul ng-show="groupings.length > 0" class="ngGroupList ">
<!-- ngRepeat: group in configGroups -->
</ul>
</div>
</div>
<div class="ui-grid-header-viewport">
<div class="ui-grid-header-canvas">
<!--ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
<div class="ui-grid-header-cell clearfix" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell="" col="col" render-index="$index" ng-style="$index === 0 && colContainer.columnStyle($index)">
<div ng-class="{ 'sortable': sortable }" class="sortable">
<div class="ui-grid-vertical-bar"> </div>
<div class="ui-grid-cell-contents" col-index="renderIndex">
<span class="">{{col.colDef.name}}</span>
<span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }" class="ui-grid-invisible ui-grid-icon-blank"> </span>
</div>
<!-- ngIf: grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false -->
<!-- ngRepeat: colFilter in col.filters -->
<!-- ngIf: filterable -->
<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
{{colFilter}}
<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || ''}}" placeholder="">
<div class="ui-grid-filter-button" ng-click="colFilter.term = null">
<i class="ui-grid-icon-cancel right" ng-show="!!colFilter.term"> </i>
<!-- use !! because angular interprets 'f' as false -->
</div>
</div>
<!-- end ngIf: filterable --><!-- end ngRepeat: colFilter in col.filters -->
</div>
</div>
<!-- end ngRepeat: col in colContainer.renderedColumns track by col.colDef.name -->
</div>
</div>
<div ui-grid-menu="" class=""><!-- ngIf: shown -->
</div>
</div>
</div>
我已经通过
指定了 gridOptions $scope.gridOptions = {
data: 'gridData',
enableRowHeaderSelection: false,
multiSelect: false,
enableFiltering: true,
columnDefs: $scope.columnDef,
enableColumnMenus: false,
headerTemplate:'views/header-template.html'
};
但由于某种原因,我不知道为什么,我得到了这个,如图所示。模板再次打印,位于我尝试构建的模板下方
请帮忙..
headerTemplate
将作为 <div class="ui-grid-header-viewport">
的前一个兄弟添加到 <div class="ui-grid-top-panel">
,因此您的 views/header-template.html
应仅包括:
<div ui-grid-group-panel="" ng-show="grid.options.showGroupPanel" class="">
<div class="ui-grid-group-panel ng-scope">
<div ui-t="groupPanel.description" class="description " ng-show="groupings.length == 0">
Drag a column header here and drop it to group by that column.
</div>
<ul ng-show="groupings.length > 0" class="ngGroupList ">
<!-- ngRepeat: group in configGroups -->
</ul>
</div>
</div>
参考这个official demo
为了获得我想要实现的目标,我必须在网格的 columnDefs 中指定一个 headerCellTemplate(不是 headerTemplate),如下所示:
{
field: key, displayName: key
, headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-vertical-bar"> </div>' +
'<div class="ui-grid-cell-contents" col-index="renderIndex">' +
'<span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">' +
' ' +
'</span>' +
'</div>' +
'<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)">' +
'<i class="ui-grid-icon-angle-down"> </i>' +
'</div>' +
'<div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">' +
'<input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-attr-placeholder="{{col.displayName || \'\'}}" />' +
'<div class="ui-grid-filter-button" ng-click="colFilter.term = null">' +
'<i class="ui-grid-icon-cancel" ng-show="!!colFilter.term"> </i>' + <!-- use !! because angular interprets 'f' as false -->
'</div>' +
'</div>' +
'</div>'
}
因为对于 ui-grid , headerCellTemplate 附加在 headerTemplate 里面。默认的 headerCellTemplate 提供如下 link
谢谢