DHTMLX Grid使用教程：如何在 JavaScript 中創(chuàng)建數(shù)據(jù)表

翻譯|使用教程|編輯：張瑩心|2021-11-03 10:25:15.310|閱讀 714 次

概述：在開發(fā) Web 應(yīng)用程序和界面時，可以將數(shù)據(jù)網(wǎng)格視為必不可少的組件。這個小部件允許通過以表格的形式顯示大量數(shù)據(jù)集來處理它們。在本文中，我們將展示如何使用 DHTMLX 構(gòu)建 JavaScript 網(wǎng)格。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

在開發(fā) Web 應(yīng)用程序和界面時，可以將數(shù)據(jù)網(wǎng)格視為必不可少的組件。這個小部件允許通過以表格的形式顯示大量數(shù)據(jù)集來處理它們。

DHTMLX Grid 小部件提供了一個全面的功能集來處理大量數(shù)據(jù)并確保用戶友好的數(shù)據(jù)管理。它包括諸如數(shù)據(jù)過濾和排序、調(diào)整大小、行和列拖放、動態(tài)加載以及導(dǎo)出到 Excel 和 CSV 等方便的功能。

在本文中，我們將展示如何使用 DHTMLX 構(gòu)建 JavaScript 網(wǎng)格。

DHTMLX Grid使用教程：如何在 JavaScript 中創(chuàng)建數(shù)據(jù)表

初始化

下載 DHTMLX Grid（作為獨立小部件或作為Suite UI 庫的一部分）后，您必須先將其解壓縮到項目的文件夾中。然后你需要創(chuàng)建一個 HTML 文件并將 JS 和 CSS 源文件的完整路徑添加到標(biāo)題中：

<!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>

接下來，您應(yīng)該添加一個容器并為其指定一個 id，例如“grid”：

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

然后您必須使用對象構(gòu)造函數(shù)初始化 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 文件的樣式部分添加具有所需設(shè)置的新 CSS 類，然后在網(wǎng)格配置中指定它們的名稱。
因此，我們的網(wǎng)格演示包括自定義單元格背景、邊距和文本對齊方式。以下是我們?yōu)槠?創(chuàng)建的 CSS 類的一些示例：
確定數(shù)據(jù)表的大小：

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

將背景顏色應(yīng)用于網(wǎng)格行：

.my_custom_row {
  background: #b4dbfe;
}

設(shè)置用戶照片的位置：

.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;
}

根據(jù)任務(wù)的狀態(tài)指定具有任務(wù)的單元格的外觀：

.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);
}

配置

網(wǎng)格小部件允許通過相應(yīng)的選項調(diào)整其列的配置。您可以調(diào)整頁眉和頁腳的大小、設(shè)置所需的列編輯器類型、添加內(nèi)容過濾功能等。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>";
    },
  }

數(shù)據(jù)編輯

DHTMLX Grid 包括7 種類型的編輯器，可根據(jù)單元格內(nèi)容應(yīng)用這些編輯器。您可以選擇適當(dāng)?shù)倪x項并通過editorType屬性指定編輯網(wǎng)格列的方式。下面的示例演示了如何添加具有三個可用選項的選擇控件：

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

此外，您可以應(yīng)用創(chuàng)建的 CSS 類，這些類將根據(jù)所選選項修改 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>"
    );
  }
},

過濾

可以通過在列標(biāo)題中指定過濾器類型來設(shè)置內(nèi)容過濾。因此，例如，您可以指定selectFilter屬性以允許用戶通過從下拉列表中選擇一個選項來過濾列數(shù)據(jù)：

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

通過在編輯控件中輸入文本并從下拉列表中選擇一個選項，comboFilter 屬性提供了一種過濾列數(shù)據(jù)的方法：

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

指定 inputFilter 屬性后，您允許用戶使用文本字段過濾數(shù)據(jù)：

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

帶數(shù)學(xué)函數(shù)的頁腳

您可以將 DHTMLX Grid 配置為使用數(shù)學(xué)函數(shù)并在頁腳中顯示結(jié)果。可以使用默認(rèn)函數(shù)或創(chuàng)建自定義函數(shù)。因此，例如，您可以配置網(wǎng)格列以顯示列的總值并指定其格式：

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 中創(chuàng)建數(shù)據(jù)表

而且，你必須在列配置中提到這個公式：

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

想要購買dhtmlx正版授權(quán)，或了解慧都APS系統(tǒng)請點擊

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：Stimulsoft Reports.Net示例演示：WinForms 類別中查看器中顯示儀表板下一篇：Toolbox智能零部件如何轉(zhuǎn)換為普通零件？SolidWorks資深工程師告訴你！

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：項目管理

源碼：非開源

產(chǎn)品編號：14213

當(dāng)前版本：v9.0.14 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： DHTMLX

正式授權(quán)

">DHTMLX Gantt

針對您的解決方案的交互式JavaScript / HTML5甘特圖

控件

產(chǎn)品功能：文檔管理

源碼：非開源

產(chǎn)品編號：14251

當(dāng)前版本：v5.2.0 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： DHTMLX

正式授權(quán)

">DHTMLX Spreadsheet

高度可定制的JavaScript電子表格組件，可安全、方便地編輯和格式化數(shù)據(jù)。

控件

產(chǎn)品功能：圖表

源碼：非開源

產(chǎn)品編號：14258

當(dāng)前版本：v6.0.11 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： DHTMLX

正式授權(quán)

">DHTMLX Diagram

dhtmlxDiagram有很多漂亮的交互式圖表，只需幾行代碼就能生成任何你需要的圖表。

控件

產(chǎn)品功能：UI界面

源碼：非開源

產(chǎn)品編號：13946

當(dāng)前版本：7.2.8 [銷售以商家最新版為準(zhǔn)，如需其他版本，請來電咨詢]

開發(fā) 商： DHTMLX

正式授權(quán)

">DHTMLX Scheduler

一個類似于Google日歷的強大JavaScript日程安排控件。

最新文章 MORE

金喜正規(guī)買球相關(guān)的文章 MORE

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

DHTMLX Grid使用教程：如何在 JavaScript 中創(chuàng)建數(shù)據(jù)表

初始化

造型

配置

數(shù)據(jù)編輯

過濾

帶數(shù)學(xué)函數(shù)的頁腳

用科技創(chuàng)就卓越

Create excellence with technology

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

DHTMLX Grid使用教程：如何在 JavaScript 中創(chuàng)建數(shù)據(jù)表

初始化

造型

配置

數(shù)據(jù)編輯

過濾

帶數(shù)學(xué)函數(shù)的頁腳

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology