如何使用 jquery 隐藏数据网格列答案

【问题标题】：How to hide the datagrid column using jquery如何使用 jquery 隐藏数据网格列
【发布时间】：2019-12-24 08:34:31
【问题描述】：

我有一个数据网格，我需要使用 jquery 在该网格中隐藏一列。我需要有条件地隐藏部门列，这意味着如果（admin == true）我需要显示此列，否则我需要隐藏此列我该怎么做

var Form = $("#Form1");
$("#Grid_1", Form).html("Loading....");
$("#Grid_1", Form).DataGrid({
  DataUrl: baseApiURL + '/Controller/GetDetails',
  PostData: {
    SP_VA_AUTH_NO: AuthNo
  },
  GridId: "GridDetails",
  Loader: false,
  PageSize: 10,
  Columns: [{
      HeadStyle: "width:55px;",
      Title: "Id",
      ItemKey: "Id",
      ItemNull: "N/A"
    },
    {
      HeadStyle: "width:80px;",
      Title: "Name",
      ItemKey: "Name",
      ItemNull: "N/A"
    },
    {
      HeadStyle: "width:200px;",
      Title: "Salary",
      ItemKey: "Salary",
      ItemNull: "N/A"
    },
    {
      HeadStyle: "width:75px;",
      Title: "Department",
      ItemKey: "Department",
      ItemNull: "N/A"
    }]
});

【问题讨论】：

标签： jquery datagrid

【解决方案1】：

您可以做的是根据您的情况更改 dataGrid 的选项对象：

let options = {
  DataUrl: baseApiURL + '/Controller/GetDetails',
  PostData: {
    SP_VA_AUTH_NO: AuthNo
  },
  GridId: "GridDetails",
  Loader: false,
  PageSize: 10,
  Columns: [{
      HeadStyle: "width:55px;",
      Title: "Id",
      ItemKey: "Id",
      ItemNull: "N/A"
    },
    {
      HeadStyle: "width:80px;",
      Title: "Name",
      ItemKey: "Name",
      ItemNull: "N/A"
    },
    {
      HeadStyle: "width:200px;",
      Title: "Salary",
      ItemKey: "Salary",
      ItemNull: "N/A"
    }
  ] //removed the Departement column in the base options
}
if (admin) {
  options.Columns.push({ //add Column to options object if condition is true
    HeadStyle: "width:75px;",
    Title: "Department",
    ItemKey: "Department",
    ItemNull: "N/A"
  });
}
$("#Grid_1", Form).DataGrid(options);

【讨论】：