استفاده از کامپوننت های منبع باز، ساخت عناصر قدرتمند بخش front-end را برای وب سایت ها یا اپلیکیشن ها بسیار آسان و سریع کرده است. در این آموزش یاد می گیرید که چگونه با استفاده از CSS و jQuery جدولی که قابلیت قابل ویرایش داشته باشد را ایجاد کنید.
شروع کار
اولین کاری که باید انجام دهید ، ایجاد فایل index.html در سرور و یا درایو محلی شماست. کد پایه زیر را در فایل جدید ایجاد شده کپی کرده و سپس آن را ذخیره کنید.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Editable table</title> <style> body{ padding: 1% 3%; color: rgb(119, 119, 119); } h1{ color:#333 } </style> </head> <body> <h1>Editable table example</h1> </body> </html>اکنون باید ابزارهای رایگانی که می خواهیم در این آموزش استفاده کنیم را وارد میدان کنیم. مورد اول Pure CSS نام دارد که فریمورکی بسیار سبک برای CSS محسوب میشود و برای پروژه های کوچک ایده آل است.
البته نیازی به دانلود آن نیست، زیرا می تواند به طور مستقیم از سرورهای Cloudflare پیوندی از آن را در فایل خود قرار دهید. بنابراین فقط کد زیر را در بخش <head> فایل index.html که اخیراً ایجاد کرده اید قرار دهید:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css">دومین ابزاری که می خواهیم از آن استفاده کنیم یک افزونه ساده و شیرین جی کوئری به نام edibleTableWidget است. فایل این پلاگین را از اینجا دانلود کرده و آن را در همان سرور و یا محلی که فایل index.html را ایجاد کرده اید ، قرار دهید. هیچ افزونه jQuery دیگری لازم نیست.
جدول HTML
از آنجا که می خواهیم یک جدول HTML قابل ویرایش را ایجاد کنیم، کاری که اکنون باید انجام شود بدیهی است ... ایجاد یک جدول HTML. جدول شما باید در بخش <body> فایل index.html جایگذاری شود:
<table id="editable" class="pure-table pure-table-bordered"> <thead> <tr> <th>#</th> <th>Make</th> <th>Model</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Honda</td> <td>Accord</td> <td>2009</td> </tr> <tr> <td>2</td> <td>Toyota</td> <td>Camry</td> <td>2012</td> </tr> <tr> <td>3</td> <td>Hyundai</td> <td>Elantra</td> <td>2010</td> </tr> </tbody> </table>حالا به صفحه index.html خود در مرورگر نگاهی بیندازید: به لطف Pure CSS ، جدول ساده HTML ما بسیار زیبا و حرفه ای به نظر می رسد. اگر می خواهید اطلاعات بیشتری درباره آنچه Pure CSS برای جداول HTML انجام میدهد را بدست آورید ، حتماً مستندات مربوط به آن را بررسی کنید.
افزودن jQuery
تا حالا جدول ما خوب به نظر می رسد ، اما در حال حاضر سلول ها قابل ویرایش نیستند. با استفاده از کتابخانه jQuery و پلاگین edibleTableWidget می خواهیم جدول را قابل ویرایش کنیم. اولین کاری که باید انجام دهید پیوند دادن به jQuery است. زیرا پلاگین editableTableWidget برای انجام صحیح کار خود به این کتابخانه احتیاج دارد.
می توانید از یک نسخه کپی از کتاب خانه جی کوئری در سرور خود استفاده کنید و یا پیوندی از Google CDN آن را در فایل خود کپی کنید.همچنین باید به فایل mindmup-editabletable.js که قبلاً دانلود کرده ایم لینک دهیم.کد زیر را در فایل index.html خود، درست بالاتر از تگ خاتمه </ body> قرار دهید :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="mindmup-editabletable.js"></script>بعد از اینکه این کار انجام شد، برای اضافه کردن قابلیت ویرایش در جدول کد زیر را به سند خود اضافه کنید :
<script> $('#editable').editableTableWidget(); </script>حالا صفحه خود را دوباره در مرورگر مشاهده کنید، بله جدول شما قابل ویرایش شده است.
ایجاد سلولهای غیرقابل ویرایش
اکنون که یک جدول قابل ویرایش کاملاً کاربردی داریم ، بیایید کمی فراتر برویم و ببینیم چه کارهایی برای بهتر شدن آن می توانیم انجام دهیم. اول باید اطمینان حاصل کنیم که سلولهای خاص قابل ویرایش نیستند. برای انجام این کار هیچ مسئله بزرگی در اینجا وجود ندارد ،فقط باید یک کلاس را به عناصر <td> اضافه کنیم :
<td class="uneditable">...</td>و سپس ، از کد JavaScript زیر برای تشخیص تغییرات بر روی سلولهای غیرقابل ویرایش و جلوگیری از آن استفاده کنیم :
$('#editable td.uneditable').on('change', function(evt, newValue) { return false; });اگر می خواهید این مورد را در یک نسخه ی نمایشی آزمایش کنید ، سعی کنید سلولی که در آن مقدار "2010" قرار داده شده است را در اینجا ویرایش کنید.. همانطور که مشاهده میکنید ویرایش امکان پذیر نیست.
ذخیره داده ها در پایگاه داده
در نهایت، احتمالا میخواهید مقادیر را از جدول HTML در یک پایگاه داده ذخیره کنید. ساده ترین راه حل برای این کار استفاده از jQuery و Ajax برای ارسال خودکار مقادیر به اسکریپت PHP است که در آن داده ها در پایگاه داده ذخیره میشوند. انجام این کار بسیار ساده است، این کار با استفاده از متد ()post انجام میشود :
$('#editable td').on('change', function(evt, newValue) { $.post( "script.php", { value: newValue }) .done(function( data ) { alert( "Data Loaded: " + data ); }); ; });در خط 1 ، ما از یک شنونده رویداد برای بررسی اینکه آیا مقدار توسط کاربر تغییر کرده است یا خیر، استفاده می کنیم. اگر تغییرات انجام شده متد ()post فراخوانی میشود.
سوالات متداول
آیا این کد ها با Bootstrap هم کار می کند؟
کاملاً، کد های آموزش داده شده در بالا به راحتی با Bootstrap یا سایر فریمورک های CSS سازگار است. فقط باید یک id به جدول اضافه کنید و سپس با متد ()editableTableWidget روی آن فراخوانی کنید :
$('#your-table').editableTableWidget();آیا می توانم چندین جدول قابل ویرایش در یک صفحه داشته باشم؟
بله برای انجام این کار، ساده ترین راه اضافه کردن یک کلاس به جداول خود و متعاقباً فراخوانی متد editableTableWidget() بر روی آنهاست :
$('.editable').editableTableWidget();
چطور از فشرده ساز Winrar استفاده کنیم؟