如何使列隐藏在jsGrid中？

Question

我在我的项目中使用 jsGrid，现在我被困在这里以隐藏一个在代码中使用但不应在页面中显示的列。

我使用的网格是：jsGrid

我试过输入控制hidden，但还是不行。

以下代码定义了我为 AccountID 采用隐藏字段的网格列。但是，它不起作用。

代码：

fields: [
        { name: "Account", width: 150, align: "center" },
        { name: "Name", type: "text" },
        { name: "AccountID", type: "hidden", width: 0}
    ]

Answer 1

试试下面的代码。

创建一个 css class 如下所示

.hide
{
   display:none;
}

并将 css 属性分配给如下字段

fields: [
    { name: "Account", width: 150, align: "center" },
    { name: "Name", type: "text" },
    { name: "AccountID", css: "hide", width: 0}
]

希望对您有所帮助。

Answer 2

因为 v1.3 jsGrid 字段有一个选项 visible

http://js-grid.com/docs/#fields

如果您需要在运行时隐藏（或显示）一个字段，可以像下面这样完成：

$("#grid").jsGrid("fieldOption", "ClientName", "visible", false);

Answer 3

fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", visible: false, width: 0}]

Answer 4

    fields: [{
            name: "<FIELD NAME>",
            visible: false
        }
    ]

Answer 5

隐藏很简单，像这个例子：

{ name: "id", title: "Id", type: "text", width: 1, css:"hide"}

其中 css class 从 bootsrap 中隐藏

Answer 6

在我的案例中，我们启动了我们的应用程序以在 JSGrid 中显示一个列，然后一直到生产环境。后来需要隐藏该列，但我使用该列进行自定义排序。所以我就是这样做的

我的风格

.idStyle:
{
  color: red;
}

创造了新风格

.hiddenStyle: 
{
  display: none;
}

下面是我的 jsGrid 字段

var jsGridField = 
[
  { name: "Student ID", type: "text", width: "auto", css: "idStyle hiddenStyle" },
  { name: "Student Name", type: "text", width: "auto", css: "labelStyle" },
]

Answer 7

No data Row has been created on jsgrid for row data when there is no data. we have used below css row data for hiding it and showing.
<tr class="jsgrid-nodata-row"><td class="jsgrid-cell" colspan="16" style="width: 60.3958px;">Not found</td></tr>

When row data taking time to display by a API call , we are showing spinner on the grid, but user has been shown as no data found .. so which is not a best user experience . 

For solving this we can use hide and show the css element on modifying the CSS class

For Hiding : 
$('.jsgrid-nodata-row').hide();
$('.jsgrid-cell').hide();

For Showing : 
$('.jsgrid-nodata-row').show();
$('.jsgrid-cell').show();

如何使列隐藏在jsGrid中？

How to make column hidden in jsGrid?

javascript

jquery

jsgrid