بررسی کلی وبسایت رسمی
Grid.js یک افزونه جدول جاوا اسکریپت رایگان و متنباز است
پایه#
بنیادیترین گروه لیست، یک لیست بدون ترتیب با موارد لیست و کلاسهای مناسب است. بر اساس آن با گزینههایی که در ادامه میآید یا با CSS خود بهصورت لازم، بسازید.
<div id="table-gridjs"></div>
// جدول پایه
if (document.getElementById("table-gridjs"))
new gridjs.Grid({
columns: [{
name: 'شناسه',
formatter: (function (cell) {
return gridjs.html('' + cell + '');
})
},
"نام",
{
name: 'ایمیل',
formatter: (function (cell) {
return gridjs.html('' + cell + '');
})
},
"سمت", "شرکت", "کشور",
{
name: 'عملیات',
width: '120px',
formatter: (function (cell) {
return gridjs.html("" + "جزئیات" + "");
})
},
],
pagination: {
limit: 5
},
sort: true,
search: true,
data: [
["11", "آلیس", "alice@example.com", "مهندس نرمافزار", "شرکت ABC", "ایالات متحده"],
["12", "باب", "bob@example.com", "مدیر محصول", "XYZ Inc", "کانادا"],
["13", "چارلی", "charlie@example.com", "تحلیلگر داده", "123 Corp", "استرالیا"],
["14", "داوید", "david@example.com", "طراح UI/UX", "456 Ltd", "بریتانیا"],
["15", "اِو", "eve@example.com", "متخصص بازاریابی", "789 Enterprises", "فرانسه"],
["16", "فرانک", "frank@example.com", "مدیر منابع انسانی", "شرکت ABC", "آلمان"],
["17", "گریس", "grace@example.com", "تحلیلگر مالی", "XYZ Inc", "ژاپن"],
["18", "هاننا", "hannah@example.com", "نماینده فروش", "123 Corp", "برزیل"],
["19", "ایان", "ian@example.com", "توسعهدهنده نرمافزار", "456 Ltd", "هند"],
["20", "جین", "jane@example.com", "مدیر عملیات", "789 Enterprises", "چین"]
]
}).render(document.getElementById("table-gridjs"));
صفحهبندی#
با تنظیم pagination: true میتوان صفحهبندی را فعال کرد:
<div id="table-pagination"></div>
// جدول صفحهبندی
if (document.getElementById("table-pagination"))
new gridjs.Grid({
columns: [{
name: 'شناسه',
width: '120px',
formatter: (function (cell) {
return gridjs.html('' + cell + '');
})
}, "نام", "تاریخ", "جمع کل",
{
name: 'عملیات',
width: '100px',
formatter: (function (cell) {
return gridjs.html("");
})
},
],
pagination: {
limit: 5
},
data: [
["#RB2320", "آلیس", "07 اکتبر، 2024", "$24.05"],
["#RB8652", "باب", "07 اکتبر، 2024", "$26.15"],
["#RB8520", "چارلی", "06 اکتبر، 2024", "$21.25"],
["#RB9512", "داوید", "05 اکتبر، 2024", "$25.03"],
["#RB7532", "اِو", "05 اکتبر، 2024", "$22.61"],
["#RB9632", "فرانک", "04 اکتبر، 2024", "$24.05"],
["#RB7456", "گریس", "04 اکتبر، 2024", "$26.15"],
["#RB3002", "هاننا", "04 اکتبر، 2024", "$21.25"],
["#RB9857", "ایان", "03 اکتبر، 2024", "$22.61"],
["#RB2589", "جین", "03 اکتبر، 2024", "$25.03"],
]
}).render(document.getElementById("table-pagination"));
جستجو#
Grid.js جستجوی جهانی را در تمام ردیفها و ستونها پشتیبانی میکند. برای فعالسازی افزونه جستجو search: true را تنظیم کنید:
<div id="table-search"></div>
// جدول جستجو
if (document.getElementById("table-search"))
new gridjs.Grid({
columns: ["نام", "ایمیل", "سمت", "شرکت", "کشور"],
pagination: {
limit: 5
},
search: true,
data: [
["آلیس", "alice@example.com", "مهندس نرمافزار", "شرکت ABC", "ایالات متحده"],
["باب", "bob@example.com", "مدیر محصول", "XYZ Inc", "کانادا"],
["چارلی", "charlie@example.com", "تحلیلگر داده", "123 Corp", "استرالیا"],
["داوید", "david@example.com", "طراح UI/UX", "456 Ltd", "بریتانیا"],
["اِو", "eve@example.com", "متخصص بازاریابی", "789 Enterprises", "فرانسه"],
["فرانک", "frank@example.com", "مدیر منابع انسانی", "شرکت ABC", "آلمان"],
["گریس", "grace@example.com", "تحلیلگر مالی", "XYZ Inc", "ژاپن"],
["هاننا", "hannah@example.com", "نماینده فروش", "123 Corp", "برزیل"],
["ایان", "ian@example.com", "توسعهدهنده نرمافزار", "456 Ltd", "هند"],
["جین", "jane@example.com", "مدیر عملیات", "789 Enterprises", "چین"]
]
}).render(document.getElementById("table-search"));
مرتبسازی#
بهمنظور فعالسازی مرتبسازی، به سادگی sort: true را به پیکربندی خود اضافه کنید:
<div id="table-sorting"></div>
// جدول مرتبسازی
if (document.getElementById("table-sorting"))
new gridjs.Grid({
columns: ["نام", "ایمیل", "سمت", "شرکت", "کشور"],
pagination: {
limit: 5
},
sort: true,
data: [
["آلیس", "alice@example.com", "مهندس نرمافزار", "شرکت ABC", "ایالات متحده"],
["باب", "bob@example.com", "مدیر محصول", "XYZ Inc", "کانادا"],
["چارلی", "charlie@example.com", "تحلیلگر داده", "123 Corp", "استرالیا"],
["داوید", "david@example.com", "طراح UI/UX", "456 Ltd", "بریتانیا"],
["اِو", "eve@example.com", "متخصص بازاریابی", "789 Enterprises", "فرانسه"],
["فرانک", "frank@example.com", "مدیر منابع انسانی", "شرکت ABC", "آلمان"],
["گریس", "grace@example.com", "تحلیلگر مالی", "XYZ Inc", "ژاپن"],
["هاننا", "hannah@example.com", "نماینده فروش", "123 Corp", "برزیل"],
["ایان", "ian@example.com", "توسعهدهنده نرمافزار", "456 Ltd", "هند"],
["جین", "jane@example.com", "مدیر عملیات", "789 Enterprises", "چین"]
]
}).render(document.getElementById("table-sorting"));
حالت بارگذاری#
Grid.js بهطور خودکار نوار بارگذاری را در حالی که منتظر دریافت دادهها است، رندر میکند. در اینجا ما از یک تابع async استفاده میکنیم تا این رفتار را نمایش دهیم (بهعنوان مثال، یک تابع async میتواند یک تماس XHR به یک سرور باشد)
<div id="table-loading-state"></div>
// جدول حالت بارگذاری
if (document.getElementById("table-loading-state"))
new gridjs.Grid({
columns: ["نام", "ایمیل", "سمت", "شرکت", "کشور"],
pagination: {
limit: 5
},
sort: true,
data: function () {
return new Promise(function (resolve) {
setTimeout(function () {
resolve([
["آلیس", "alice@example.com", "مهندس نرمافزار", "شرکت ABC", "ایالات متحده"],
["باب", "bob@example.com", "مدیر محصول", "XYZ Inc", "کانادا"],
["چارلی", "charlie@example.com", "تحلیلگر داده", "123 Corp", "استرالیا"],
["داوید", "david@example.com", "طراح UI/UX", "456 Ltd", "بریتانیا"],
["اِو", "eve@example.com", "متخصص بازاریابی", "789 Enterprises", "فرانسه"],
["فرانک", "frank@example.com", "مدیر منابع انسانی", "شرکت ABC", "آلمان"],
["گریس", "grace@example.com", "تحلیلگر مالی", "XYZ Inc", "ژاپن"],
["هاننا", "hannah@example.com", "نماینده فروش", "123 Corp", "برزیل"],
["ایان", "ian@example.com", "توسعهدهنده نرمافزار", "456 Ltd", "هند"],
["جین", "jane@example.com", "مدیر عملیات", "789 Enterprises", "چین"]
])
}, 2000);
});
}
}).render(document.getElementById("table-loading-state"));
سربرگ ثابت#
بنیادیترین گروه لیست، یک لیست بدون ترتیب با موارد لیست و کلاسهای مناسب است. بر اساس آن با گزینههایی که در ادامه میآید یا با CSS خود بهصورت لازم، بسازید.
<div id="table-fixed-header"></div>
// سربرگ ثابت
if (document.getElementById("table-fixed-header"))
new gridjs.Grid({
columns: ["نام", "ایمیل", "سمت", "شرکت", "کشور"],
sort: true,
pagination: true,
fixedHeader: true,
height: '400px',
data: [
["آلیس", "alice@example.com", "مهندس نرمافزار", "شرکت ABC", "ایالات متحده"],
["باب", "bob@example.com", "مدیر محصول", "XYZ Inc", "کانادا"],
["چارلی", "charlie@example.com", "تحلیلگر داده", "123 Corp", "استرالیا"],
["داوید", "david@example.com", "طراح UI/UX", "456 Ltd", "بریتانیا"],
["اِو", "eve@example.com", "متخصص بازاریابی", "789 Enterprises", "فرانسه"],
["فرانک", "frank@example.com", "مدیر منابع انسانی", "شرکت ABC", "آلمان"],
["گریس", "grace@example.com", "تحلیلگر مالی", "XYZ Inc", "ژاپن"],
["هاننا", "hannah@example.com", "نماینده فروش", "123 Corp", "برزیل"],
["ایان", "ian@example.com", "توسعهدهنده نرمافزار", "456 Ltd", "هند"],
["جین", "jane@example.com", "مدیر عملیات", "789 Enterprises", "چین"]
]
}).render(document.getElementById("table-fixed-header"));