阅读 GridMVC 在 JavaScript 中选择行按钮单击



我在带有复选框的项目中有GridMVC。 单击按钮时,我需要读取选中的复选框行。 我尝试通过按钮单击从 GridMVC 读取所有数据,但不起作用。

我的代码

网 格

@using GridMvc.Html
@{
if (Model != null)
{
<div class="table-responsive">
@Html.Grid(Model).Columns(columns =>
{
columns.Add()
.Encoded(false)
.Sanitized(false)
.SetWidth(10)
.RenderValueAs(o => Html.CheckBox("checked", o.select));
columns.Add(c => c.product_code).Titled(Resources.Resource.product_id);
columns.Add(c => c.product_name).Titled(Resources.Resource.product_name);
columns.Add(c => c.unit).Titled(Resources.Resource.unit);
}).WithPaging(10).Sortable(true).EmptyText("No data found").Named("GridSearch")
</div>
}
else
{
<label>No Data Found</label>
}
}

视图

<div id="newgrid" class="col-sm-12 table-responsive" style="width:100%;height:300px;margin-top:3%;padding-left:0px;padding-right:0px;">
@{Html.Partial("ResultGrid", new List<SCM_MVC.Models.Search>()); }
</div>
<div class="form-actions" style="margin-top:2%;padding-left:2%;">
<button type="button" class="btn btn-success btn-sm" id="btnok" style="width:100px"><i class="fas fa-check"></i> OK </button>
</div>

爪哇脚本

$('#btnok').click(function () {
var items = $('.grid-mvc').val();
alert(items);
})

如何在javascript中阅读GRIDMVC。

您可以使用HTML 元素查找行。

网 格

@Html.Grid(Model).Columns(columns =>
{
columns.Add()
.Encoded(false)
.Sanitized(false)
.SetWidth(10)
.RenderValueAs(o => new HtmlString
(
"<input id='hiddenValue' type='hidden' class='check' value='" + o.Id + "'/>"+
"<input type='checkbox' class='check' value=" +o.select+"/>"
));
columns.Add(c => c.FirstName).Titled("First Name");
columns.Add(c => c.LastName).Titled("Last Name");
}).WithPaging(10).Sortable(true).EmptyText("No data found").Named("GridSearch")

视图

<div id="newgrid" class="col-sm-12 table-responsive" style="width:100%;height:300px;margin-top:3%;padding-left:0px;padding-right:0px;">
@Html.Partial("ResultGrid", Model)
</div>

JavaScript

$('#btnok').click(function () {        
//for find all row
var items = $(".grid-mvc").find(".grid-table > tbody").children();
$.each(items, function (i, row) {            
if ($(row).find('.check').is(':checked')) {
//get text of firstname column using inner text.
alert($(row).children()[1].innerText);
//get text of lastname column using inner text.
alert($(row).children()[2].innerText);
//using each loop get data with checked row.
alert($(row).find('#hiddenValue').val())
}
})        
})

最新更新