如何使列隐藏在jsGrid中？答案

【问题标题】：How to make column hidden in jsGrid?如何使列隐藏在jsGrid中？
【发布时间】：2015-11-27 03:12:19
【问题描述】：

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

我使用的网格是：jsGrid

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

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

代码：

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

【问题讨论】：

标签： javascript jquery jsgrid

【解决方案1】：

试试下面的代码。

创建一个如下所示的 css 类

.hide
{
   display:none;
}

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

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

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

从 v1.3 开始，jsGrid 字段有一个选项visible

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

请解释为什么这段代码可以解决问题。请看How to Answer

【解决方案5】：

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

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

css 类在 bootsrap 中隐藏的位置

【讨论】：

【解决方案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" },
]

【讨论】：

【解决方案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();

【讨论】：