Group actions:
Id Name Link Inserted Status Action
One 6r0xliyalt 6. 2. 2015 Blahblah
2.00 ozl4gy9udu 6. 2. 2015 Blahblah
3.00 9i20xsrese 6. 2. 2015 Blahblah
4.00 yk95ak88ra 6. 2. 2015 Blahblah
Five 2loxs05egs 6. 2. 2015 Blahblah
6.00 wzrdlu2o0v 6. 2. 2015 Blahblah
7.00 401nd5xv80 6. 2. 2015 Blahblah
8.00 qeba0t2ovv 6. 2. 2015 Blahblah
9.00 el25id2emd 6. 2. 2015 Blahblah
Ten vmkppicf1z 6. 2. 2015 Blahblah
55.00
( Items: 1 - 10 from 200 )

Show me the code of this datagrid

public function createComponentExamplesGrid($name)
{
	/**
	 * @var Ublaboo\DataGrid\DataGrid
	 */
	$grid = new DataGrid($this, $name);

	$grid->setDataSource($this->db->select('*')->from('ublaboo_example', 'u'));
	$grid->setColumnsHideable();

	/**
	 * Big inline editing
	 */
	$grid->addInlineEdit()
		->onControlAdd[] = function($container) {
			$container->addText('id', '');
			$container->addText('name', '');
			$container->addText('inserted', '');
			$container->addText('link', '');
		};

	$grid->addInlineAdd()
		->onControlAdd[] = function($container) {
			$container->addText('name', '');
			$container->addText('inserted', '');
			$container->addText('link', '');
		};

	$grid->getInlineAdd()->onSubmit[] = function($values) {
		/**
		 * Save new values
		 */
		$v='';foreach($values as $key=>$value){$v.="$key: $value, ";}$v=trim($v,', ');

		$this->flashMessage("Record with values [$v] was added! (not really)", 'success');

		$this->redrawControl('flashes');
	};

	$grid->getInlineEdit()->onSetDefaults[] = function($container, $item) {
		$container->setDefaults([
			'id' => $item->id,
			'name' => $item->name,
			'inserted' => $item->inserted->format('j. n. Y'),
			'link' => $item->name,
		]);
	};

	$grid->getInlineEdit()->onSubmit[] = function($id, $values) {
		/**
		 * Save new values
		 */
		$this->flashMessage('Record was updated! (not really)', 'success');

		$this->redrawControl('flashes');
	};

	$grid->setItemsDetail();

	$grid->setTemplateFile(__DIR__ . '/templates/Datagrid/examples_grid.latte');

	/**
	 * Columns
	 */
	$grid->addColumnNumber('id', 'Id')
		->setFormat(2)
		->addAttributes(["width" => "8%"])
		->setAlign('left')
		->setReplacement([1 => 'One', 5 => 'Five', 10 => 'Ten']);

	$db = $this->db;

	$grid->addColumnText('name', 'Name')
		->setSortable()
		->setEditableCallback(function($id, $value) {
			$this->flashMessage("Id: $id, new value: $value");
			$this->redrawControl('flashes');
		})->addAttributes(['class' => 'text-center']);

	$grid->addColumnLink('link', 'Link', 'this#demo', 'name', ['id', 'surname' => 'name']);

	$grid->addColumnDateTime('inserted', 'Inserted');

	$grid->addColumnText('img', 'Img')
		->setTemplate(__DIR__ . '/templates/Datagrid/grid.img1.latte')
		->setDefaultHide();

	$grid->addColumnStatus('status', 'Status')
		->addOption(1, 'Online')
			->setClass('btn-success')
			->endOption()
		->addOption(2, 'Standby')
			->setClass('btn-primary')
			->endOption()
		->addOption(0, 'Offline')
			->setClass('btn-danger')
			->endOption()
		->onChange[] = [$this, 'changeExampleStatus'];

	/**
	 * Filters
	 */
	$grid->addFilterText('name', 'Search', ['name', 'id', 'inserted']);

	$grid->addFilterMultiSelect('status', 'Status:', [
		0 => 'Offline',
		1 => 'Online',
		2 => 'Standby'
	]);

	$grid->addFilterDate('inserted', 'Inserted:');

	$grid->addFilterText('id', 'Id:');

	/**
	 * Actions
	 */
	$grid->addAction('blah', 'Blahblah', 'blah!')
		->setClass('btn btn-xs btn-primary ajax');

	$grid->addAction('delete', '', 'delete!')
		->setIcon('trash')
		->setTitle('Delete')
		->setClass('btn btn-xs btn-danger ajax')
		->setConfirm('Do you really want to delete example %s?', 'name');

	/**
	 * Group action
	 */
	$grid->addGroupAction('Change order status', $this->group_statuses)->onSelect[] = [$this, 'groupChangeStatus'];

	$grid->addGroupAction('Send', [
		'john'  => 'John',
		'joe'   => 'Joe',
		'frank' => 'Frank',
	])->onSelect[] = [$this, 'groupSend'];

	$grid->addGroupMultiSelectAction('SendMulti', [
		'john'  => 'John',
		'joe'   => 'Joe',
		'frank' => 'Frank',
	])->onSelect[] = [$this, 'groupSend2'];

	$grid->addGroupAction('Delete')->onSelect[] = [$this, 'deleteMany'];

	/**
	 * Columns summary
	 */
	$grid->setColumnsSummary(['id']);
}

Template examples_grid.latte:

{extends $original_template}

{block detail}
	<h2>{$item->id} - {$item->name} <small>{$item->inserted|date:'j. n. Y H:i:s'}</small></h2>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Nulla quis diam. Integer in sapien. Nullam dapibus fermentum ipsum. Curabitur bibendum justo non orci. Etiam neque. Nullam dapibus fermentum ipsum. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam posuere lacus quis dolor. Aliquam ornare wisi eu metus. Nulla non lectus sed nisl molestie malesuada. Vivamus ac leo pretium faucibus. Aliquam ante. Aliquam erat volutpat.</p>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Nulla quis diam. Integer in sapien. Nullam dapibus fermentum ipsum. Curabitur bibendum justo non orci. Etiam neque. Nullam dapibus fermentum ipsum. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam posuere lacus quis dolor. Aliquam ornare wisi eu metus. Nulla non lectus sed nisl molestie malesuada. Vivamus ac leo pretium faucibus. Aliquam ante. Aliquam erat volutpat.</p>

	<span class="btn btn-default btn-sm">Just a button</span>
{/block}

Template grid.img1.latte:

<img src="{$basePath}/assets/images/social/_github_black.png" alt="img-{$item->id}" style="height: 17px;">

DataGrid

Downloading DataGrid

DataGrid is available through composer package ublaboo/datagrid:

composer require ublaboo/datagrid

Features

Everyone knows what datagrid is. Basic features of Ublaboo\DataGrid:

DataGrid can do some really useful stuff. Just read on...


Let's create a datagrid component!

We will demonstrate our examples in Presenters (Here you can see an example of DataGrid created in component). First these presenters:
use Ublaboo\DataGrid\DataGrid;

class SimplePresenter extends BasePresenter
{

	public function createComponentSimpleGrid($name)
	{
		$grid = new DataGrid($this, $name);

		$grid->setDataSource($this->db->select('*')->from('ublaboo_example'));
		$grid->addColumnText('name', 'Name');
	}

}

See what you have done:

Name
6r0xliyalt
ozl4gy9udu
9i20xsrese
yk95ak88ra
2loxs05egs
wzrdlu2o0v
401nd5xv80
qeba0t2ovv
el25id2emd
vmkppicf1z
( Items: 1 - 10 from 200 )

That is pretty simple dump of paginated data. If you would like to disable the pagination, you can do it like so:

$grid->setPagination(FALSE);

But that would be a long dump - there are about a thousand rows in database. To change the items per page, select options you will do that via:

$grid->setItemsPerPageList([1, 100, 9090, 2]);

If you are not bored yet, you may find out something about data sources.

Usage in component

SimplePresenter.php:

class SimplePresenter extends BasePresenter
{

	/**
	 * @var App\Components\IFooControlFactory
	 * @inject
	 */
	public $fooControlFactory;


	public function createComponentFooControl()
	{
		return $this->fooControlFactory->create();
	}

}

IFooControlFactory.php:

namespace App\Components;

interface IFooControlFactory
{

	/**
	 * @return FooControl
	 */
	function create();

}

FooControl.php:

namespace App\Components;

use Ublaboo\DataGrid\DataGrid;
use Dibi;

class FooControl extends \Nette\Application\UI\Control
{

	/**
	 * @var Dibi\Connection
	 */
	public $db;


	public function __construct(Dibi\Connection $db)
	{
		$this->db = $db;
	}


	public function render()
	{
		$this->template->render(__DIR__ . '/foo_control.latte');
	}


	public function createComponentSimpleGrid($name)
	{
		$grid = new DataGrid($this, $name);

		$grid->setDataSource($this->db->select('*')->from('ublaboo_example'));
		$grid->addColumnText('name', 'Name');
	}

}

config.neon:

services:
	- App\Components\IFooControlFactory

foo_control.latte:

{control simpleGrid}

Assets

DataGrid needs for its precise functionality some third party scripts and styles. There is a bower.json file withing ublaboo/datagrid package that describes all js/css dependencies. You can install them with bower command:

bower install ublaboo-datagrid

Now you can include these assets into your site:

Css:

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.css">

<!-- Use this css for that pretty checkboxes (https://github.com/paveljanda/happy) -->
<link rel="stylesheet" type="text/css" href="../bower_components/happy/dist/happy.css">
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css">
<link rel="stylesheet" type="text/css" href="../bower_components/ublaboo-datagrid/assets/dist/datagrid.css">

<!-- Use this css for ajax spinners -->
<link rel="stylesheet" type="text/css" href="../bower_components/ublaboo-datagrid/assets/dist/datagrid-spinners.css">

<!-- Include this css when using FilterMultiSelect (silviomoreto.github.io/bootstrap-select) -->
<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap-select/dist/css/bootstrap-select.css">

Js:

<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/nette-forms/src/assets/netteForms.js"></script>
<script src="../bower_components/nette.ajax.js/nette.ajax.js"></script>

<!-- Use this tiny js for that pretty checkboxes (https://github.com/paveljanda/happy) -->
<script src="../bower_components/happy/dist/happy.js"></script>
<script src="../bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<script src="../bower_components/jquery-ui-sortable/jquery-ui-sortable.js"></script>
<script src="../bower_components/ublaboo-datagrid/assets/dist/datagrid.js"></script>

<!-- It is recommended to include this JS file with just a few bits. It refreshes URL on non ajax request -->
<script src="../bower_components/ublaboo-datagrid/assets/dist/datagrid-instant-url-refresh.js"></script>

<!-- Use this little extension for ajax spinners -->
<script src="../bower_components/ublaboo-datagrid/assets/dist/datagrid-spinners.js"></script>

<!-- Include bootstrap.js for proper behaviour of ColumnStatus -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>

<!-- Include bootstrap-select.js when using FilterMultiSelect (silviomoreto.github.io/bootstrap-select) -->
<script src="../bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>

You will probably want to use some icon font, but that is in your command. On this project website we use font awesome (you can change the icon prefix by setting new value to static property DataGrid::$icon_prefix = 'fa fa-';).

Also initializing nette.ajax.js is required:

<!-- Initialize nette.ajax.js after loading the DOM. -->
<script>
    $.nette.init();
</script>

Spinners

As you can see, there is also a datagrid-spinners.js script in datagrid repository. If you include this file within you project layout, there are some actions, that will show spinner/some other animation when waiting for ajax response. Actions, that has somehow animated spinner:

Comparison to other datagrids

I made some benchmarking. Here are the results.

Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. V pořádku Další informace