DHTMLX Grid使用教程：如何在 JavaScript 中创建数据表

翻译|使用教程|编辑：张莹心|2021-11-03 10:25:15.310|阅读 728 次

概述：在开发 Web 应用程序和界面时，可以将数据网格视为必不可少的组件。这个小部件允许通过以表格的形式显示大量数据集来处理它们。在本文中，我们将展示如何使用 DHTMLX 构建 JavaScript 网格。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

在开发 Web 应用程序和界面时，可以将数据网格视为必不可少的组件。这个小部件允许通过以表格的形式显示大量数据集来处理它们。

DHTMLX Grid 小部件提供了一个全面的功能集来处理大量数据并确保用户友好的数据管理。它包括诸如数据过滤和排序、调整大小、行和列拖放、动态加载以及导出到 Excel 和 CSV 等方便的功能。

在本文中，我们将展示如何使用 DHTMLX 构建 JavaScript 网格。

初始化

下载 DHTMLX Grid（作为独立小部件或作为Suite UI 库的一部分）后，您必须先将其解压缩到项目的文件夹中。然后你需要创建一个 HTML 文件并将 JS 和 CSS 源文件的完整路径添加到标题中：

<!DOCTYPE html>
<html>
  <head>
    <title>Grid demo</title>
 
    // include source files of the DHTMLX Suite library
    <script type="text/javascript" src="codebase/suite.js"></script>
    <link rel="stylesheet" href="codebase/suite.css" />
 
    // add dataset for the Grid
    <script type="text/javascript" src="dataset.js"></script>
 
    // add CSS classes with custom settings
    <style>
    ...
    </style>
  </head>

接下来，您应该添加一个容器并为其指定一个 id，例如“grid”：

  <body>
    <div id="grid" class="grid-wrapper"></div>

然后您必须使用对象构造函数初始化 Grid 小部件：

    <script>

      // create a data set for the first column (instead you can add your data)
      var users = [
        {
        name: "Gary Ortiz",
        ava: "01.png",
        },
        {
        name: "Albert Williamson",
        ava: "02.png",
        },
        {
        name: "Mildred Fuller",
        ava: "03.png",
        },
      ];

      // specify Grid configurations
      var config = {

        // configure each Grid column
        columns: [
        ...
        ],
      },

      // initialize the Grid widget and add specified configurations
      this.widget = new dhx.Grid("grid", config);
      var grid = this.widget;
    </script>
  </body>
</html>

造型

DHTMLX Grid 允许您完全自定义其外观。您可以在 HTML 文件的样式部分添加具有所需设置的新 CSS 类，然后在网格配置中指定它们的名称。
因此，我们的网格演示包括自定义单元格背景、边距和文本对齐方式。以下是我们为其创建的 CSS 类的一些示例：
确定数据表的大小：

.grid-wrapper {
  width: 1100px;
  height: 560px;
}

将背景颜色应用于网格行：

.my_custom_row {
  background: #b4dbfe;
}

设置用户照片的位置：

.demo_grid-user-photo {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #61c874;
  text-align: center;
  line-height: 23px;
  border: solid 1px #fff;
  color: white;
  font-weight: 500;
  margin-right: -3px;
}

根据任务的状态指定具有任务的单元格的外观：

.demo_grid-task {
  height: 24px;
  max-width: 92px;
  line-height: 25px;
  margin: 8px auto 0 auto;
  border-radius: 100px;
  text-align: center;
}
 
.demo_grid-task__done {
  background: linear-gradient(
    0deg,
    rgba(10, 177, 105, 0.1),
    rgba(10, 177, 105, 0.1)
  ),
  #ffffff;
  color: #0ab169;
}
 
.demo_grid-task__progress {
  background: linear-gradient(
    0deg,
    rgba(2, 136, 209, 0.1),
    rgba(2, 136, 209, 0.1)
  ),
  #ffffff;
  color: #0288d1;
}
 
.demo_grid-task__not-started {
  background: linear-gradient(
    0deg,
    rgba(122, 134, 140, 0.1),
    rgba(122, 134, 140, 0.1)
  ),
  #ffffff;
  color: rgba(0, 0, 0, 0.7);
}

配置

网格小部件允许通过相应的选项调整其列的配置。您可以调整页眉和页脚的大小、设置所需的列编辑器类型、添加内容过滤功能等。API 命令的完整列表在这里。
让我们配置第一列：

columns: [
  {
    // assign column width
    width: 150,

    // set the id of a column
    id: "access",

    // define the type of the editor and the content alignment
    type: "string",

    // configure the header and footer
    header: [{ text: "Access", rowspan: 2 }],
    footer: [{ text: "Total" }],

    // define the ability to edit data
    editable: false,

    // set a template with content for a cell
    template: function (value) {            
    if (!value) {
      return;
    }
    var photos = value.reduce(function (total, user) {
      return (
        total +
        (user.ava
          ? '<img src="./images/' +
            user.ava +
            '" class="demo_grid-user-photo"/>'
          : '<div class="demo_grid-user-photo" style="background:' +
            user.color +
            ';">' +
            user.name.slice(0, 1) +
            "</div>")
        );
      }, "");
      return '<div class="demo_grid-user">' + photos + "</div>";
    },
  }

数据编辑

DHTMLX Grid 包括7 种类型的编辑器，可根据单元格内容应用这些编辑器。您可以选择适当的选项并通过editorType属性指定编辑网格列的方式。下面的示例演示了如何添加具有三个可用选项的选择控件：

{
  editorType: "select",
  options: ["Done", "In Progress", "Not Started"],
}

此外，您可以应用创建的 CSS 类，这些类将根据所选选项修改 Grid 单元格：

template: function (value) {
  if (value === "Done") {
    return (
      '<div class="demo_grid-task demo_grid-task__done">' +
      value +
      "</div>"
    );
  }
  if (value === "In Progress") {
    return (
      '<div class="demo_grid-task demo_grid-task__progress">' +
      value +
      "</div>"
    );
  }
  if (value === "Not Started") {
    return (
      '<div class="demo_grid-task demo_grid-task__not-started">' +
      value +
      "</div>"
    );
  }
  if (value === "Active") {
    return (
      '<div class="demo_grid-task demo_grid-task__active">' +
      value +
      "</div>"
    );
  }
},

过滤

可以通过在列标题中指定过滤器类型来设置内容过滤。因此，例如，您可以指定selectFilter属性以允许用户通过从下拉列表中选择一个选项来过滤列数据：

id: "project",
header: [{ text: "Project" }, { content: "selectFilter" }],

通过在编辑控件中输入文本并从下拉列表中选择一个选项，comboFilter 属性提供了一种过滤列数据的方法：

id: "owner",
header: [{ text: "Owner" }, { content: "comboFilter" }],

指定 inputFilter 属性后，您允许用户使用文本字段过滤数据：

id: "hours",
header: [{ text: "Number of hours" }, { content: "inputFilter" }],

带数学函数的页脚

您可以将 DHTMLX Grid 配置为使用数学函数并在页脚中显示结果。可以使用默认函数或创建自定义函数。因此，例如，您可以配置网格列以显示列的总值并指定其格式：

this.widget.content["moneySum"] = {
  calculate: function (data) {
    return data.reduce(function (sum, c) {
      return sum + parseFloat(c) || sum + 0;
    }, 0);
  },
  toHtml: function (column, config) {
    if (grid.data) {
      var data = grid.data.map(function (item) {
        return item[column.id];
      });
      return this.calculate(data).toLocaleString("en", {
        style: "currency",
        currency: "USD",
      });
    }
  },
};

DHTMLX Grid使用教程：如何在 JavaScript 中创建数据表

而且，你必须在列配置中提到这个公式：

id: "cost",
footer: [{ content: "moneySum" }],

想要购买dhtmlx正版授权，或了解慧都APS系统请点击

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@ke049m.cn

上一篇：Stimulsoft Reports.Net示例演示：WinForms 类别中查看器中显示仪表板下一篇：Toolbox智能零部件如何转换为普通零件？SolidWorks资深工程师告诉你！

半岛外围网上直营

在线采购

中文文档库

试用/Demo下载

开发社群

DHTMLX Grid使用教程：如何在 JavaScript 中创建数据表

初始化

造型

配置

数据编辑

过滤

带数学函数的页脚

用科技创就卓越

Create excellence with technology

半岛外围网上直营

在线采购

中文文档库

试用/Demo下载

开发社群

DHTMLX Grid使用教程：如何在 JavaScript 中创建数据表

初始化

造型

配置

数据编辑

过滤

带数学函数的页脚

为你推荐

用科技创就卓越

Create excellence with technology