flexigrid یک پلاگین بسیار کاربردی برای جداول می باشد
آموزش استفاده
بعد از فراخوانی پلاگین ها و ساختن جدول مورد نظر کد زیر رو کپی و پیست می کنید فقط دقت کنید که ID جدول رو flex1 قرار بدین و همچنین فولدر css هم یادتون نرده…
تنظیماتی مثل اندازه جدول رو هم میتونید با height و width در آخر این کد به دلخواه تغییر بدید
$("#flex1").flexigrid({ url: 'post2.php', dataType: 'json', colModel : [ {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'}, {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true}, {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'} ], buttons : [ {name: 'Add', bclass: 'add', onpress : test}, {name: 'Delete', bclass: 'delete', onpress : test}, {separator: true} ], searchitems : [ {display: 'ISO', name : 'iso'}, {display: 'Name', name : 'name', isdefault: true} ], sortname: "iso", sortorder: "asc", usepager: true, title: 'Countries', useRp: true, rp: 15, showTableToggleBtn: true, width: 700, height: 200 });
اینم یک مثال ساده تر با جدول ساده از flexigrid …
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Testing Flexigrid + Prototype</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript">jQuery.noConflict();</script> <link rel="stylesheet" type="text/css" href="../css/flexigrid.css" media="all" /> <script type="text/javascript" src="../js/flexigrid.js"></script> </head> <body> <table id="flexme1"> <thead> <tr> <th width="100">Col 1</th> <th width="100">Col 2</th> <th width="100">Col 3 is a long header name</th> <th width="300">Col 4</th> </tr> </thead> <tbody> <tr> <td>This is data 1 with overflowing content</td> <td>This is data 2</td> <td>This is data 3</td> <td>This is data 4</td> </tr> <tr> <td>This is data 1</td> <td>This is data 2</td> <td>This is data 3</td> <td>This is data 4</td> </tr> </tbody> </table> <script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function($) { $('#flexme1').flexigrid(); }); //]]> </script> </body> </html>
با سلام و تشکر از سایت جالبتان
من کد را در سیستمم امتحان کردم ام محتویات جدول نمایش داده نمی شود
در پیش نمایش سایت هم همینطور است
سلام شادی خانم من چک کردم مشکلی نداشت ؟!
Processing, please wait … داره زیرش تا لود شه
سلام خاصیت راست به چپ رو چه جوری میشه فعال کرد؟
سلام
من جدول را توی سایتم قرار دادم ولی Processing, please wait میاد توی همیت حالت میمونه و scroll هاش هم کار نمیکنن مشکلش کجاست؟