ui-grid 符号问题

Posted 2023-02-19

【中文标题】ui-grid 符号问题

【英文标题】：ui-grid symbols issue

【发布时间】：2014-12-26 10:19:50

【问题描述】：

我正在使用 AngularJs ui-grid http://ui-grid.info/。

在实施时，我得到了一些你可以在单元格右上角的 img 中看到的东西，而不是下拉符号。

解决此错误需要包含哪些文件？

【问题讨论】：

更可能缺少某些字体文件检查您的控制台是否有错误

如果你使用ui-grid - v4.6.6，你需要将ui-grid.ttf和ui-grid.woff放入文件夹fonts。所以目录的结构看起来像这样：ui-grid.min.css fonts # ui-grid.ttf ui-grid.woff

【参考方案1】：

您需要下载字体文件：

ui-grid.woff ui-grid.eot ui-grid.svg ui-grid.ttf

来自here。并将它们移动到您的ui-grid.min.css 所在的位置。

【讨论】：

我添加了 .woff 和 .tff 文件并通过 <script> 标签包含它们...它给了我错误 - Uncaught SyntaxError: Unexpected token ILLEGAL

@Anup 您需要添加所有文件，因为它们已用于跨浏览器兼容性。

@oCcSking 尝试删除缓存并确保文件的位置类似于this structure

10x @RahilWazir 快速回复.. 我总是clear cache 并且我从hare 获取所有文件

解决方法是手动将 ui-grid.woff 文件添加到解决方案中

【参考方案2】：

请以这种方式包含ui-grid CSS文件

<link rel="stylesheet" href="/release/ui-grid-unstable.css">

并省略作者教程或 Api 中的脚本标记

<script src="/release/ui-grid-unstable.css"></script>

例如（http://ui-grid.info/docs/#/tutorial/102_sorting）

【参考方案3】：

我只想添加this answer（从 panciz 中逐字窃取）给使用 Grunt 并希望自动复制这些内容的人。这需要放在你的 Gruntfile.js 中：

copy: 
      dist: 
        files: [
           ...
        //font di ui grid
         
              expand: true,
              flatten: true,
              dest: 'dist/styles/',
              src: ['bower_components/angular-ui-grid/ui-grid.ttf',
                    'bower_components/angular-ui-grid/ui-grid.woff',
                    'bower_components/angular-ui-grid/ui-grid.eot',
                    'bower_components/angular-ui-grid/ui-grid.svg'
                    ]
            
    ],

【参考方案4】：

您可能还想查看最近添加的教程：http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation

这包括如何正确安装字体，以及一些故障排除。

【参考方案5】：

解决问题的另一种方法是修改 CSS 类，如下所示

.ui-grid-icon-down-dir:before 
  content: '\25bc';

.ui-grid-icon-up-dir:before 
  content: '\25b2';


.ui-grid-selection-row-header-buttons.ui-grid-row-selected:before
    content:'\2714' !important;

.ui-grid-all-selected:before
    content:'\2714' !important;

【参考方案6】：

尝试包含在您的项目中：

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">

<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>

【参考方案7】：

如果您使用的是gulp，请添加此任务。

gulp.task('styles', function() 

  // Copy font files needed for angular-ui-grid
  gulp.src(['bower_components/angular-ui-grid/ui-grid.ttf',
    'bower_components/angular-ui-grid/ui-grid.woff',
    'bower_components/angular-ui-grid/ui-grid.eot',
    'bower_components/angular-ui-grid/ui-grid.svg'
  ])
    .pipe(gulp.dest('dist/styles/'))

  // Other style tasks here

);

【参考方案8】：

展开：真， cwd: 'bower_components/angular-ui-grid', src: ['.eot', '.svg', '.ttf', '.woff'], dest: '/styles' 将此代码添加到副本中的 grunt 文件中： 分布：

【讨论】：

在 gruntfile.js 中

【参考方案9】：

如果您使用ui-grid - v4.6.6，则需要将ui-grid.ttf 和ui-grid.woff 放入文件夹fonts。所以目录的结构是这样的：

ui-grid.min.css
fonts  # <--  this is a folder
    ui-grid.ttf  # <-- in fonts folder
    ui-grid.woff  # <-- in fonts folder

【讨论】：

但是如果你从 npm 安装 ui-grid (v4.6.6)，字体文件夹已经存在。自从升级到较新版本后，我一直遇到此问题；我检查了node_modules中的angular-ui-grid文件夹，字体文件夹已经存在了？？？ ...