在开发 Web 应用程序和界面时，可以将数据网格视为必不可少的组件。这个小部件允许通过以表格的形式显示大量数据集来处理它们。在本文中，我们将展示如何使用 DHTMLX 构建 JavaScript 网格。
在开发 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", }); } },};
而且，你必须在列配置中提到这个公式：
id: "cost",footer: [{ content: "moneySum" }],
想要购买dhtmlx正版授权，或了解APS系统请点击【咨询在线客服】
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！