|
$.Data.Table( table_structure_json ) - Class
$.Data.Table() allows a Database Table like storage in client (browser) side and it's benefits. This Table functionality has APIs like insert, update, select and remove which are similar to a database table operations. It brings few important features of a Database Table.
$.Data.Table() uses Arrays and JSON formats for data storage. NedilJS internally uses $.Data.Table() for event handling. All Nedil Tables will have and "id" column which will be auto incremented for every insert. This data structure is not suitable for heavy data management and is temporary which will be lost once the page is closed.
Parameters
Returns
Example
Create a Table with fields 'name', 'age' and 'salary'
JS
$.domLoaded(function() {
//Create a Table object with name, age and Salary columns
var tab = new Nedil.Data.Table({name:[], age:[], salary:[]});
});
.insert( insert_values_json )
insert() is similar to Database tables insert statement. It inserts new record into Nedil Table structure and returns id of new inserted record.
Parameters
Returns
Example
Insert two records in Nedil Table.
JS
$.domLoaded(function() {
//Create a Table object with name, age and Salary columns
var tab = new Nedil.Data.Table({name:[], age:[], salary:[]});
//Insert records into the table
tab.insert({name : "Senthil" , age : 24, salary : 2000});
tab.insert({name : "Ganesh" , age : 27, salary : 3000});
});
.update( set_values_json , where_cond_json )
update() is similar to Database tables update statement. It sets values provided by first parameter to all records which match the where condition provided as second parameter. It returns number of records updated.
Parameters
Returns
Example
Update few records with condtions.
JS
$.domLoaded(function() {
//Create a Table object with name, age and Salary columns
var tab = new Nedil.Data.Table({name:[], age:[], salary:[]});
//Insert records into the table
tab.insert({name : "Senthil" , age : 24, salary : 2000});
tab.insert({name : "Ganesh" , age : 27, salary : 3000});
//To update all reocords with salary 3000, use condition as "*"
var rec = tab.update({salary : 3000}, "*");
//To update reocords with salary 3000 only for name = "Senthil" condition
var rec = tab.update({salary : 3000}, {name : "Senthil"});
//Multiple Cond - Set salary=3000 for records with name="Senthil" & age=24
var rec = tab.update({salary : 3000}, {name : "Senthil", age : 24});
//Multiple values - Set age=24 & salary=3000 for records with name="Senthil"
var rec = tab.update({age : 24, salary : 3000}, {name : "Senthil"});
//Multiple values & Multiple Conditions
var rec = tab.update({age : 25, salary : 3000}, {name : "Senthil", age : 24});
});
.remove( where_cond_json )
remove() is similar to Database tables delete statement. It deletes records from Nedil Table and returns number of records deleted. Where condition can be provided as parameter.
Parameters
Returns
Example
Delete few records with condtions.
JS
$.domLoaded(function() {
//Create a Table object with name, age and Salary columns
var tab = new Nedil.Data.Table({name:[], age:[], salary:[]});
//Insert records into the table
tab.insert({name : "Senthil" , age : 24, salary : 2000});
tab.insert({name : "Ganesh" , age : 27, salary : 3000});
//To delete record with name = "Senthil" condition
var rec = tab.remove({name : "Senthil"});
//Multiple Conditions
var rec = tab.remove({name : "Senthil", age : 24});
//To delete all reocords, use condition as "*"
var rec = tab.remove("*");
});
.select( column_name_array, where_cond_json )
select() is similar to Database tables select statement. It fetches records from Nedil Table and returns result set as an Array of Rows object. Selection can be limited using where condition.
Parameters
Returns
Rows - Methods
Example
Select records using .select() function and iterate over the result set to get individual records and values.
JS
Example
$.domLoaded(function() {
//Create a Table object with name, age and Salary columns
var tab = new Nedil.Data.Table({name:[], age:[], salary:[]});
//Insert records into the table
tab.insert({name : "Senthil" , age : 24, salary : 2000});
tab.insert({name : "Ganesh" , age : 27, salary : 3000});
//To select all records
var rs = tab.select("*", "*");
//With conditions
var rs = tab.select("*", {name : "Senthil", age : 24});
//Restrict columns - Fetch only 'name' and 'age'
var rs = tab.select(["name", "age"], "*");
//Iterate result set and get values
for(var i = 0, len = rs.length; i < len; i++) {
//Get name, rs[] is array of Rows object
var n = rs[0].getValue("name");
//Get age
var a = rs[0].getValue("age");
}
});
Let's put all together and try few opertations like insert, remove, update and select in Nedil.Data.Table()
JS
HTML
CSS
$.domLoaded(function() {
// create table structure
var tab = new Nedil.Data.Table({name:[], age:[], salary:[]});
// insert few records
tab.insert({name : "Senthil" , age : 24, salary : 2000});
tab.insert({name : "Ganesh" , age : 27, salary : 3000});
tab.insert({name : "Shane" , age : 24, salary : 1000});
function showView () {
// get all records
var rs = tab.select("*", "*");
$.get("#emp").html("");
for(var i = 0, len = rs.length; i < len; i++ ) {
var tr = $.get("#emp").addChild("tr");
// individual value and display
tr.addChild("td", { "text" : rs[i].getValue("id")});
tr.addChild("td", { "text" : rs[i].getValue("name")});
tr.addChild("td", { "text" : rs[i].getValue("age")});
tr.addChild("td", { "text" : rs[i].getValue("salary")});
// individual delete button
var del = tr.addChild("td").addChild("input", { "type" : "button", "value" : "Delete" });
(function() {
var id = rs[i].getValue("id");
del.on("click", function() {
var rec = tab.remove({id : id});
showView();
alert("Deleted " + rec + " records");
});
})();
}
}
$.get("#add").on("click", function() {
var nam = $.get("#nam").element().value;
var ag = parseInt($.get("#ag").element().value);
var sal = parseInt($.get("#sal").element().value);
// insert new values
tab.insert({ name : nam, age : ag, salary : sal});
showView();
$.get("#nam").element().value = "";
$.get("#ag").element().value = "";
$.get("#sal").element().value = "";
alert("New record is inserted");
});
$.get("#upd1").on("click", function() {
// update a record
var rec = tab.update({ name : "Senthilnathan" }, { name : "Senthil"});
showView();
alert("Updated " + rec + " records");
});
$.get("#upd2").on("click", function() {
// update a record
var rec = tab.update({ salary : 3000 }, { age : 24 });
showView();
alert("Updated " + rec + " records");
});
$.get("#del").on("click", function() {
// remove a record
var rec = tab.remove({age : 24});
showView();
alert("Deleted " + rec + " records");
})
showView();
});
Result
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|