单击 javascript 按钮中的读取 GridMVC select 行

Question

我在带有复选框的项目中有 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>

Java 脚本

 $('#btnok').click(function () {

        var items = $('.grid-mvc').val();
        alert(items);
    })

如何阅读 javascript 中的 GRIDMVC。

Answer 1

您可以使用 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())
        }
    })        
})

单击 javascript 按钮中的读取 GridMVC select 行

Read GridMVC select row in javascript button click

javascript

asp.net-mvc

asp.net-mvc-5

grid.mvc