显示作为中国字体的Angularjs uigrid过滤器按钮

Question

我在我的项目中使用了angularjs ui-grid。 以下是我的代码

<link href="@Url.Content("~/Content/js-image-slider.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/js-image-slider.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/ui-grid.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/gemscustomstyle.css")" rel="stylesheet" type="text/css" />
 <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.all.min.js")"></script>
    
    <script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/js-image-slider.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.blockUI.js")"></script>
<script src="@Url.Content("~/Scripts/AngularGrid/angularjs.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/AngularGrid/angular-ng-route.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/AngularGrid/ui-grid.min.js")" type="text/javascript"></script>

<div ng-app = "myapp" ng-controller="CitywiseReportController">
    
    <div id="grid1" ui-grid="gridoptions" ui-grid-grouping ui-grid-resize-columns class="myGrid" style="width: 98%"></div>
    </div>
      
<script type="text/javascript">
   
    var app = angular.module('myapp', ['ui.grid']);

    app.controller('CitywiseReportController', function ($scope, CitywiseReportService) {
      
        $scope.configureHeadCountGrid = function () {
            $scope.gridoptions = {
            data:'cityReportData',
                enableGridMenu: true,
                enableFiltering: true,
                enableColumnResizing: true
            }
            //The grid options
            $scope.gridoptions.columnDefs = [
                            { name: 'Duty Travel ID', field: 'DutyTravelId', width: '90' },
                            { name: 'Staff ID', field: 'StaffNumber', width: '90' },
                            { name: 'Staff Name', field:'StaffName', width: '120' },
                            { name: 'DT Cost Center', field: 'CostCenter', width: '120' },
                            { name: 'DT Travel Category', field: 'TravelCategory', width: '120' },
                            { name: 'City Code', field: 'CityCode', width: '60' },
                            { name: 'City Name', field: 'CityName', width: '100' },
                            { name: 'Departure Date', field: 'DepartureDate', width: '120', type: 'date', format: '{0:dd-MMM-yyyy}' },
                            { name: 'Arrival Date', field: 'ArrivalDate', width: '120', type: 'date', format: '{0:dd-MMM-yyyy}' }
                        ];

        }
        getStudents();
        function getStudents() {
            CitywiseReportService.getStudents()
            .success(function (studs) {
                $scope.cityReportData = studs;
               
            })
            .error(function (error) {
              
                $scope.status = 'Unable to load customer data: ' + error.message;
               
            });
        }
        $scope.configureHeadCountGrid();
    });

    app.factory('CitywiseReportService', ['$http', function ($http) {
        var CitywiseReportService = {};
        CitywiseReportService.getStudents = function () {
           
            return $http.get('/DutyTravel/GetCityWiseDTReport');
        };
        return CitywiseReportService;

    } ]);
</script>

但是当网格显示网格过滤器图标图像显示为中文字体时。

并在Chrome控制台中显示 http://localhost:58206/Content/ui-grid.woff http://localhost:58206/Content/ui-grid.ttf

需要帮助

Answer 1

您需要在mimeType

中添加web.config次设置

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>