Test no.3,4: Extending String and jQuery based techniques for creating DOM elements for adding more functionality
Please read
Part no.1 and
Part no.2 and
Part no.3 before reading this Part no.4
I will try to add a function in both techniques. This function will be called whenever a row will be bounded to an instance of array object. This will be helpfull in doing many operations but i will try to change the boolean value into a check box. Then i will call a function onclick event of checkbox for simulation.
Test no.3: Extendibility on data bounded with tr in test no.1
function Row(rowData)
{
var tr = "<tr>";
for (var i in rowData)
{
tr += "<td>" + rowData[i] + "</td>";
}
tr += "</tr>";
if (typeof OnRow_Bounded == 'function')
{
tr=OnRow_Bounded(rowData, tr);
}
return tr;
}
function OnRow_Bounded(rowData,row)
{
if (rowData["isActive"] == true)
{
row = row.replace("true", "<input type='checkbox' checked='checked' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");
}
else
{
row = row.replace("false", "<input type='checkbox' onClick='EmployeeStatus_Change(" + rowData.sr + ",\"" + rowData.FirstName + "\");' />");
}
return row;
}
function EmployeeStatus_Change(sr,firstName)
{
confirm('Do you want to change the ' + firstName + ' status?');
}
Following picture shows the addition of checkbox
Test no.4: Extendibility on data bounded with tr in test no.2
function Row(rowData)
{
var tr = $("<tr></tr>");
for (var i in rowData)
{
tr.append($("<td></td>").text(rowData[i]));
}
if (typeof OnRow_Bounded == 'function')
{
tr = OnRow_Bounded(rowData, tr);
}
return tr;
}
function OnRow_Bounded(rowData, row)
{
var status_checkbox = $("<input type='checkbox'/>").attr('checked', rowData["isActive"]).bind('click', rowData, EmployeeStatus_Change);
$("td:contains(" + rowData["isActive"] + ")", row).text('').append(status_checkbox);
return row;
}
function EmployeeStatus_Change(event)
{
var rowData=event.data;
confirm('Do you want to change the ' + rowData.FirstName + ' status?');
}
and following picture shows the extended result
Continue to Part no.5
No comments:
Post a Comment