Kontrolka OmniGrid/ActiveGrid

Wymagania: Mootools 1.4.4

Wersja: omnigrid 2.0

Autor bazowego omnigrid: Marko Santić, Omnisdata Ltd.

Email: marko@omnistadata.com

WWW: http://www.omnisdata.com/omnigrid

 

 

Autor activegrid: Marcin Załęczny.

Email: mzaleczny@gmail.com

WWW: http://progmar.net.pl/omnigrid</p>

Pobierz

Opis:
Omnigrid i Activegrid są kontrolkami do tabelarycznego wyświetlania danych. Oryginalna wersja Omnigrid została przeze mnie rozszerzona o następujące rzeczy:

  • Podział na trzy klasy: BaseGrid, OmniGrid i ActiveGrid. Klasa OmniGrid ma identyczne działanie ze swoim pierwowzorem. Szczegółowy opis jest tutaj: www.omnisdata.com/omnigrid
  • Tryb aktywnej komórki. Ma za zadanie udostępniać taką funkcjonalność jak np. Grid Excelowy.
  • Dodatkowe typy komórek. Teraz oprócz danych komórki mogą zawierać kontrolki checkbox-ów i list rozwijanych.

Przykład działania

OmniGrid

ActiveGrid

Sposób użycia

Kod html:
 <head>
	...
	<script type="text/javascript" src="/js/mootools-1.4.4.js"></script>
	<script type="text/javascript" src="/js/mootools-1.4.0.1-more.js"></script>

	<link type="text/css" href="/js/omnigrid/omnigrid.css" rel="stylesheet" media="screen" />
	<script type="text/javascript" src="/js/omnigrid/omnigrid.js"></script>
	...
</head>
<body>
	...
	<div id="grid"></div>
	...
</body>
Kod javascript:
 window.addEvent("domready", function(){							
	cmu = [
		{
			header: "String",
			dataIndex: 'column_1',
			dataType:'string',
			editable:true,
			width:100
		},
		{
			header: "Integer",
			dataIndex: 'column_2',
			dataType:'integer',
			editable:true,
			width:60
		},
		{
			header: "Number .02",
			dataIndex: 'column_3',
			dataType:'number',
			editable:true,
			width:100
		},
		{
			header: "Number .04",
			dataIndex: 'column_4',
			dataType:'number',
			decimalPlaces:4,
			editable:true,
			width:100
		},
		{
			header: "Chk",
			dataIndex: 'column_5',
			dataType:'checkbox',
			editable:true,
			width:100,
			labelT:'Yes',
			labelF:'No'
		},
		{
			header: "Chkd",
			dataIndex: 'column_6',
			dataType:'checkbox',
			editable:false,
			width:100
		},
		{
			header: "Boolean",
			dataIndex: 'column_7',
			dataType:'boolean',
			editable:true,
			width:100
		},
		{
			header: "Select",
			dataIndex: 'column_8',
			dataType:'select',
			options: ['option 1', 'option 2', 'option 3', 'option 4', 'option 5'],
			editable:true,
			width:100
		}
	];
	
	var rowCount = 20;
	var rows = new Array();
	var d;
	for (i = 0; i < rowCount; i++) {
		d = new Array();
		d.push('Data ' + i + 'x' + rowCount);
		d.push(i);
		d.push(i + 0.01);
		d.push((i + 0.02).toFixed(4));
		d.push(Math.ceil(Math.random()*100)%2);
		d.push(Math.ceil(Math.random()*100)%2);
		d.push(Math.ceil(Math.random()*100)%2);
		d.push(cmu[7].options[Math.ceil(Math.random()*100)%5]);

		var item = new Object;
		for (var j = 0; j < cmu.length; j++) {
			item[cmu[j].dataIndex] = d[j];
		}
		rows.push(item);
	}
	
	var data = {"page":1,"total":rowCount,"data":rows}
	
	datagrid = new ActiveGrid('grid', {
		width:850,
		height:300,
		columnModel: cmu,
		buttons : null,
		withactivecell:true,
		url: null,
		pagination:false,
		serverSort:false,
		showHeader: true,
		alternaterows: true,
		sortHeader:false,
		resizeColumns:true,
		multipleSelection:false,
		editable: true
	}, data);
});

Opis parametrów

Kontrolkę ActiveGrid tworzymy w identyczny sposób co kontrolkę OmniGrid. Różnice występują jedynie w modelu kolumn cmu:

Znaczenie poszczególnych pól jest następujące: