前言介紹
- 這款 WordPress 外掛「NMR jsGrid」是 2023-01-25 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2023-01-26，距離現在已有 829 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.2 以上版本才可以安裝。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
mirceatm |
外掛標籤
JSGrid table jquery javascript ajax pagination |
內容簡介
使用短碼：[nmr_jsgrid id='your-grid-name']，在網站上添加 jsGrid http://js-grid.com 表格。
數據網格或表格具有可配置的列數、過濾器、編輯、更新和刪除功能。
網格的配置在管理員後端進行。
表格可以分頁，需要後端分頁。 Ajax 請求有助於避免整個頁面重新加載。
一個玩具後端分頁的示例：
add_action('wp_ajax_nopriv_sample_pagination', function () {
// 假定本示例使用 HTTP GET
$data = $_GET;
global $wpdb;
$sql_base = $wpdb->prepare("SELECT umeta_id, meta_key FROM {$wpdb->prefix}usermeta");
$sql = $wpdb->prepare("SELECT COUNT(*) FROM ({$sql_base}) t");
$itemsCount = $wpdb->get_var($sql);
$pageIndex = intval($data['pageIndex']);
if ($pageIndex < 1) {
$pageIndex = 1;
}
$pageSize = intval($data['pageSize']);
if ($pageSize < 1) {
$pageSize = 20;
}
$endIndex = $pageIndex * $pageSize;
$startIndex = $endIndex - $pageSize;
$limit = "LIMIT {$pageSize} OFFSET {$startIndex}";
$sql = "SELECT t.* FROM ({$sql_base}) t {$limit}";
wp_send_json(json_encode(['data' => $wpdb->get_results($sql, ARRAY_A), 'itemsCount' => $itemsCount]));
});
準備好提供分頁數據的後端後，在「管理員」->「NMR jsGrids」介面中可以建立前端資料網格。
添加一行並相應地設置列值。
請參閱文件以了解更多詳細信息：
名稱將用作數據網格的 DOM id
URL後端端點，通常為 https://your-website.com/wp-admin/admin-ajax.php
Action應與後端同步。在我們的示例中，Action=sample_pagination 取自： wp_ajax_nopriv_sample_pagination
Fields 文本形式的列的 JSON 數組。在我們的示例中可為：
[{“name”: “umeta_id”,”title”: “Id”,”type”: “number”},{“name”: “meta_key”,”title”: “Key”,”type”: “text”}]
有關可能列的完整列表，請查看文檔
Height 可以是 auto，一個百分比，如 80%，一個數字： 400
Width 同上
Paging、Editing、Sorting、Autoload、Deleting、Filtering、Inserting、Page size 是自解釋的：允許分頁、編輯、排序、自動加載、刪除、過濾和插入數據。分頁大小確定一頁中的行數。
Pager format 可以有以下值：行：{itemCount} - 頁：{first} {prev} {pages} {next} {last} {pageIndex} of {pageCount}
Page buttons 選 5 是個好選擇
插件將排隊 nmr-jsgrid.js JavaScript 檔。
要在「管理員模組」中使用插件，應在篩選器中添加 Admin slug/hook：nmr_jsgrid_admin_enqueue_scripts
例：
add_filter('nmr_jsgrid_admin_enqueue_scripts', function ($admin_php_files) {
// NMR jsGrid 將在管理員 -> 我的頁面 -> 我的子頁面中可用
$admin_php_files[] = 'admin-my_page_admin-my_subpage';
return $admin_php_files;
});
原文外掛簡介
Add jsGrid http://js-grid.com tables to your website using the shortcode: [nmr_jsgrid id='your-grid-name'].
Data grids or tables have configurable number of columns, filters, edit, update and delete functionalities.
Configuration of grids is performed on the admin back-end.
Tables can be paginated and need back-end pagination. Ajax calls help to avoid entire page reload.
Example of a toy back-end pagination:
add_action('wp_ajax_nopriv_sample_pagination', function () {
// assume HTTP GET for this example
$data = $_GET;
global $wpdb;
$sql_base = $wpdb->prepare("SELECT umeta_id, meta_key FROM {$wpdb->prefix}usermeta");
$sql = $wpdb->prepare("SELECT COUNT(*) FROM ({$sql_base}) t");
$itemsCount = $wpdb->get_var($sql);
$pageIndex = intval($data['pageIndex']);
if ($pageIndex $wpdb->get_results($sql, ARRAY_A), 'itemsCount' => $itemsCount]));
});
Having prepared the back-end to provide paginated data, the front-end data-grid cand be built in the Admin->NMR jsGrids interface.
Add a row and set the column values accordingly.
Please consult the documentation for more details:
Name will be used as DOM id for the data-grid
URL back-end endpoint, usually https://your-website.com/wp-admin/admin-ajax.php
Action should be sincronized with back-end. In our example Action=sample_pagination taken from: wp_ajax_nopriv_sample_pagination
Fields JSON array of columns as text. In our example could be:
[{“name”: “umeta_id”,”title”: “Id”,”type”: “number”},{“name”: “meta_key”,”title”: “Key”,”type”: “text”}]
For a complete list of possible columns check the documentation
Height could be auto, a percent like 80%, a number: 400
Width same as above
Paging, Editing, Sorting, Autoload, Deleting, Filtering, Inserting, Page size are self explanatory: allow pagination, editing, sorting, auto-loading, deleting, filtering and inserting of data. Page size determines the number of rows in one page.
Pager format can have a value of: Rows: {itemCount} – Pages: {first} {prev} {pages} {next} {last} {pageIndex} of {pageCount}
Page buttons 5 is a good choice
Plugin will enqueue nmr-jsgrid.js javascript file.
To use the plugin on the Admin module one should add the Admin slug/hook in the filter: nmr_jsgrid_admin_enqueue_scripts
Ex:
add_filter('nmr_jsgrid_admin_enqueue_scripts', function ($admin_php_files) {
// NMR jsGrid will be available in Admin->My page->My subpage
$admin_php_files[] = 'admin-my_page_admin-my_subpage';
return $admin_php_files;
});
If you enjoy using NMR JSGrid and find it useful, please consider making a donation. Your donation will help encourage and support the plugin’s continued development and better user support.
Privacy Notices
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「NMR jsGrid」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。