Step 1-
Open VS 2010 and add asp.net website,then add new item as a class and rename as EmployeeXref , which represents an Employee Information.
[java]
public class EmployeeXref
{
private int employeeID;
private string employeeName;
private double salary;
public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public double Salary { get; set; }
public List<EmployeeXref> GetEmployee()
{
List<EmployeeXref> empList = new List<EmployeeXref>();
empList.Add(new EmployeeXref() { EmployeeID = 1, EmployeeName = "Jack", Salary = 30000.00 });
empList.Add(new EmployeeXref() { EmployeeID = 2, EmployeeName = "John", Salary = 89800.00 });
empList.Add(new EmployeeXref() { EmployeeID = 3, EmployeeName = "Daniel", Salary = 70000.00 });
empList.Add(new EmployeeXref() { EmployeeID = 4, EmployeeName = "Rusell", Salary = 30567.40 });
empList.Add(new EmployeeXref() { EmployeeID = 5, EmployeeName = "Tony", Salary = 28000.00 });
empList.Add(new EmployeeXref() { EmployeeID = 6, EmployeeName = "jany", Salary = 37000.00 });
return empList;
}
}
[/java]
Step 2- Add a new item as Web form and rename it as EmployeeGrid.aspx. Now add a gridview control to page that has one Checkbox column and have BoundField that is bind to EmployeeXref List.
[html]
<form id="form1" runat="server">
<div id="emp">
<asp:GridView ID="EmpGid" runat="server" DataKeyNames="EmployeeID" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkEmp" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" SortExpression="EmployeeID" />
<asp:BoundField DataField="EmployeeName" HeaderText="Employee Name" SortExpression="EmployeeName" />
<asp:BoundField DataField="Salary" HeaderText="Salary" SortExpression="Salary" />
</Columns>
</asp:GridView>
<p id="tot"></p>
</div>
</form>
[/html]
Step 3- Now Bind this Gridview With EmployeeXref Class , created above.
[java]
public partial class EmployeeGrid : System.Web.UI.Page
{
List<EmployeeXref> listEmp = new List<EmployeeXref>();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
EmployeeXref emp = new EmployeeXref();
listEmp = emp.GetEmployee();
EmpGid.DataSource = listEmp;
EmpGid.DataBind();
}
}
}
[/java]
On Page Load gridview looks as below.
[javascript]
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#emp :input:checkbox').click(function () {
calculateSalary(4);
});
function calculateSalary(ColIndx) {
total = 0.00;
$("tr:has(:checkbox:checked) td:nth-child(" + ColIndx + ")").each(function () {
total = total + parseFloat($(this).text());
});
$('#tot').text("Total amount :" + total.toFixed(2));
}
});
</script>
[/javascript]
Now Lte us understand Line by Line code
I- When a checkbox is clicked we call calculateSalary(4) function . Here we pass 4 as column index of salary.
[javascript]
$('#emp :input:checkbox').click(function () {
calculateSalary(4);
});
[/javascript]
2 - Now we use selector , row that has checked checkbox and column with the specific index , here is 4 only. Once we have our selector, we use .each() to iterate over this jQuery object and add the column value to the ‘total’ variable. The parseFloat( ) parses strings into numbers.
[javascript]
function calculateSalary(ColIndx) {
total = 0.00;
$("tr:has(:checkbox:checked) td:nth-child(" + ColIndx + ")").each(function () {
total = total + parseFloat($(this).text());
});
$('#tot').text("Total amount :" + total.toFixed(2));
}
[/javascript]
Here is output:-
0 comments:
Post a Comment