I am trying to use the Web Grid, i was able to bind the data to web grid and able to add check box select functionality to the web grid.
but in my grid one field is there called amount, when i am select check box in the web grid i have to do the sum of the amount column values similar to shopping basket.
but i am not getting the values of the webgrid.
@model IEnumerable<JsonResultTest.Models.ShoppingBasketModel>
@{
ViewBag.Title = "Index";
WebGrid grid = new WebGrid(source: Model, canPage: false, canSort: false);
}
@* Here I am going to add some css for better looks *@
<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<h2>Customer Data</h2>
@using (Html.BeginForm("Index", "Webgrid", FormMethod.Post))
{
<div>
@grid.GetHtml(
tableStyle: "gridtable",
htmlAttributes: new { id = "checkableGrid" },
columns: grid.Columns
(
//Here I am going to add checkbox column
grid.Column(
format: @<text> <input type="checkbox" value="@item.BondLodgementAmount" name="ids" id="chk_check" /> </text>,
header: "{checkall}"
),
grid.Column("BondNumber", "Bond Number"),
grid.Column("PropertyId", "Property Id"),
grid.Column("TenancyAddress", "Tenancy Address"),
//grid.Column("BondLodgementAmount", "Bond Lodgement Amount"),
grid.Column("BondLodgementAmount", header: "BondLodgementAmount", format: @<text>@String.Format("{0:0.00}", (string)(@item.BondLodgementAmount))</text>, style: "price")
)
)
</div>
<div>
</div>
<div>
<input type="submit" value="Get Selected Record" />
</div>
}
@if (ViewBag.Message != null)
{
<div>
@ViewBag.Message
</div>
}
@section Scripts{
<script>
$(document).ready(function () {
//$('#ids').click(function () {
// alert(row);
// var ischecked = this.checked;
// $('#checkableGrid').find("input:checkbox").each(function () {
// this.checked = ischecked;
// var row = $(this).closest('tr'); // get the table row
// // var links = row.find('a'); // get the 3 hyperlinks
// //var teamName = links.eq(0).text();
// //var description = links.eq(1).text();
// });
//});
// 1st replace first column header text with checkbox
$("#checkableGrid th").each(function () {
if ($.trim($(this).text().toString().toLowerCase()) === "{checkall}") {
$(this).text('');
$("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
$(this).append("<span>Select All</span>");
}
});
$("input[name='ids']").click(function () {
var totalRows = $("#checkableGrid td :checkbox").length;
var checked = $("#checkableGrid td :checkbox:checked").length;
var total = 0;
$('#grid .price').each(function () {
// total = total + parseFloat($(this)[0].innerHTML.toLocaleString());
});
$('tbody').append('<tr><td><b>Total</b></td><td><b>' + total.toFixed(2) + '</b></td></tr>');
//var favorite = [];
//favorite.push(checked.val());
//var total = 0;
// total += favorite[i] ;
/* $.each($("input[name='ids']:checked"), function () {
favorite.push($(this).val());
//total += favorite;
var total = 0;
for (var i = 0; i < favorite.length; i++) {
total += favorite[i] << 0;
$('tbody').append('<tr><td><b>Total</b></td><td><b>' + total + '</b></td></tr>');
}
});*/
// alert("My favourite sports are: " + favorite.join(", "));
if (checked == totalRows) {
$("#checkableGrid").find("input:checkbox").each(function () {
this.checked = true;
});
}
else {
$("#cbSelectAll").removeAttr("checked");
}
});
$('#cbSelectAll').click(function () {
var ischecked = this.checked;
$('#checkableGrid').find("input:checkbox").each(function () {
this.checked = ischecked;
var row = $(this).closest('tr'); // get the table row
var links = row.find('a'); // get the 3 hyperlinks
var teamName = links.eq(0).text();
var description = links.eq(1).text();
});
});
////2nd click event for header checkbox for select /deselect all
//$("#cbSelectAll").live("click", function () {
// var ischecked = this.checked;
// $('#checkableGrid').find("input:checkbox").each(function () {
// this.checked = ischecked;
// });
//});
//3rd click event for checkbox of each row
});
</script>
}
Problem :
CheckAll PhoneNumber UAN Add Price
Check 123455 ABCD NewYork 100$
Uncheck 123456 ABCD1 NewYork1 200$
Check 123457 ABCD2 NewYork2 300$
**Assume here in the above grid 1,3 rows are checked so i have to display 100$+300$=400$**
**After struggle i was able to add almost all the functionality, but i am facing the problem while adding the new row, while clicking the check box every time it is creating new row, the problem is in the below code.**
$('#grid .price').each(function () {
// total = total + parseFloat($(this)[0].innerHTML.toLocaleString());
});
$('tbody').append('<tr><td><b>Total</b></td><td><b>' + total.toFixed(2) + '</b></td></tr>');
任何正文都可以纠正我必须使用哪个函数来获取每次点击事件的总数。意味着如果我单击一个复选框，我必须从lablel中的该行获取金额值，如果我再次单击其他复选框，则应将现有值添加到新值。