可以隐藏 SlickGrid 列而不将其从“列”数组中删除吗？

Posted 2023-02-22

【中文标题】可以隐藏 SlickGrid 列而不将其从“列”数组中删除吗？

【英文标题】：Possible to hide a SlickGrid column WITHOUT removing it from the "columns" array?

【发布时间】：2011-09-16 10:20:21

【问题描述】：

我想隐藏一列（它是每一行唯一的 ID 列），但我无法从“列”数组中删除它，因为在对行执行操作时我需要行中的数据（选择、排序等）。

例如，在排序后，我需要将 Rows 与之前的样式相匹配，我可以使用 ID 列来做到这一点。我需要行中的数据，我只是不想显示它。

谢谢。

【参考方案1】：

答案是否定的，但这不是您要寻找的答案:)

除了查看哪些列来获取其数据之外，它们与您的数据项的外观之间没有硬性联系。您不必有一个可见的列才能在您的数据项上有一个 ID。

【讨论】：

对不起，我不完全明白你在说什么。如果该列是“隐藏的”（也就是不在行中），我怎么可能从行的数据中获取 ID。

您将网格绑定到数据数组： var data = [id: 0, title: 'item1', id: 1, title: 'item3', ...];如果选择不显示 ID 列，则数据项上仍然存在数据。

我尝试了你所说的，我将我的附加信息存储在 data[] 中，这很好，但我仍然对如何在事件发生后将该数据与适当的 Row 匹配感到困惑（比如说，排序）已经发生。是否可以将 Row up 与其 data[] 条目匹配？

对于那些想知道如何将网格上的行转换为数据中正确的 row 的人，这里是：alert(data[args.row].id)（假设您的数据中有 id )

所以简单的答案是省略列定义。

【参考方案2】：

这是不可能的，但作为一种解决方法，您可以将 width/maxWidth 设置为 1，将名称设置为空字符串并将该列放在所有其他列的最右侧。像这样（例子在coffeescript中，如果你不确定语法使用http://js2coffee.org/）：

columns = [

          ... some columns ...

            
               id:"hidden"
               name:""
               field:"id"
               sortable:"true"
               width: 1
               maxWidth: 1
               minWidth: 1
               unselectable: true
               formatter: (row,cell,val,columnDef,dataContext) ->
                  "<div style='display: none;'>#val</div>"
            
         ]

【参考方案3】：

对于这类问题，我使用了两个数组。一个用于显示，另一个用于 columnPicker。方法如下，

var org_columns = [],hid_columns = [];
org_columns.push(
cb_selector.getColumnDefinition(),
id: "id", name: "ID", field: "id", sortable: true, width: 56,
id: "name", name: "Name", field: "name", editor: Slick.Editors.Text, sortable: true, width: 234,
id: "email", name: "Email", field: "email", editor: Slick.Editors.Text, sortable: true, width: 234
);

hid_columns.push(
cb_selector.getColumnDefinition(),
id: "name", name: "Name", field: "name", editor: Slick.Editors.Text, sortable: true, width: 234,
id: "email", name: "Email", field: "email", editor: Slick.Editors.Text, sortable: true, width: 234
);
var data_view = new Slick.Data.DataView();
grid = new Slick.Grid("#grid", data_view, hid_columns, grid_options);
var columnPicker= new Slick.Controls.ColumnPicker(org_columns, grid,grid_options);

【参考方案4】：

如果有人还在寻找这个，我已经找到了一种方法......它不是非常优雅，但它确实有效。正如 Simon 建议的那样，将 Id 列添加为网格中的最后一个。将 cssClass 和 headerCssClass 都设置为“display:none !important”，并将宽度、minWidth 和 maxWidth 列选项设置为 0，如下所示：

var columns = [
     id: "MyColumnId", name: "My Column", field: "MyColumnData", width: 100,
     id: "Id", name: "Id", field: "Id", width: 0, minWidth: 0, maxWidth: 0, cssClass: "reallyHidden", headerCssClass: "reallyHidden" 
];

css 是：

.reallyHidden display: none !important;

希望对您有所帮助。

【讨论】：

这完全正确。我注意到我不需要 CSS，但我也在 grid.render() 之后使用了 gird.autosizeColumns()。也许这与它有关？

调整列的大小会使标题和单元格值稍微对齐。

要解决大小调整问题，请转到 slick.grid.js 中的 applyColumnWidths 并添加以下if(columns[i].minWidth == 0 && columns[i].maxWidth == 0 ) columns[i].width = 0; 。

【参考方案5】：

在coloumns.push(id:id,name:name,Hidden:true) //hidden 确保在绑定网格时删除该列

【参考方案6】：

我意识到这是一个老问题，但正确的方法是使用 dataProvider 并利用 getItemMetaData 提供您不一定希望显示的信息。

当您选择您的行时，您可以调用 grid.getItemMetaData(cell.row) 来获取您需要的额外信息。 getItemMetaData 应返回描述行和单元格级别元数据的 jsonObject。

这是描述它的文档。

https://github.com/mleibman/SlickGrid/wiki/Providing-data-to-the-grid

【讨论】：

元数据中有选项，但是如何隐藏列呢？

【参考方案7】：

在寻找有关此问题的一些答案后，我找到了一种解决方法，它可以很好地隐藏列并仍然保存数据。

我最初的问题是我需要隐藏网格的 ID 列，所以基本上我通过使用 name 属性创建唯一而不指定任何其他内容来隐藏 ID 列，然后创建了我所期望的列。

【讨论】：

这样我得到了一个空白列，但仍然可见。

@Geeocode 尝试使列宽最小为 0。

【参考方案8】：

我今天遇到了同样的问题，我正在处理纯数组数据。如果您将值添加到数据数组的末尾，但未在列数组中定义它们，则数据存在并且您可以在事件中使用它，但不会显示。

示例：

new Slick.Grid(
    document.getElementById('grid')
    , [
        [1, 2, 3, 1]
        , [1, 2, 3, 2]
        , [1, 2, 3, 3]
        , [1, 2, 3, 4]
        , [1, 2, 3, 5]
    ]
    , headers: [
        
            field: '0'
            , id: 'foo'
            , name: 'foo'
        
        , 
            field: '1'
            , id: 'bar'
            , name: 'bar'
        
        , 
            field: '0'
            , id: 'baz'
            , name: 'baz'
        
    ]
    , 
);

正如您在代码中看到的，我为网格提供了第 4 个值，没有列定义。