Angular ui-grid 排序不起作用

问题描述 投票:0回答:1

有谁知道为什么排序在 Angular 的 ui-gird 中不起作用?看起来设置 type: 'string' 和显式 enableSorting 没有影响。

我正在使用 ui-gird v4.0 但它不适用于早期版本。

选项

//ui-grid options
$scope.gridOptions = {
  paginationPageSize: 30,
  paginationPageSizes: [30, 60, 90],
  useExternalSorting: true,
  useExternalPagination: true,
  rowHeight: 40,
  showGridFooter: false,
  enableSorting: true,
  cellEditableCondition: true,
  exporterMenuCsv: true,
  exporterMenuPdf: false,
  enableGridMenu: true,
  columnDefs: [
    {field: 'actions', width: '100', enableFiltering: false, enableSorting: false, enableHiding: false, enableColumnMenu: false, cellTemplate: cellTemplate, headerCellTemplate: actionHeaderTemplate},
    {field: 'uploader', width: '150'},
    {field: 'files_name', width: '150', type: 'string', enableSorting: true},
    {field: 'sample_name', width: '120'},
    {field: 'ena_accession_nr', width: '150'},
    {field: 'pre_assembled', width: '130'},
    {field: 'sequencing_platform', width: '170'},
    {field: 'sequencing_type', width: '145'},
    {field: 'isolation_source', width: '140'},
    {field: 'source_notes', width: '120', enableSorting: false},
    {field: 'pathogenic', width: '105'},
    {field: 'pathogenicity_notes', width: '160', enableSorting: false},
    {field: 'organism', width: '95'},
    {field: 'strain', width: '75'},
    {field: 'subtype', width: '90'},
    {field: 'collection_date', width: '130'},
    {field: 'collected_by', width: '100'},
    {field: 'country', width: '120'},
    {field: 'region', width: '120'},
    {field: 'city', width: '100'},
    {field: 'zip_code', width: '100'},
    {field: 'latitude', width: '100'},
    {field: 'longitude', width: '100'},
    {field: 'location_notes', width: '30%', enableSorting: false},
    {field: 'notes', width: '30%', enableSorting: false},
  ],
  onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
    $scope.gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
      paginationOptions.pageNumber = newPage;
      paginationOptions.pageSize = pageSize;
      $scope.paginate();
    });
  }
};

分页器

// Function gets paginated data
$scope.paginate = function() {

  var successCallback = function(response) {
    $scope.gridOptions.data = [];
    $scope.gridOptions.totalItems = response.data.count;

    // Normalize endpoint data -transform it to samples
    for (var index in response.data.data) {
      var samples = response.data.data[index][1]['metadata'];
      var filesId = response.data.data[index][1]['files'].map(function(file){ return file.file_id; });

      samples['ids'] = filesId.join();
      samples['files_name'] = file.filename;
      samples['sample_name'] = response.data.data[index][0];

      // add samples to grid data
      $scope.gridOptions.data.push(samples);
    }
  }

  var errorCallback = function(response) {
    var message = (response.data['message'] != undefined) ? response.data.message : response.data.non_field_errors[0];
    alert.show('Error: ' + message, 'danger');
  }

  var url = 'app/api/v1/user/samples?limit=' + paginationOptions.pageSize + '&page=' + paginationOptions.pageNumber;
  $http.get(url).then(successCallback, errorCallback);
}

数据

// Example of content of $scope.gridOptions.data[0]
{
  city : ""
  collected_by : ""
  collection_date : "Unknown"
  country : "Tanzania"
  created_on : "2016-12-12T09:32:46.076532Z"
  ena_accession_nr : ""
  file_upload : "c9696fa4-421c-422c-9dac-039ceabab7f5"
  files_name : "KLMC2.fna"
  id : "c37e3963-6f68-443f-b076-aed7b975872d"
  ids : "c9696fa4-421c-422c-9dac-039ceabad7a5"
  isolation_source : "Other"
  latitude : 0
  location_notes : ""
  longitude : 0
  notes : ""
  organism : "Unknown"
  pathogenic : "Unknown"
  pathogenicity_notes : ""
  pre_assembled : "Yes"
  region : ""
  sample_name : "KLMC2"
  sequencing_platform : ""
  sequencing_type : "Unknown"
  source_notes : ""
  strain : ""
  subtype : ""
  uploader : "compare"
  zip_code : ""
}
angular-ui-grid ui-grid
1个回答
4
投票

由于网格选项(useExternalSorting)阻止内部排序执行,排序无法正常工作。

解决方案:useExternalSorting 选项的布尔值设置为 false。

useExternalSorting: false

© www.soinside.com 2019 - 2024. All rights reserved.