Good to see You are here ;) Well, don't be shy - feel free to test out the demos :)
Simple example
| First name | Last name | Team |
|---|
HTML code
<table class="datagrid" id="m1_table">
<thead><tr><th>First name</th><th>Last name</th><th>Team</th></tr></thead>
<tbody />
</table>
JavaScript code
function model1(id)
{
this.id = id;
this.__defined_cols = ["first_name","last_name","team"];
}
model1.prototype = new jsModel();
var m1 = model1("m1");
$(document).ready(function(){
$("#m1_table").tgrid({object: m1});
m1.rf();
});
Custom display
| Last name | Custom column | First name | Team |
|---|
HTML code
<table class="datagrid" id="m3_table">
<thead><tr><th>Last name</th><th>Custom column</th><th>First name</th><th>Team</th></tr></thead>
<tbody />
</table>
JavaScript code
function model1(id)
{
this.id = id;
this.__defined_cols = ["last_name","custom-column","first_name","team"];
this.renderers = {
"first_name": function(x, r){ return "My first name is "+x+" and my ID is: "+r["ID"]; },
"custom-column": function(x, r){ return "I'm the custom column. ID is: "+r["ID"]; }
}
}
model1.prototype = new jsModel();
var m3 = new model1("m3");
$(document).ready(function(){
$("#m3_table").tgrid({object: m3});
m3.rf();
});
Filtering
Filter:
| First name | Last name | Team |
|---|
HTML code
<div class="tabbertab" title="demo">
<p><b>Filter:</b> <input type="text" id="m2_filter" /></p>
<table class="datagrid" id="m2_table">
<thead><tr><th>First name</th><th>Last name</th><th>Team</th></tr></thead>
<tbody />
</table>
</div>
JavaScript code
function model1(id)
{
this.id = id;
this.__defined_cols = ["first_name","last_name","team"];
}
model1.prototype = new jsModel();
var m2 = new model1("m2");
$(document).ready(function(){
$("#m2_table").tgrid({object: m2});
m2.rf();
enableFiltering();
});
Multiple datagrids
If You want to have more than one datagrid on the same page and then refresh them all, the only thing You need to do is to enqueue the refreshing process one after another. Here's how: (the code is taken from this very page ;))
JavaScript code
model1.prototype = new jsModel();
var m1 = new model1("m1");
var m2 = new model1("m2");
var m3 = new model1("m3",1);
var m4 = new model1("m4",null, 1);
$(document).ready(function(){
$("#m1_table").tgrid({object: m1});
$("#m2_table").tgrid({object: m2});
$("#m3_table").tgrid({object: m3});
$("#m4_table").tgrid({object: m4});
$("#form_m4 form").submit(m4.CRUD);
m1.rf(m2.rf(m3.rf(m4.rf())));
enableFiltering();
});
CRUD
Filter:
| First name | Last name | Team | Edit | Check |
|---|
HTML code
<div class="crud list crud_active">
<p><b>Filter:</b> <input type="text" id="m4_filter" /></p>
<table class="datagrid" id="m4_table">
<thead><tr><th>First name</th><th>Last name</th><th>Team</th><th>Edit</th><th>Check</th></tr></thead>
<tbody />
</table>
</div>
<div id="form_m4" class="crud edytuj">
<form action="http://dreakmore.info/tgrid/demos/server.php" method="post">
<input type="hidden" name="rekord[ID]" />
<p>First name: <input type="text" name="rekord[first_name]" /></p>
<p>Last name: <input type="text" name="rekord[last_name]" /></p>
<p>Team: <input type="text" name="rekord[team]" /></p>
<p><input type="submit" value="save" /> <input type="button" value="cancel" onClick="m4.anulujZapisz()" /></p>
</form>
</div>
JavaScript code
function model1(id)
{
this.id = id;
this.__defined_cols = ["first_name","last_name","team"];
this.colName = "ID";
this.editHref = function(r){ return "javascript:m4.edytuj("+r["ID"]+");"; };
this.checkBoxName = "record";
this.CRUD_COMPLETE = function(out) {
alert("I'm the custom function for confirmation of record save");
this.setActiveCRUD("list");
this.rf();
}
}
model1.prototype = new jsModel();
var m4 = new model1("m4");
$(document).ready(function(){
$("#m4_table").tgrid({object: m4});
$("#form_m4 form").submit(m4.CRUD);
m4.rf();
enableFiltering();
});
The server side source code is always the same: [it's written in PHP but You can use anything You like. I strongly encourage You to use Python]
<?php
$dbh = new PDO("sqlite:example.sqlite");
if (isset($_POST["CRUD"]))
{
$q = "update users set first_name = :fn, last_name = :ln, team = :tm where ID = :id";
$stmt = $dbh->prepare($q);
$params = array(
":fn" => $_POST["rekord"]["first_name"],
":ln" => $_POST["rekord"]["last_name"],
":tm" => $_POST["rekord"]["team"],
":id" => $_POST["rekord"]["ID"]
);
$stmt->execute($params);
echo json_encode(array("status" => 1, "config"=>$_POST["config"]));
}
else
{
if (isset($_POST["id"]))
{
$q = "select * from users where ID = :id";
$stmt = $dbh->prepare($q);
$stmt->execute(array(":id" => (int)$_POST["id"]));
echo json_encode(array("rekord" => $stmt->fetch(),"config" => $_POST["config"]));
}
else
{
$q = "select * from users order by ".$_POST["order_by"]." limit :limit offset :offset";
$stmt = $dbh->prepare($q);
$params = array(
":limit" => (int)$_POST["per_page"],
":offset" => $_POST["per_page"]*$_POST["page"],
);
$count = 150;
if ($_POST["filter"] != "" && $_POST["filter"] != "undefined")
{
$params[":search"] = "%".strtoupper($_POST["filter"])."%";
$q = "select * from users where (upper(first_name) like :search or upper(last_name) like :search or upper(team) like :search) "
."order by ".$_POST["order_by"]." limit :limit offset :offset";
$stmt = $dbh->prepare($q);
}
$stmt->execute($params);
$i = 0;
while ($row = $stmt->fetch())
{
$out[] = $row;
$i++;
}
if (isset($params[":search"])) { $count = $i; }
echo json_encode(array("out" => $out, "count" => $count, "config" => $_POST["config"]));
}
}
?>
News :
tgrid v. 0.0.2 released.
tgrid v. 0.0.1 released.
Download :
- tgrid.zip (tgrid v. 0.0.2)
Quick contact
mikolajczyk.mateusz@gmail.comDesign by Minimalistic Design