改写ui-grid headerCellTemplate

最新推荐文章于 2024-11-22 02:02:29 发布

原创最新推荐文章于 2024-11-22 02:02:29 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

21 篇文章

订阅专栏

Angular

15 篇文章

订阅专栏

本文介绍如何通过修改 UI Grid 的头部单元格模板实现自定义显示效果，并加入信任 HTML 过滤器确保安全呈现富文本内容。

改写ui-grid headerCellTemplate  myHeaderCellTemplate  中为uigrid表头模板，
此处copy过来，改写           

/**改写ui-grid myHeaderCellTemplate,注意必须增加 trustHtml过滤器(在模块中增加)
* 取代原有的 CUSTOM_FILTERS ***
     * myApp.filter('trustHtml', function ($sce) {
     *      return function (input) { 
     *          return $sce.trustAsHtml(input);
     *      }
     *  }); 
     * **/
    //原：<span class="ui-grid-header-cell-label" ui-grid-one-bind-id-grid="col.uid + '-header-text'"> {{ col.displayName CUSTOM_FILTERS }}</span>
    //现：<span class="ui-grid-header-cell-label" ui-grid-one-bind-id-grid="col.uid + '-header-text'" ng-bind-html="col.displayName | trustHtml"></span>
    var myHeaderCellTemplate =`<div role="columnheader" ng-class="{ 'sortable': sortable }"
        ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'"
        aria-sort="{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}">
        <div role="button" tabindex="0" class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"
            col-index="renderIndex" title="TOOLTIP">
            <span class="ui-grid-header-cell-label" ui-grid-one-bind-id-grid="col.uid + '-header-text'" ng-bind-html="col.displayName | trustHtml">         
            </span> 
            <span ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'"
            ui-grid-visible="col.sort.direction" aria-label="{{getSortDirectionAriaLabel()}}">
            <i 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 }"
            title="{{isSortPriorityVisible() ? i18n.headerCell.priority + ' ' + ( col.sort.priority + 1 ) : null}}"
            aria-hidden="true">
            </i>
            <sub ui-grid-visible="isSortPriorityVisible()" class="ui-grid-sort-priority-number">
                {{col.sort.priority + 1}}
            </sub>
            </span>
        </div> 
     <div role="button" tabindex="0" ui-grid-one-bind-id-grid="col.uid + '-menu-button'"
         class="ui-grid-column-menu-button"
         ng-if="grid.options.enableColumnMenus && !col.isRowHeader
&& col.colDef.enableColumnMenu !== false"
         ng-click="toggleMenu($event)"
         ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}"
         ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
         aria-haspopup="true">
         <i class="ui-grid-icon-angle-down" aria-hidden="true">
          
        </i>
    </div> 
</div>`;
 function rebuildColumnDefs(data){
   var columnDefs = []; 
      if(data && data.length){
         data.forEach(function(val,idx){
           columnDefs.push({
                name: val.data,
                displayName: val.title, 
                minWidth: 150, 
           //headerCellTemplate: '<div class="">Name \n (editable)</div>'
//这种方式会改变表头样式和相关功能，只能在极其简单情况下使用
  //headerCellTemplate: '<div style="text-align:center;">'+val.title+'</div>'
               headerCellTemplate:myHeaderCellTemplate 
          });
      }); 
    }
    return columnDefs;
  }