Hypergrid/1.5

by Yuki KAN / Akkarin

Overview

Hypergrid is a simple, rich data grid class library for pure JavaScript applications.

Hypergridは、Pure JavaScriptアプリケーションのためのシンプルなデータグリッドのクラスライブラリです。
他のライブラリとは違い、別途事前にtable要素を用意する事無く、JSON/XMLデータをJavaScriptのみでグリッド化するのに威力を発揮します。

Features

Example

Here are some examples of Hypergrid.

Hypergrid の動作例をいくつか紹介します。


Example rows

			var exampleRows = [
				{
					cell: {
						id      : { innerHTML: '0' },
						dist    : { innerHTML: 'Debian' },
						creator : { innerHTML: 'Ian Murdock' },
						producer: { innerHTML: 'Debian Project' },
						first   : { innerHTML: '1993' }
					}
				},
				{
					cell: {
						id      : { innerHTML: '1' },
						dist    : { innerHTML: 'Red Hat Linux' },
						creator : { innerHTML: 'Red Hat' },
						producer: { innerHTML: 'Red Hat' },
						first   : { innerHTML: '1995' }
					}
				},
				{
					cell: {
						id      : { innerHTML: '2' },
						dist    : { innerHTML: 'Slackware' },
						creator : { innerHTML: 'Patrick Volkerding' },
						producer: { innerHTML: new Element('i').update('dev team') },
						first   : { innerHTML: '1993' }
					}
				}
			];

Example 1

The most basic example.

最も標準的な利用例。

					new Hypergrid({
						colModel: [
							{ key: 'id', innerHTML: 'ID', width: 25 },
							{ key: 'dist', innerHTML: 'Distribution' },
							{ key: 'creator', innerHTML: 'Creator' },
							{ key: 'producer', innerHTML: 'Producer' },
							{ key: 'first', innerHTML: 'Release', width: 55 }
						],
						rows: exampleRows
					}).render('hypergrid-example-1');

Example 2

Modern style.

モダン。

multiSelect: true,
multiSelect: '100%'

					new Hypergrid({
						multiSelect: true,
						tableWidth : '100%',
						colModel: [
							{ key: 'dist', innerHTML: 'Distribution' },
							{ key: 'first', innerHTML: 'Release', width: 55 }
						],
						rows: exampleRows
					}).render('hypergrid-example-2');

Example 3

Dynamic render options is disabled.

動的な描画オプションを無効にした例。

tableWidth: '100%',
disableSelect: true,
disableSort: true,
disableResize: true

					new Hypergrid({
						tableWidth   : '100%',
						disableSelect: true,
						disableSort  : true,
						disableResize: true,
						colModel: [
							{ key: 'dist', innerHTML: 'Distribution' },
							{ key: 'first', innerHTML: 'Release', width: 55 }
						],
						rows: exampleRows
					}).render('hypergrid-example-3');

How to use

Hypergrid is using Prototype JavaScript framework. so please load it before using Hypergrid.

Hypergrid は Prototype JavaScript framework を利用しています。 Hypergridよりも先に あらかじめロードしておいて ください。


The basic structure.

基本構造。

			var grid = new Hypergrid({
				// basic options to here
				tableWidth : '100%',
				multiSelect: true,
				// column model
				colModel: [
					{
						// column options to here
						key      : 'cellA',
						innerHTML: 'A',
						width    : 100,
						align    : 'right'
					}
				],
				// data rows
				rows: [
					{
						// row options to here
						cell: {
							cellA: {
								// cell options to here
								innerHTML: 'Alice',
								style: {
									backgroundColor: 'black',
									color          : 'white'
								},
								// cell events
								onClick: function(element, evt) {
									evt.stop();
									element.setStyle({ color: 'red' });
									console.log('cell is clicked! (and stopped row events)');
								}
							}
						},
						// row events
						onSelect: function() {
							console.log('row is selected.');
						},
						onUnselect: function() {
							console.log('row is unselected.');
						}
					}
				]
			});
			
			grid.render(element);//<-- render to element

Reference

Methods

Name Arguments Return Description
render (object)element Hypergrid
			var div = new Element('div');
			
			var grid = new Hypergrid({/* ~ */});
			grid.render(div);
Name Arguments Return Description
sorter (str)cell key, (str)order:"asc"|"desc" Hypergrid
			grid.sorter('producer', 'asc');
			grid.render(element);
Name Arguments Return Description
unshift (object)row or (array)rows Hypergrid
push (object)row or (array)rows Hypergrid
shift (number)count, (function)sync callback Hypergrid
pop (number)count, (function)sync callback Hypergrid
insert (number)position or (object)row, (object)row or (array)rows Hypergrid
update (number)position or (object)row, (object)row or (array)rows Hypergrid
			// see: example.html
			grid.push(row).render();
			grid.unshift(row).render();
			grid.shift().render();
			grid.pop().render();
			grid.insert(3, row).render();
			grid.update(3, row).render();

Options

Basic
Name Type Default Description
colModel array [] Important array of column model objects... [{}] Important column modelオブジェクトの配列... [{}]
rows array [] Important array of row objects... [{}] Important rowオブジェクトの配列... [{}]
tableID string, null null attribute of table id table id 属性
tableClass string "hypergrid" attribute of table class table class 属性
tableStyle object {} styles of table (using Element.setStyle) table のスタイル (参照: Element.setStyle)
tableWidth number, string "auto" style of table width table の幅のスタイル
tableHeight number, string "auto" style of table height table の高さのスタイル
colMinWidth number 20 minimum width of column (px) カラムの最小幅 (px)
multiSelect boolean false allow multiple selections 複数選択を有効にする
disableCheckbox boolean false disable checkboxes when allowed multiple selection 複数選択を有効にしたときにチェックボックスを自動生成するのを無効にする
disableSelect boolean false disable selection 選択できないようにする
disableSort boolean false disable sort ソートを無効にする
disableResize boolean false allow resize column カラムのリサイズを無効にする
strSortAsc string "&#x25B2;" (▲) mark of sort in ascending order 昇順ソート時に表示する記号
strSortDesc string "&#x25BC;" (▼) mark of sort in descending order 降順ソート時に表示する記号
onRendered function, null null Event call a function when the rendering is complete Event 描画が完了したときにコールバック
onBeforeSort function, null null Event call a function when the before sort
Arguments: cell key string, order string("asc"|"desc")
Event ソートする前にコールバック
引数: cell key string, order string("asc"|"desc")
onSort function, null null Event call a function when the sort
Arguments: cell key string, order string("asc"|"desc")
Event sortされた時にコールバック
引数: cell key string, order string("asc"|"desc")
Column Model
Name Type Default Description
key string No default Important value of cell key Important cellキーを指定
innerHTML string "" innerHTML of column header カラムヘッダの中身
title string undefined attribute of th title th の title 属性
style object {} styles of th (using Element.setStyle) th のスタイル (参照: Element.setStyle)
width number "auto" style of th width (px) th の幅のスタイル (px)
align string "left" style of th text-align th の text-align スタイル
valign string "middle" style of th vertical-align th の vertical-align スタイル
onClick function undefined Event call a function when click column header (th element)
Arguments: event object
Event カラムヘッダ(th 要素)がクリックされた時にコールバック
引数: event object
Row
Name Type Default Description
cell object No default Important cell(column)s object... {key:{}} Important cell オブジェクト オブジェクト... {key:{}}
id string undefined attribute of tr id
title string undefined attribute of tr title
style object {} styles of tr (using Element.setStyle)
onSelect function undefined Event call a function when select row
Arguments: row object, event object
onUnSelect function undefined Event call a function when unselect row
Arguments: row object, event object
onClick function undefined Event call a function when click row (tr element)
Arguments: row object, event object
onDblClick function undefined Event call a function when double click row (tr element)
Arguments: row object, event object
Cell
Name Type Default Description
innerHTML string undefined innerHTML of cell(column)
title string undefined attribute of td title
style object {} styles of td (using Element.setStyle)
width number "auto" style of td width (px)
align string "left" style of td text-align
valign string "middle" style of td vertical-align
onClick function undefined Event call a function when click cell (td element)
Arguments: td element object, event object

Download

Hyperpack New!

Contact

For anything non-support related you can contact me at akkarinely.jp or @kanreisa. I don't have the time to answer every support related email individually.