改写ui-grid headerCellTemplate

来源：互联网发布：哥伦比亚大学知乎编辑：程序博客网时间：2024/06/05 09:37
改写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;  }
阅读全文
0 0