搜索mage / gridjs
Magento 2 GridJS 集成
README
GridJS 和 DataTable 与 Magento 2 的集成
Grid.js(https://gridjs.io/) 是一个免费且开源的 JavaScript 表格插件。它与大多数 JavaScript 框架兼容，包括 React、Angular、Vue 和 VanillaJs。
Grid.js 使用 Preact 来渲染元素，这意味着您可以利用 Preact 的虚拟 DOM 和渲染复杂单元格的优势。
DataTable 与 Magento 的集成
DataTables (https://datatables.net.cn/) 是一个用于增强 HTML 表格的 JavaScript 库。它是一个高度灵活的工具，建立在渐进增强的基础之上，可以向任何 HTML 表格添加所有这些高级功能。
最初，GridJS 被集成，但在添加 DataTable 后。
所有扩展都作为 jQuery 插件提供，但可以独立工作。
我还为 Magento 2 提供了 AG Grid 集成，但它不属于这个开源解决方案。世界上最优秀的 JavaScript 网格，是开发企业应用程序的开发者的首选。
这个和其他所有基于这个革命性扩展的 Magento 扩展：https://github.com/Genaker/reactmagento2，它允许在没有 MAgento 破坏 JS 的情况下运行 Magento，并使用更好的现代解决方案。
安装
composer require mage/gridjs
在管理区域的使用
require(['jquery','gridjs']){() =>
jQuery('#lastOrdersGrid_table').Grid()
}
示例：安装后，示例将嵌入到管理仪表板底部
网格源代码
<h1> Grid JS</h1>
<script type="module">
//Modern libs don't work with this magento shit so we are using import.
import { html } from 'preact';
require(['jquery', 'gridjs'], function($, grid) {
jQuery("div#myTable").Grid({
columns: ['Name', 'Email', 'Phone Number' , {
name: 'Actions',
formatter: (_, row) => html`<a href="."><button> EDIT </button></a>`
}
],
pagination: {
limit: 2
},
search: true,
sort: true,
resizable: true,
data: [
['John', 'john@example.com', '(353) 01 222 3333'],
['Mark', 'mark@gmail.com', '(01) 22 888 4444'],
['Egor', 'egorshitikov@gmail.com', '<span>NONE </span>']
]
});
})
</script>
<div id="myTable"></div>
<h1> DataTable </h1>
<script>
require(['jquery', 'DataTable'], function($) {
var dataSet = [
['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
['Garrett Winters', 'Accountant', 'Tokyo', '8422', '2011/07/25', '$170,750'],
....
];
$('#example').DataTable({
columns: [
{ title: 'Name' },
{ title: 'Position' },
{ title: 'Office' },
{ title: 'Extn.' },
{ title: 'Start date' },
{ title: 'Salary' }
],
data: dataSet
});
})
</script>
<table id="example" class="display" width="100%"></table>
更多 GridJS 示例
在这个示例中，我们从现有的 HTML 表格加载数据
Grid.js 还可以将 HTML 表格转换为表格。只需使用 jQuery 选择表格并调用 Grid 即可
$("table#myTable").Grid();
您可以将所有 Grid.js 配置传递给 Grid 函数。有关更多详细信息，请参阅 Grid.js 配置。
单元格中的 HTML
然后您可以在格式化函数或直接在数据数组中使用它
const grid = new Grid({
columns: [
{
name: 'Name',
formatter: (cell) => html`<b>${cell}</b>`
},
'Email',
{
name: 'Actions',
formatter: (_, row) => html`<a href='mailto:${row.cells[1].data}'>Email</a>`
},
],
data: Array(5).fill().map(x => [
faker.name.findName(),
faker.internet.email(),
null
])
});
导入服务器端数据
您可以使用服务器属性从远程服务器加载数据并填充表格
const grid = new Grid({
columns: ['Name', 'Language', 'Released At', 'Artist'],
server: {
url: 'https://api.scryfall.com/cards/search?q=Inspiring',
then: data => data.data.map(card => [card.name, card.lang, card.released_at, card.artist])
}
});
服务器端分页
将服务器属性添加到分页配置中以启用服务器端分页。同时，请确保在主服务器配置块中正确定义了总属性
const grid = new Grid({
columns: ['Pokemon', 'URL'],
pagination: {
limit: 5,
server: {
url: (prev, page, limit) => `${prev}?limit=${limit}&offset=${page * limit}`
}
},
server: {
url: 'https://pokeapi.co/api/v2/pokemon',
then: data => data.results.map(pokemon => [
pokemon.name, html(`<a href='${pokemon.url}'>Link to ${pokemon.name}</a>`)
]),
total: data => data.count
}
});
DataTable 示例
加载数据
DataTables 通过使用 ajax 选项设置 Ajax 请求的 URL 简单地通过 DataTables 加载 Ajax 数据。以下示例显示了一个带有 Ajax 数据源的最低配置
$('#myTable').DataTable( {
ajax: '/api/myData'
} );
JSON 数据源
在考虑为 DataTables 加载 Ajax 数据时，我们几乎总是指一个 JSON 有效负载，即从服务器返回的数据是在 JSON 数据结构中。这是因为 JSON 是从 JavaScript 衍生出来的，因此它自然与 JavaScript 库（如 DataTables）很好地协同工作。
非 jQuery 选项
如果您正在通过 DataTables 1.11 中的新 DataTable() 选项初始化 DataTables，则可以使用构造函数的第二个参数传递配置选项
new DataTable( '#example', {
paging: false,
scrollY: 400
} );
数据渲染
在DataTable中，数据可以轻松渲染以添加图形或颜色到表格中，如本页上的示例所示。这些示例利用了columns.render以三种方式自定义单元格：
$('#example').DataTable({
ajax: '../ajax/data/objects_salary.txt',
columns: [
{
data: 'name'
},
{
data: 'position',
render: function (data, type) {
if (type === 'display') {
let link = 'https://datatables.net.cn';
if (data[0] < 'H') {
link = 'https://cloudtables.com';
}
else if (data[0] < 'S') {
link = 'https://editor.datatables.net';
}
return '<a href="' + link + '">' + data + '</a>';
}
return data;
}
},
{
className: 'f32', // used by world-flags-sprite library
data: 'office',
render: function (data, type) {
if (type === 'display') {
let country = '';
switch (data) {
case 'Argentina':
country = 'ar';
break;
case 'Edinburgh':
country = '_Scotland';
break;
case 'London':
country = '_England';
break;
case 'New York':
case 'San Francisco':
country = 'us';
break;
case 'Sydney':
country = 'au';
break;
case 'Tokyo':
country = 'jp';
break;
}
return '<span class="flag ' + country + '"></span> ' + data;
}
return data;
}
},
{
data: 'extn',
render: function (data, type, row, meta) {
return type === 'display'
? '<progress value="' + data + '" max="9999"></progress>'
: data;
}
},
{
data: 'start_date'
},
{
data: 'salary',
render: function (data, type) {
var number = $.fn.dataTable.render
.number(',', '.', 2, '$')
.display(data);
if (type === 'display') {
let color = 'green';
if (data < 250000) {
color = 'red';
}
else if (data < 500000) {
color = 'orange';
}
return (
'<span style="color:' +
color +
'">' +
number +
'</span>'
);
}
return number;
}
}
]
});