如何在jsGrid中隐藏列

How to make column hidden in jsGrid?

本文关键字：隐藏 jsGrid      更新时间：2023-09-26

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

我使用的网格是：jsGrid

我尝试过使用输入控件hidden，但是它仍然不起作用。

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

代码：

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

由于v1.3 jsGrid字段有一个选项visible

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

如果您需要在运行时隐藏（或显示）字段，可以按照以下方式进行：

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

试试下面的代码。

创建一个css类，如下

.hide
{
   display:none;
}

并将css属性分配给下面的字段

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

希望这对你有帮助。

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

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

隐藏起来非常简单，就像这个例子一样：

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

其中css类从bootsrap 隐藏

在我的案例中，我们启动了应用程序以在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" },
]

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();
相关文章：