logo标签列表

是否可以隐藏SlickGrid列而不从“columns”数组中删除它？

javascriptslickgrid
15

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

例如，在进行排序后，我需要抓取行并将它们与之前匹配的样式相匹配，而我可以使用ID列来做到这一点。我需要行中的数据，但不想将其显示出来。

谢谢。

8个回答
13

答案是否定的，但那不是你想要的答案 :)

除了用来获取数据的列名之外，它们与您的数据项的外观没有硬连接。您不需要在数据项上显示列就可以有一个ID。

抱歉，我不完全理解你在说什么。如果该列“隐藏”（即不在行中），我怎么可能从行数据中获取ID呢？ - Kevin
7
你需要将网格和数据数组绑定起来：var data = [{id: 0, title: 'item1'}, {id: 1, title: 'item3'}, ...];如果你选择不显示ID列，数据仍然存在于数据项中。 - Tin
我尝试了你说的方法，将我的附加信息存储在data[]中，这很好，但是当事件（比如排序）发生后，我仍然不知道如何将该数据与相应的行匹配。是否有可能将一行与其data[]条目匹配？ - Kevin
2
对于那些想知道如何将网格上的行转换为数据中的正确“行”的人，这里是解决方法：alert(data[args.row].id)（假设您的数据中有“id”）。 - Rosdi Kasim
1
所以简单的答案是省略列定义。 - styfle
显示剩余2条评论
7

如果有人仍在寻找此功能，我找到了一种方法...虽然不是非常优雅，但确实有效。如Simon所建议的，将Id列添加为网格中的最后一列。将cssClass和headerCssClass都设置为"display:none !important"，并将宽度、最小宽度和最大宽度列选项设置为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()。也许这与此有关？ - jarederaj
1
调整列大小会使标题和单元格值略微错位。 - bunjeeb
为了解决调整大小的问题，请转到slick.grid.js中的applyColumnWidths，并添加以下内容：if(columns[i].minWidth == 0 && columns[i].maxWidth == 0 ) { columns[i].width = 0; }。 - phyatt
1

虽然不可能，但是你可以采用解决方法：将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>"
            }
         ]
1
今天我遇到了同样的问题，而且我正在使用纯数组数据。如果你将值添加到数据数组的末尾，但不在列数组中定义它们，则数据存在并且可以在事件中使用，但不会显示出来。
例子：
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'
        }
    ]
    , {}
);

正如您在代码中所看到的，我提供了第四个值给网格，但没有列定义。
0
针对这种问题，我使用了两个数组。一个用于显示，另一个用于列选择器。具体如下：
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);
0

在 columns.push({id:id,name:name,Hidden:true}) 中， // Hidden 确保在绑定网格时删除该列

0

在寻找关于这个问题的答案后，我找到了一个解决方法，可以隐藏列并保存数据。

我的初始问题是需要隐藏网格的ID列，所以基本上我通过创建只有名称属性而没有指定其他任何内容的列来隐藏ID列，然后该列就被创建了，正如我所期望的那样。

这样我得到了一个空白的列，但仍然可见。 - Geeocode
@Geeocode 尝试将列宽设置为最小宽度为0。 - R3muSGFX
0

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

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

这里是描述它的文档。

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

1
元数据中有选项，但如何以此方式隐藏列？ - Geeocode
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接