我正在使用WebGrid实施CRUD操作。我点击了链接CRUD_Webgrid。
下面是WebGrid填充的代码
@{
WebGrid grid = new WebGrid(Model, ajaxUpdateContainerId: "ajaxgrid",
rowsPerPage: 30);
}
<div id="divmsg" style="color: green; font-weight: bold"></div>
<a href="#" class="add">Add New</a>
<br />
<br />
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
htmlAttributes: new { id = "grid" },
fillEmptyRows: false,
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] {
grid.Column(header: "Date",format: @<span> <span id="[email protected]">@item.Date.ToString("yyyy-MM-dd")</span> @Html.TextBox("Name_"+(int)item.ID,(string)item.Date.ToString("yyyy-MM-dd"),new{@style="display:none", @class="date-picker"})</span>),
grid.Column(header: "Team",format: @<span> <span id="[email protected]">@item.Team</span> @Html.TextBox("Team_"+(int)item.ID,(string)item.Team,new{@style="display:none"})</span>),
grid.Column(header: "Name",format: @<span> <span id="[email protected]">@item.Name</span> @Html.TextBox("Name_"+(int)item.ID,(string)item.Name,new{@style="display:none"})</span>),
grid.Column(header: "Emp ID",format: @<span> <span id="[email protected]">@item.Emp_ID</span> @Html.TextBox("Emp_ID_"+(int)item.ID,(int?)item.Emp_ID,new{@style="display:none"})</span>),
grid.Column(header: "Voucher Count",format: @<span> <span id="[email protected]">@item.Voucher_count</span> @Html.TextBox("Voucher_Count_"+(int)item.ID,(int?)item.Voucher_count,new{@style="display:none"})</span>),
grid.Column(header: "INC Created",format: @<span> <span id="[email protected]">@item.INC_Created</span> @Html.TextBox("INC_created_"+(int)item.ID,(int?)item.INC_Created,new{@style="display:none"})</span>),
grid.Column(header: "INC Updated",format: @<span> <span id="[email protected]">@item.INC_Updated</span> @Html.TextBox("INC_Updated_"+(int)item.ID,(int?)item.INC_Updated,new{@style="display:none"})</span>),
grid.Column(header: "INC_Closed",format: @<span> <span id="[email protected]">@item.INC_Closed</span> @Html.TextBox("INC_Closed_"+(int)item.ID,(int?)item.INC_Closed,new{@style="display:none"})</span>),
grid.Column(header: "Planned Leave",format: @<span> <span id="[email protected]">@item.PlannedLeave</span> @Html.TextBox("PlannedLeave_"+(int)item.ID,(int?)item.PlannedLeave,new{@style="display:none"})</span>),
grid.Column(header: "Unplanned Leave",format: @<span> <span id="[email protected]">@item.UnplannedLeave</span> @Html.TextBox("UnplannedLeave_"+(int)item.ID,(int?)item.UnplannedLeave,new{@style="display:none"})</span>),
grid.Column(header: "Emergency Leave",format: @<span> <span id="[email protected]">@item.EmergencyLeave</span> @Html.TextBox("EmergencyLeave_"+(int)item.ID,(int?)item.EmergencyLeave,new{@style="display:none"})</span>),
grid.Column(header: "Available",format: @<span> <span id="[email protected]">@item.Available</span> @Html.TextBox("Available_"+(int)item.ID,(int?)item.Available,new{@style="display:none"})</span>),
grid.Column(header: "Error Critical",format: @<span> <span id="[email protected]">@item.Error_Critical</span> @Html.TextBox("Error_Critical_"+(int)item.ID,(int?)item.Error_Critical,new{@style="display:none"})</span>),
grid.Column(header: "Error Significant",format: @<span> <span id="[email protected]">@item.Error_Significant</span> @Html.TextBox("Error_Significant_"+(int)item.ID,(int?)item.Error_Significant,new{@style="display:none"})</span>),
grid.Column(header: "Error Standard",format: @<span> <span id="[email protected]">@item.Error_Standard</span> @Html.TextBox("Error_Standard_"+(int)item.ID,(int?)item.Error_Standard,new{@style="display:none"})</span>),
grid.Column(header: "Action",format:@<text> <a href="#" id="[email protected]" class="edit">Edit</a><a href="#" id="[email protected]" style="display:none" class="update">Update</a><a href="#" id="[email protected]" style="display:none" class="cancel">Cancel</a><a href="#" id="[email protected]" class="delete">Delete</a></text>)
})
单击添加新链接将新行添加到WebGrid，下面是代码
$(".add").on("click", function () {
var existrow = $('.save').length;
alert("existrow: " + existrow);
if (existrow == 0) {
var index = $("#grid tbody tr").length + 1;
var Name = "Name_" + index;
var Date = "Date_" + index;
var Team = "Team_" + index;
var Emp_ID = "Emp_ID_" + index;
var Voucher_Count = "Voucher_Count_" + index;
var INC_Created = "INC_Created_" + index;
var INC_Updated = "INC_Updated_" + index;
var INC_Closed = "INC_Closed_" + index;
var PlannedLeave = "PlannedLeave_" + index;
var UnplannedLeave = "UnplannedLeave_" + index;
var EmergencyLeave = "EmergencyLeave_" + index;
var Available = "Available_" + index;
var Error_Critical = "Error_Critical_" + index;
var Error_Significant = "Error_Significant_" + index;
var Error_Standard = "Error_Standard_" + index;
var Save = "Save_" + index;
var Cancel = "Cancel_" + index;
var tr = '<tr class="webgrid-row-style"><td class="date-picker"><span> <input id="' + Date + '" type="text" class="date-picker"/></span></td>' +
'<td><span> <input id="' + Team + '" type="text" /></span></td>' +
'<td><span> <input id="' + Name + '" type="text" /></span></td>' +
'<td><span> <input id="' + Emp_ID + '" type="text" /></span></td>' +
'<td><span> <input id="' + Voucher_Count + '" type="text" /></span></td>' +
'<td><span> <input id="' + INC_Created + '" type="text" /></span></td>' +
'<td><span> <input id="' + INC_Updated + '" type="text" /></span></td>' +
'<td><span> <input id="' + INC_Closed + '" type="text" /></span></td>' +
'<td><span> <input id="' + PlannedLeave + '" type="text" /></span></td>' +
'<td><span> <input id="' + UnplannedLeave + '" type="text" /></span></td>' +
'<td><span> <input id="' + EmergencyLeave + '" type="text" /></span></td>' +
'<td><span> <input id="' + Available + '" type="text" /></span></td>' +
'<td><span> <input id="' + Error_Critical + '" type="text" /></span></td>' +
'<td><span> <input id="' + Error_Significant + '" type="text" /></span></td>' +
'<td><span> <input id="' + Error_Standard + '" type="text" /></span></td>' +
'<td> <a href="#" id="' + Save + '" class="save">Save</a><a href="#" id="' + Cancel + '" class="icancel">Cancel</a></td>' +
'</tr>';
$("#grid tbody").append(tr);
}
else {
alert('First Save your previous record !!');
}
});
单击“保存”链接，使用以下代码将数据插入数据库
$(".save").on("click", function () {
alert("save clicked!!");
var id = $("#grid tbody tr").length;
alert("id: " + id);
var Name = $("#Name_" + id).val();
var Date = $("#Date_" + id).val();
var Team = $("#Team_" + id).val();
if (id != "") {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: '@Url.Action("SaveData", "source_individual_data")',
data: { "Date": Date, "Team": Team, "Name": Name },
dataType: "json",
beforeSend: function () { },
success: function (data) {
if (data.result == true) {
$("#divmsg").html("Record has been saved successfully !!");
setTimeout(function () { window.location.replace("WebGridCRUD"); }, 2000);
}
else {
alert('There is some error');
}
}
});
}
});
问题：当我单击动态添加的行上的“保存”链接时，它不会$(".save").on("click", function () {在上面触发，也没有错误。我尝试放置相同的“保存”链接
<a href="#" id="' + Save + '" class="save">Save</a>
在grid.column（“ Actions”）中，然后开始工作。不知道是什么问题。请帮忙。
当您使用以下语法时
$(".save").on("click", function () {
...
...
});
该click事件处理程序将只与元素工作class="save"时呈现页面存在，但它不会与动态添加元素的工作class="save"。
添加新行时，需要使用事件委托将click事件处理程序附加到动态添加的保存链接上。由于您在grid.GetHtml语法中有这个
@grid.GetHtml(
...
...
htmlAttributes: new { id = "grid" }
生成的<table>将具有id="grid"属性，因此您可以将其grid用作保存链接的容器的ID。从此处更改click事件处理程序语法
$(".save").on("click", function () {
...
...
});
对此
$('#grid').on('click','.save', function() {
...
...
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句