Flexigrid Download

Flexigrid for jQueryby Paulo P. Marinas

Flexi Grid Nedir ?

Hafif ama zengin ajax ile xml dosyasindan veri cekebilme ve boyutlandirilabilir cerceveler olusturmaya yarayan javascript kutuphanesidir.

Ozellikleri

FAQ

  1. Nereden destek alabilirim?
    Hata rapor http://code.google.com/p/flexigrid/, topluluk destegi http://groups.google.com/group/flexigrid/.
  2. Bilinen hatalar ve son zamanlardaki degisiklikler
    http://code.google.com/p/flexigrid/issues/list
  3. Flexigrid destekleyen tarayicilar
    IE6, Firefox 3, Opera 9, Safari 3, Chrome 7 ve digerleri.
  4. Flexigrid code google sayfasi
    http://code.google.com/p/flexigrid/
  5. Ben bunu kesip degistirip kisisel veya ticari projeler icin kullanabilir miyim?
    Kesinlikle kullanabilirsiniz. Bunun icin GPL ve MIT licanslarini okuyun.
  6. Form parametrelerini degistirebilirmiyim ?
    Evet ogrenmek icin ornek sayfaya bir goz atin.

Ihtiyaciniz olan dosyalar

Nasil Kullanilir ?

Asagidaki orneklere goz atin ya da kaynak sayfasina bakin.

Ornek 1

Flexigrid ile yapilandirilmis bir tablo ornegi, tablo yuklekigi surukle birak yontemi ile ayarlanabilir. Ama genislik sabittir.(kaynak kodu goster) 

$('.flexme').flexigrid();
1 2 3 Uzun baslik ismi 4
Veri 1 tasan icerik ile beraber Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4

Ornek 2

Yukseklik ve genislik Flexigrid ile standart olarak ayarlanmistir bu ornekte. Cerceve boyutu sabittir ve degistirilemez. ( Ornegin kaynak kodu) 

$('.flexme2').flexigrid({height:'auto',striped:false});
Col 1 Col 2 Col 3 uzun baslik ismi Col 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4
Veri 1 Veri 2 Veri 3 Veri 4

Ornek 3

Bu ornekte genislik ve yukseklik ayarlanabilir, gizlenebilir, ctrl ve shift tuslarini basili tutarak birden fazla oge secebilir ve silebilirsiniz. Ayrica bu ornekte json ile xml dosyasindaki verileri cekip cerceve icerisinde sutunlar icerisinde gostermektedir(Ornegin kaynak kodu) 

$("#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
});