Skip to content

Commit

Permalink
Added Example 4 - Flexigrid with dynamic data, paging, search, toolba…
Browse files Browse the repository at this point in the history 
…r, and connected to a php-session based JSON file
  • Loading branch information
Kanan Langin-Hooper committed Mar 6, 2013
1 parent 868ccfe commit 4db3f0c
Show file tree
Hide file tree
Showing 2 changed files with 281 additions and 5 deletions.
65 changes: 65 additions & 0 deletions demo/example4.php
View file
@@ -0,0 +1,65 @@
<?php

session_start();

$page = isset($_POST['page']) ? $_POST['page'] : 1;
$rp = isset($_POST['rp']) ? $_POST['rp'] : 10;
$sortname = isset($_POST['sortname']) ? $_POST['sortname'] : 'name';
$sortorder = isset($_POST['sortorder']) ? $_POST['sortorder'] : 'desc';
$query = isset($_POST['query']) ? $_POST['query'] : false;
$qtype = isset($_POST['qtype']) ? $_POST['qtype'] : false;


if(isset($_GET['Add'])){ // this is for adding records

$rows = $_SESSION['Example4'];
$rows[$_GET['EmpID']] =
array(
'name'=>$_GET['Name']
, 'favorite_color'=>$_GET['FavoriteColor']
, 'favorite_pet'=>$_GET['FavoritePet']
, 'primary_language'=>$_GET['PrimaryLanguage']
);
$_SESSION['Example4'] = $rows;

}
elseif(isset($_GET['Delete'])){ // this is for removing records
$rows = $_SESSION['Example4'];
unset($rows[trim($_GET['Delete'])]); // to remove the \n
$_SESSION['Example4'] = $rows;
}
else{

if(isset($_SESSION['Example4'])){ // get session if there is one
$rows = $_SESSION['Example4'];
}
else{ // create session with some data if there isn't
$rows[1] = array('name'=>'Tony', 'favorite_color'=>'green', 'favorite_pet'=>'hamster', 'primary_language'=>'english');
$rows[2] = array('name'=>'Mary', 'favorite_color'=>'red', 'favorite_pet'=>'groundhog', 'primary_language'=>'spanish');
$rows[3] = array('name'=>'Seth', 'favorite_color'=>'silver', 'favorite_pet'=>'snake', 'primary_language'=>'french');
$rows[4] = array('name'=>'Sandra', 'favorite_color'=>'blue', 'favorite_pet'=>'cat', 'primary_language'=>'mandarin');
$_SESSION['Example4'] = $rows;
}



header("Content-type: application/json");
$jsonData = array('page'=>$page,'total'=>0,'rows'=>array());
foreach($rows AS $rowNum => $row){
//If cell's elements have named keys, they must match column names
//Only cell's with named keys and matching columns are order independent.
$entry = array('id' => $rowNum,
'cell'=>array(
'employeeID' => $rowNum,
'name' => $row['name'],
'primary_language' => $row['primary_language'],
'favorite_color' => $row['favorite_color'],
'favorite_pet' => $row['favorite_pet']
)
);
$jsonData['rows'][] = $entry;
}
$jsonData['total'] = count($rows);
echo json_encode($jsonData);

}
221 changes: 216 additions & 5 deletions demo/index.html → demo/index.php
View file
Expand Up @@ -257,12 +257,12 @@ <h2>Example 2</h2>
<h2>Example 3</h2>
<p>
Flexigrid with dynamic data, paging, search, toolbar, and connected to an JSON file.
Flexigrid with dynamic data, paging, search, toolbar, and connected to an XML file.
(<a href="#" onclick="$(this).parent().next().toggle(); return false;">Show sample code</a>)
</p>
<div class="code">
<pre>
$(".flexme3").flexigrid({
$(".flexme3").flexigrid({
url : 'post-xml.php',
dataType : 'xml',
colModel : [ {
Expand Down Expand Up @@ -325,11 +325,127 @@ <h2>Example 3</h2>
showTableToggleBtn : true,
width : 700,
height : 200
});
});
function test(com, grid) {
if (com == 'Delete') {
confirm('Delete ' + $('.trSelected', grid).length + ' items?')
} else if (com == 'Add') {
alert('Add New Item');
}
}
</pre>
</div>
<table class="flexme3" style="display: none"></table>

<h2>Example 4</h2>
<p>
Flexigrid with dynamic data, paging, search, toolbar, and connected to a php-session based JSON file.
(<a href="#" onclick="$(this).parent().next().toggle(); return false;">Show sample code</a>)
</p>
<div class="code">
<pre>
$(".flexme4").flexigrid({
url : 'example4.php',
dataType : 'json',
colModel : [ {
display : 'EmployeeID',
name : 'employeeID',
width : 90,
sortable : true,
align : 'center'
}, {
display : 'Name',
name : 'name',
width : 180,
sortable : true,
align : 'left'
}, {
display : 'Primary Language',
name : 'primary_language',
width : 120,
sortable : true,
align : 'left'
}, {
display : 'Favorite Color',
name : 'favorite_color',
width : 130,
sortable : true,
align : 'left',
hide : true
}, {
display : 'Favorite Animal',
name : 'favorite_pet',
width : 80,
sortable : true,
align : 'right'
} ],
buttons : [ {
name : 'Add',
bclass : 'add',
onpress : Example4
}, {
name : 'Delete',
bclass : 'delete',
onpress : Example4
}, {
separator : true
} ],
searchitems : [ {
display : 'EmployeeID',
name : 'employeeID'
}, {
display : 'Name',
name : 'name',
isdefault : true
} ],
sortname : "iso",
sortorder : "asc",
usepager : true,
title : 'Employees',
useRp : true,
rp : 15,
showTableToggleBtn : true,
width : 750,
height : 200
});
function Example4(com, grid) {
if (com == 'Delete') {
var conf = confirm('Delete ' + $('.trSelected', grid).length + ' items?')
if(conf){
$.each($('.trSelected', grid),
function(key, value){
$.get('example4.php', { Delete: value.firstChild.innerText}
, function(){
// when ajax returns (callback), update the grid to refresh the data
$(".flexme4").flexReload();
});
});
}
} else if (com == 'Add') {
// collect the data
var EmpID = prompt("Please enter the Employee ID","5");
var Name = prompt("Please enter the Employee Name","Mark");
var PrimaryLanguage = prompt("Please enter the Employee's Primary Language","php");
var FavoriteColor = prompt("Please enter the Employee's Favorite Color","Tan");
var FavoriteAnimal = prompt("Please enter the Employee's Favorite Animal","Dog");
// call the ajax to save the data to the session
$.get('example4.php', { Add: true, EmpID: EmpID, Name: Name, PrimaryLanguage: PrimaryLanguage, FavoriteColor: FavoriteColor, FavoritePet: FavoriteAnimal }
, function(){
// when ajax returns (callback), update the grid to refresh the data
$(".flexme4").flexReload();
});
}
}
</pre>
</div>
<table class="flexme4" style="display: none"></table>
<script type="text/javascript">
$('.flexme1').flexigrid();
Expand Down Expand Up @@ -401,7 +517,7 @@ <h2>Example 3</h2>
showTableToggleBtn : true,
width : 700,
height : 200
});
});
function test(com, grid) {
if (com == 'Delete') {
Expand All @@ -410,6 +526,101 @@ <h2>Example 3</h2>
alert('Add New Item');
}
}
$(".flexme4").flexigrid({
url : 'example4.php',
dataType : 'json',
colModel : [ {
display : 'EmployeeID',
name : 'employeeID',
width : 90,
sortable : true,
align : 'center'
}, {
display : 'Name',
name : 'name',
width : 180,
sortable : true,
align : 'left'
}, {
display : 'Primary Language',
name : 'primary_language',
width : 120,
sortable : true,
align : 'left'
}, {
display : 'Favorite Color',
name : 'favorite_color',
width : 130,
sortable : true,
align : 'left',
hide : true
}, {
display : 'Favorite Animal',
name : 'favorite_pet',
width : 80,
sortable : true,
align : 'right'
} ],
buttons : [ {
name : 'Add',
bclass : 'add',
onpress : Example4
}, {
name : 'Delete',
bclass : 'delete',
onpress : Example4
}, {
separator : true
} ],
searchitems : [ {
display : 'EmployeeID',
name : 'employeeID'
}, {
display : 'Name',
name : 'name',
isdefault : true
} ],
sortname : "iso",
sortorder : "asc",
usepager : true,
title : 'Employees',
useRp : true,
rp : 15,
showTableToggleBtn : true,
width : 750,
height : 200
});
function Example4(com, grid) {
if (com == 'Delete') {
var conf = confirm('Delete ' + $('.trSelected', grid).length + ' items?')
if(conf){
$.each($('.trSelected', grid),
function(key, value){
$.get('example4.php', { Delete: value.firstChild.innerText}
, function(){
// when ajax returns (callback), update the grid to refresh the data
$(".flexme4").flexReload();
});
});
}
} else if (com == 'Add') {
// collect the data
var EmpID = prompt("Please enter the Employee ID","5");
var Name = prompt("Please enter the Employee Name","Mark");
var PrimaryLanguage = prompt("Please enter the Employee's Primary Language","php");
var FavoriteColor = prompt("Please enter the Employee's Favorite Color","Tan");
var FavoriteAnimal = prompt("Please enter the Employee's Favorite Animal","Dog");
// call the ajax to save the data to the session
$.get('example4.php', { Add: true, EmpID: EmpID, Name: Name, PrimaryLanguage: PrimaryLanguage, FavoriteColor: FavoriteColor, FavoritePet: FavoriteAnimal }
, function(){
// when ajax returns (callback), update the grid to refresh the data
$(".flexme4").flexReload();
});
}
}
</script>
</body>
</html>

0 comments on commit 4db3f0c

Please sign in to comment.