Question

我正在尝试为角度ui网格制作下拉过滤器。我最初找到了方法文章here，如果无法工作，我会回到the source尝试使用它。我仍然没有成功。列过滤器看起来像一个常规过滤器，没有任何下拉列表。有人可以帮我解决一下吗？

列def：

var io = require('socket.io-client')
module.exports = {
    socket: null,
    init: function(){
        this.socket= io(socket_uri + '/' + namespace, { query: 'ns='+ namespace}); 
        this.socket.on('connect',  this.onOpen.bind(this));
        this.socket.on('disconnect', this.onClose.bind(this));
        this.socket.on('error', this.onError.bind(this));
        this.socket.on('message', this.onMessage.bind(this));               
    },
    onOpen: function(event) {       
        console.log(event)      

    },
    onClose: function(event) {      
        console.log(event)  
    },
    onError: function(event) {
        console.log(event)          
    },
    onMessage: function(payload) {  
        // onMessage is triggering one more time per each refresf.
        // Starting in one like normal, but then after refresh is 
        // showing up 2, 3, 4, 5... times
        console.log(payload)    
    },
};

这就是它的外观（如果我点击输入，它只接受文字）

是否还有其他东西丢失了？

-----我的整个设置更新-----------

{
 field: 'sex'
 , displayName: 'SEX'
 , width: '120'
 , type: uiGridConstants.filter.SELECT
 , filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ]  }
}

行模板（如果相关）：

//options for the main grid
      $scope.gridOptions = {
        enableFiltering: true,
        multiSelect: false,
        onRegisterApi: function(gridApi){
          $scope.gridApi = gridApi; //so we can use gridapi functions of ui-grid

          //handler for clicking rows and getting row object
          gridApi.selection.on.rowSelectionChanged($scope, function(row){
            thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
            console.log(thisRow[0].uniqueId)

          });
        },
        data: 'myData'
        , rowTemplate: rowTemplate()
        , columnDefs: [
          {
            field: 'alert'
            , displayName: 'ALERTS'
            , width: '70'
            , headerCellClass: $scope.highlightFilteredHeader
            ,sort: {
                direction: uiGridConstants.DESC,
                priority: 1
              }

          },
          {
            field: 'firstName'
            , displayName: 'FIRST NAME'
            ,  width: '130'
            , headerCellClass: $scope.highlightFilteredHeader

          },
          {

            field: 'lastName'
            , displayName: 'LAST NAME'
            ,  width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'dob'
            , displayName: 'DOB'
            ,  width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {

            field: 'careCoordinatorName'
            , displayName: 'Care Coordinator Name'
            , width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'userStatus'
            , displayName: 'STATUS'
            , width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'homeNum'
            , displayName: 'PATIENT HOME #'
            , width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'cellNum'
            , displayName: 'PATIENT CELL #'
            , width: '130'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'mi'
            , displayName: 'MI'

            , width: '60'
            , headerCellClass: $scope.highlightFilteredHeader
          },
          {
            field: 'sex'
            , displayName: 'SEX'
            , width: '120'
            , type: uiGridConstants.filter.SELECT
            , filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ]  }
          }

        ]

      };

网格HTML

function rowTemplate() {
        return '<div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
      }

------更新2 ----------- 将coldef更改为

后

<div id="grid1" ui-grid="gridOptions" ui-grid-importer class="grid" ui-grid-resize-columns ui-grid-move-columns ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-paging external-scopes="gridHandlers"></div>

}

这就是我的列现在的样子（左边的另一列用于比较）

------更新3 ----------- 当我检查该区域时，我可以看到选择的代码。所以我们不知道它在那里，它只是没有显示

-----更新4 ---------- Materialisecss让它变得不可见。它一直都在那里

{
field: 'sex',
displayName: 'SEX',
width: '120',
//type: uiGridConstants.filter.SELECT,
filter: {
    type: uiGridConstants.filter.SELECT, // <- move this to here
    selectOptions: [
        { value: 'male', label: 'male' },
        { value: 'female', label: 'female' }
    ]
}

}

解决了问题

Answer 1

啊，我相信你的问题是coldef的type选项位于错误的位置。为了便于阅读，我稍微扩展了代码;如果它们太压缩，你很容易迷失在对象中。

你有什么：

{
    field: 'sex',
    displayName: 'SEX',
    width: '120',
    type: uiGridConstants.filter.SELECT,
    filter: {
        selectOptions: [
            { value: 'male', label: 'male' },
            { value: 'female', label: 'female' }
        ]
    }
}

应该是什么：

{
    field: 'sex',
    displayName: 'SEX',
    width: '120',
    //type: uiGridConstants.filter.SELECT,
    filter: {
        type: uiGridConstants.filter.SELECT, // <- move this to here
        selectOptions: [
            { value: 'male', label: 'male' },
            { value: 'female', label: 'female' }
        ]
    }
}

Angular ui-grid column下拉选择过滤器

1 个答案: