ijquery

جدول flexigrid

ScreenShot

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>

 


پیش نمایش دانلود فایل پلاگین

4 دیدگاه دربارهٔ «جدول flexigrid»

  1. با سلام و تشکر از سایت جالبتان
    من کد را در سیستمم امتحان کردم ام محتویات جدول نمایش داده نمی شود
    در پیش نمایش سایت هم همینطور است

  2. سلام
    من جدول را توی سایتم قرار دادم ولی Processing, please wait میاد توی همیت حالت میمونه و scroll هاش هم کار نمیکنن مشکلش کجاست؟

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *