Angular-Slickgrid：并非所有过滤器都出现在标题行中

Posted 2023-03-13

【中文标题】Angular-Slickgrid：并非所有过滤器都出现在标题行中

【英文标题】：Angular-Slickgrid: Not all filters appear in headerrow

【发布时间】：2020-05-19 07:35:37

【问题描述】：

对于文档： 我找到了问题和解决方案：

我们在数据集中使用数字 ID（如 1、2、3、...）。在代码中的某处，网格变得混乱，并用 id 映射了错误的列： 当我用 grid.getHeaderRowColumn(col.id) 询问 div 并用 col.id 填充它时，它显示一个不同的 id 然后 col.id ！ 不用说同时找不到所有的列（所以不是所有的过滤器都可以设置为我最初的问题）。 将 id 更改为字符串 ('id1', 'id2', 'id3', ...) 解决了问题！

我不知道这是一个错误还是只是动态列的不可能，但现在只使用字符串作为 id 就可以了。感谢@ghiscoding 的帮助。

原始问题：

我有一个奇怪的问题：

当我构建我的 slickgrid 时，并非所有列在标题行中都有一个过滤输入框（尽管它们应该有，关于我的列定义）。

当我添加（删除）列时，其他过滤器框会出现/消失，而不会更改其他列定义。所以它似乎随机出现（尽管使用相同的列，相同的过滤器出现/消失）。

使用普通的 slickgrid，我可以手动设置这些过滤器来纠正这个问题。但是我怎么能用 angular-slickgrid 做到这一点？

有什么建议吗？

我使用 angular-slickgrid 版本 2.15.4。

编辑

这是我的 gridOptions 和 ColumnDefinitions。 （它们是动态构建的，但这是在启动网格之前来自开发工具）

columnDefinitions: 
    0: id: 6, …
    1: id: 2, …
    2: 
        id: 4
        fieldtype: "string"
        name: "deliveryaddressadditionalline"
        json_translate_property: null
        field: "deliveryaddressadditionalline"
        detailparams: edit: true, tab: …, card: …
        gridparams: show: true, edit: false
        filterable: true
        sortable: true
        type: 1
        editor: model: ƒ
        filter: model: ƒ
        grouping: getter: "deliveryaddressadditionalline", collapsed: false, formatter: ƒ
        rerenderOnResize: true
        
    3: 
        id: "edit"
        name: ""
        field: ""
        width: 30
        formatter: ƒ (row, cell, value, columnDef, dataContext)
        onCellClick: (e, args) =>  this.gotoDetailPane(e, args, detailInfo); 
        gridparams: show: true
        fieldtype: "edit"
        
    4: id: 1, fieldtype: "string", name: "id", json_translate_property: null, field: "id", …


gridOptions: 
    enableColumnPicker: false
    headerMenu: hideColumnHideCommand: true
    enableGridMenu: false
    enableAutoResize: true
    autoResize: containerId: "grid-container", sidePadding: 15
    enableSorting: undefined
    autoEdit: false
    editable: true
    enableCellNavigation: true
    enableFiltering: true
    rowSelectionOptions: selectActiveRow: true
    enableRowSelection: true
    showHeaderRow: true
    showTopPanel: false
    enableDraggableGrouping: true
    createPreHeaderPanel: true
    showPreHeaderPanel: false
    preHeaderPanelHeight: 40
    draggableGrouping: 
        dropPlaceHolderText: "Drop a column header here to group by the column", 
        deleteIconCssClass: "fa fa-times", 
        onGroupChanged: ƒ, 
        onExtensionRegistered: ƒ
    
    explicitInitialization: true

这就是结果（多种情况：列被打乱，过滤器随机出现而代码相同）：

【问题讨论】：

您需要 2 个标志才能显示过滤器，enableFiltering: true 在网格选项中，然后在要使用过滤器的每一列上 filterable: true。最后，如果您没有定义要使用的过滤器，则默认为输入文本过滤器。这是所有假设，因为您没有提供任何代码示例来说明您正在做什么。如果您的问题更多在于动态列定义，那么这就是我从不动态使用列定义的另一个原因。

顺便说一句，您应该始终提供一些您尝试过的代码，否则您最终将不会收到任何问题的答案。

我添加了一些代码。输入是动态创建的，因此很难发布，但这是进入网格的原因。

看来您已经放置了输出结果而不是实际的列定义，当您缺少每个属性之间的所有逗号时，很难找到问题，我不得不假设 @ 987654330@ 实际上是fieldtype: FieldType.string。不过，我不得不再说一遍，我从不使用动态创建的列，也从不做动态网格选项，你在找麻烦。在我们的项目中，我们在知道用户安全组级别后加载了某些列定义，因此我们在视图中使用ngIf 构建网格，它解决了我们所有的问题。

发现问题：我们在数据集中使用数字 id（如 1,2,3,...）。在代码中的某个地方，网格会混淆并用 id 映射错误的列：当我用 grid.getHeaderRowColumn(col.id) 询问 div 并用 col.id 填充它时，它显示一个不同的 id 然后 col.id ！没用说同时没有找到所有的列（所以不是所有的过滤器都可以设置巫婆是我的问题）。将 id 更改为字符串 ('id1', 'id2', 'id3', ...) 解决了问题！

【参考方案1】：

我找到了问题和解决方案：

我们在数据集中使用数字 ID（如 1、2、3、...）。在代码中的某个地方，网格会混淆并用 id 映射错误的列：当我用 grid.getHeaderRowColumn(col.id) 询问 div 并用 col.id 填充它时，它显示一个不同的 id 然后 col.id ！不用说同时找不到所有列（因此并非所有过滤器都可以设置为我最初的问题）。将 id 更改为字符串 ('id1', 'id2', 'id3', ...) 解决了问题！

我不知道这是一个错误还是只是动态列的不可能，但现在只使用字符串作为 id 就可以了。感谢@ghiscoding 的帮助。

【参考方案2】：

注意getHeaderRowColumn的前两行是

function getHeaderRowColumn(columnIdOrIdx) 
  var idx = (typeof columnIdOrIdx === "number" ? columnIdOrIdx : getColumnIndex(columnIdOrIdx));

因此，如果传递的参数是数字，则将其解释为列数组的从 0 开始的索引（不是 id）。如果参数是字符串，则查找列数组索引，将参数视为id。

所以你的解决方案是正确的；如果 id 是数字，只需在传递之前将其转换为字符串。

请注意，在很多情况下，这对于 javascript 对象通常是正确的：o[2] 将尝试查找数组的第二个元素，而 o['2'] 将查找名为“2”的对象属性。上面的代码不依赖于对象，但是行为是一样的。