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