'JS' html creation method purged; More examples added

littleK0i · Jun 17, 2012 · 15f2505 · 15f2505
1 parent 371d9e1
commit 15f2505
Show file tree

Hide file tree

Showing 8 changed files with 292 additions and 45 deletions.
diff --git a/examples/grids/jqMiscAjaxDialog.php b/examples/grids/jqMiscAjaxDialog.php
@@ -0,0 +1,45 @@
+<?php
+
+class jqMiscAjaxDialog extends jqGrid
+{
+	protected function init()
+	{
+		$this->query = "
+			SELECT {fields}
+			FROM tbl_customer c
+				JOIN tbl_order o ON (c.id=o.customer_id)
+			WHERE {where}
+			GROUP BY c.id
+		";
+
+		#Set columns
+		$this->cols = array(
+			'id'            =>array('label' => 'ID',
+									'db'    => 'c.id',
+									'width' => 10,
+									'align' => 'center',
+									),
+
+			'c_name'		=>array('label' => 'Customer name',
+									'db'	=> "CONCAT(c.first_name, ' ', c.last_name)",
+									'width' => 35,
+									),
+
+			'order_cnt'		=>array('label' => 'Order count',
+									'db'    => 'count(o.id)',
+									'width' => 15,
+									),
+
+			'order_latest'  =>array('label' => 'Latest order',
+									'db'    => 'max(o.date_create)',
+									'width' => 15,
+									),
+		);
+	}
+
+	protected function opDialog()
+	{
+		$rendered_grid = $this->loader->render('jqMiscAjaxDialogDetails', array('customer_id' => $this->input('id')));
+		$this->response['html'] = "<script> $rendered_grid </script>";
+	}
+}
diff --git a/examples/grids/jqMiscAjaxDialogDetails.php b/examples/grids/jqMiscAjaxDialogDetails.php
@@ -0,0 +1,50 @@
+<?php
+
+class jqMiscAjaxDialogDetails extends jqGrid
+{
+	protected function init()
+	{
+		$this->options = array(
+			'width'  => 496,
+			'height' => 185,
+			'rowNum' => -1,
+		);
+
+		$this->query = "
+			SELECT {fields}
+			FROM tbl_order o
+				JOIN tbl_order_item i ON (o.id=i.order_id)
+			WHERE {where}
+			GROUP BY o.id
+		";
+
+		$this->cols_default = array('align' => 'center');
+
+		#Set columns
+		$this->cols = array(
+			'id'            =>array('label' => 'ID',
+									'db'    => 'o.id',
+									'width' => 10,
+									),
+
+			'customer_id'   =>array('hidden' => true), //to make auto-search work
+
+			'quantity'		=>array('label' => 'Total quantity',
+									'db'    => 'count(i.quantity)',
+									'width' => 15,
+									),
+
+			'price'			=>array('label' => 'Total price',
+									'db'    => 'sum(i.price * i.quantity)',
+									'width' => 15,
+									),
+
+			'date_create'   =>array('label' => 'Date',
+									'db'    => 'o.date_create',
+									'width' => 18,
+									),
+		);
+
+		$this->render_suffix_col = 'customer_id';
+	}
+}
diff --git a/examples/grids/jqMiscDatepickers.php b/examples/grids/jqMiscDatepickers.php
@@ -0,0 +1,118 @@
+<?php
+
+class jqMiscDatepickers extends jqGrid
+{
+	protected function init()
+	{
+		$this->table = 'tbl_customer';
+
+		#Set columns
+		$this->cols = array(
+			'id'            =>array('label' => 'ID',
+									'width' => 10,
+									'align' => 'center',
+									),
+
+			'c_name'		=>array('label' => 'Customer name',
+									'db'	=> "CONCAT(first_name, ' ', last_name)",
+									'width' => 35,
+									),
+
+			'date_birth'    =>array('label' => 'Birth date',
+									'width' => 20,
+									'searchoptions' => array('dataInit' => $this->initDatepicker(array(
+										'dateFormat'     => 'yy-mm-dd',
+										'changeMonth'    => true,
+										'changeYear'     => true,
+										'minDate'        => '1950-01-01',
+										'maxDate'        => '2000-01-01',
+										'onSelect'       => new jqGrid_Data_Raw('function(){$grid[0].triggerToolbar();}'),
+									))),
+									'search_op' => 'equal',
+									),
+
+			'date_register' =>array('label' => 'Register date',
+									'width' => 20,
+									'searchoptions' => array('dataInit' => $this->initDateRangePicker(array(
+										'earliestDate' => '2011-01-01',
+										'latestDate'   => '2011-06-10',
+										'dateFormat'   => 'yy-mm-dd',
+										'onChange'     => new jqGrid_Data_Raw('dateRangePicker_onChange'),
+										'presetRanges' => array(
+											array('text' => 'January 2011', 'dateStart' => '2011-01-01', 'dateEnd' => '2011-02-01'),
+											array('text' => 'February 2011', 'dateStart' => '2011-02-01', 'dateEnd' => '2011-03-01'),
+										),
+										'datepickerOptions' => array(
+											'changeMonth' => true,
+											'dateFormat'  => 'yy-mm-dd',
+											'minDate'     => '2011-01-01',
+											'maxDate'     => '2011-06-10',
+										),
+									))),
+									'search_op' => 'date_range',
+									),
+		);
+
+		$this->render_filter_toolbar = true;
+	}
+
+	protected function searchOpDateRange($c, $val)
+	{
+		//--------------
+		// Date range
+		//--------------
+
+		if(strpos($val, ' - ') !== false)
+		{
+			list($start, $end) = explode(' - ', $val, 2);
+
+			$start = strtotime(trim($start));
+			$end   = strtotime(trim($end));
+
+			if(!$start or !$end)
+			{
+				throw new jqGrid_Exception('Invalid date format');
+			}
+
+			#Stap dates if start is bigger than end
+			if($start > $end)
+			{
+				list($start, $end) = array($end, $start);
+			}
+
+			$start = date('Y-m-d', $start);
+			$end   = date('Y-m-d', $end);
+
+			return $c['db'] . " BETWEEN '$start' AND '$end'";
+		}
+
+		//------------
+		// Single date
+		//------------
+
+		$val = strtotime(trim($val));
+
+		if(!$val)
+		{
+			throw new jqGrid_Exception('Invalid date format');
+		}
+
+		$val = date('Y-m-d', $val);
+
+		return "DATE({$c['db']}) = '$val'";
+	}
+
+	protected function initDatepicker($options=null)
+	{
+		$options = is_array($options) ? $options : array();
+
+		return new jqGrid_Data_Raw('function(el){$(el).datepicker(' . jqGrid_Utils::jsonEncode($options) . ');}');
+	}
+
+	protected function initDateRangePicker($options=null)
+	{
+		$options = is_array($options) ? $options : array();
+
+		return new jqGrid_Data_Raw('function(el){$(el).daterangepicker(' . jqGrid_Utils::jsonEncode($options) . ');}');
+	}
+}
diff --git a/examples/sections.php b/examples/sections.php
@@ -51,7 +51,8 @@
 		'items' => array('miscGroupHeader'		=> array('en' => 'Grouping header', 'ru' => 'Группировка заголовков'),
 						 'miscGroupHeaderEx'	=> array('en' => 'Grouping header 2', 'ru' => 'Группировка заголовков 2'),
 						 'miscSubgrid'			=> array('en' => 'Grid as subgrid', 'ru' => 'Вложенные таблицы'),
-						),
-
+						 'miscDatepickers'      => array('en' => 'Datepickers', 'ru' => 'Выбор даты'),
+						 'miscAjaxDialog'       => array('en' => 'Grid in ajax dialog', 'ru' => 'Загрузка таблиц через AJAX'),
+						),					
 	),
 );
diff --git a/examples/templates/_layout.php b/examples/templates/_layout.php
@@ -16,7 +16,7 @@
 	<!--jqGrid-->
 	<link href="/jqgrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
 	<script src="/jqgrid/js/i18n/grid.locale-en.js"></script>
-    <script src="/jqgrid/js/jquery.jqGrid.js"></script>
+    <script src="/jqgrid/js/jquery.jqGrid.min.js"></script>
 
 	<!--jqGrid Extension-->
 	<link href="/client/jqgrid-ext.css" rel="stylesheet" type="text/css" />

diff --git a/examples/templates/jqMiscAjaxDialog.php b/examples/templates/jqMiscAjaxDialog.php
@@ -0,0 +1,43 @@
+<script>
+var opts = {
+	'ondblClickRow' : function(id)
+	{
+		$jqMiscAjaxDialog.jqGrid('extLoading', true);
+
+		$.get($(this).jqGrid('getGridParam', 'url'),
+		{
+			'oper' : 'dialog', 
+			'id'   : id
+		}, function(ret)
+		{
+			var $cont = $('<DIV>');
+
+			$cont.dialog({
+				'modal'     : true,
+				'width'     : 520,
+				'height'    : 280,
+				'title'     : 'Customer details: ' + id,
+				'resizable' : false,
+				'close'     : function(event, ui)
+				{
+					$('.ui-dialog-content').dialog('destroy');
+					$cont.remove();
+				}
+			});
+
+			$cont.html(ret.html);
+
+			$jqMiscAjaxDialog.jqGrid('extLoading', false);
+		});
+	}
+};
+
+<?= $rendered_grid ?>
+</script>
+
+<div id="descr_rus">
+	Пример загрузки таблиц в диалоговом окне через AJAX.<br>
+	Дважды кликните на любом ряде таблицы.<br><br>
+
+	По просьбе с phpclub.ru.
+</div>
diff --git a/examples/templates/jqMiscDatepickers.php b/examples/templates/jqMiscDatepickers.php
@@ -0,0 +1,29 @@
+<script src="/range_picker/js/daterangepicker.jQuery.compressed.js"></script>
+<link href="/range_picker/css/ui.daterangepicker.css" rel="stylesheet" type="text/css" />
+
+<script>
+<?= $rendered_grid ?>
+
+function dateRangePicker_onChange()
+{
+	var $input = $('#gs_date_register');
+	var old_val = $input.val();
+
+	setTimeout(function()
+	{
+		if($input.val() == old_val)
+		{
+			$grid[0].triggerToolbar();
+		}
+	}, 50);
+}
+</script>
+
+<div id="descr_rus">
+	Пример использования различных datepicker'ов.<br><br>
+
+	Выберите дату <b>1990-03-05</b> в поле <b>Birth Date</b>.<br>
+	Выберите дату <b>2011-06-09</b> или любой промежуток дат в поле <b>Register Date</b>.<br><br>
+
+	По просьбе с phpclub.ru.
+</div>