在開發 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系統請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線