Javascript 可以隐藏 SlickGrid 列而不将其从“列”数组中删除吗?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6373336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Possible to hide a SlickGrid column WITHOUT removing it from the "columns" array?
提问by Kevin
I'd like to hide a column (its an ID column that is unique for each row), but I cannot remove it from the "columns" array because I need that data in the Row when actions are performed on the Row (Selection, Sorting, ect).
我想隐藏一列(它是每行唯一的 ID 列),但我无法将它从“列”数组中删除,因为在行上执行操作时我需要行中的数据(选择,排序等)。
After being sorted for example, I need to grab the Rows match them up to the previous styles that they had before, and I can do this with the ID column. I need the data in the row, I just don't want it to be displayed.
例如,在排序之后,我需要抓取 Rows 将它们与之前的样式匹配,并且我可以使用 ID 列执行此操作。我需要行中的数据,我只是不想显示它。
Thanks.
谢谢。
采纳答案by Tin
The answer is NO, but that is not the answer you are looking for :)
答案是否定的,但这不是您要找的答案:)
Other than what columns are looking at to grab their data, there is no hard link between them and what your data items look like. You don't have to have a column visible to have an ID on your data item.
除了哪些列正在查看以获取其数据之外,它们与您的数据项的外观之间没有硬链接。您不必让列可见即可在数据项上拥有 ID。
回答by user2837841
In case anyone is still looking for this, I've found a way... it's not massively elegant but it does work. As Simon, suggested, add the Id column as the last in the grid. Set both the cssClass and headerCssClass to be "display:none !important" and set the width, minWidth and maxWidth column options to 0 as follows:
如果有人仍在寻找这个,我已经找到了一种方法......它不是非常优雅,但它确实有效。正如西蒙建议的那样,将 Id 列添加为网格中的最后一个。将 cssClass 和 headerCssClass 都设置为“display:none !important”,并将 width、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" }
];
and the css is:
和CSS是:
.reallyHidden { display: none !important;}
.reallyHidden { display: none !important;}
Hope that helps.
希望有帮助。
回答by Simon Landeholm
It is not possible BUT as a workaroundyou can set the width/maxWidth to 1, set the name to an empty string and place the column at the far right of all other columns. Like so (example is in coffeescript, if you feel uncertain about the syntax use http://js2coffee.org/):
这是不可能的,但作为一种解决方法,您可以将宽度/最大宽度设置为 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>"
}
]
回答by HeiN
For this kind of problem, I've used two arrays. One for showing and the other one for columnPicker. Here is how,
对于这种问题,我使用了两个数组。一个用于显示,另一个用于 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);
回答by clarifier
in coloumns.push({id:id,name:name,Hidden:true}) //hidden ensures that the column is removed while binding grid
in coloumns.push({id:id,name:name,Hidden:true}) //hidden 确保在绑定网格时删除列
回答by Damian
I realize this is an old question but the correct way to do this is by using a dataProvider and utilizing getItemMetaData to provide information you don't necessarily want displayed.
我意识到这是一个老问题,但正确的方法是使用 dataProvider 并利用 getItemMetaData 提供您不一定想要显示的信息。
When you select your row you can call grid.getItemMetaData(cell.row) to get the extra information you need. getItemMetaData is expected to return a jsonObject describing both row and cell level metaData.
当您选择您的行时,您可以调用 grid.getItemMetaData(cell.row) 来获取您需要的额外信息。getItemMetaData 预计将返回一个 jsonObject 描述行和单元级元数据。
Here's the docs that describe it.
这是描述它的文档。
https://github.com/mleibman/SlickGrid/wiki/Providing-data-to-the-grid
https://github.com/mleibman/SlickGrid/wiki/Providing-data-to-the-grid
回答by R3muSGFX
After looking for some answers about this questions I've found a workaround that quite does the trick of hiding the column and still save the data.
在寻找有关此问题的一些答案后,我找到了一种解决方法,该方法可以很好地隐藏列并仍然保存数据。
My initial problem was that I needed to hide the ID column of the grid, so basically I hid the ID column by creating the only with the name attribute without specifying anything else and the column was then created I was expecting.
我最初的问题是我需要隐藏网格的 ID 列,所以基本上我通过创建唯一的 name 属性而不指定任何其他内容来隐藏 ID 列,然后创建了我期望的列。
回答by Stefan Jelner
I had the same problem today, and i am working with pure array data. if you add your values at the end of the data array, but do not define them in the columns-array, the data is present and you can use it in your events, but it is not shown.
我今天遇到了同样的问题,我正在处理纯数组数据。如果您在数据数组的末尾添加您的值,但没有在列数组中定义它们,则数据存在并且您可以在您的事件中使用它,但它不会显示。
example:
例子:
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'
}
]
, {}
);
As you can see in the code, i provided a 4th value to the grid with no column-definition.
正如您在代码中看到的,我为没有列定义的网格提供了第四个值。