如何使用 jquery 从网格中获取复选框选中的项目

Question

我有两个剑道 ui 网格（父网格、子网格），如果我单击网格中行中的复选框，我在父网格上有复选框列，我需要获取相应的行数据，我需要单击按钮时，请将该选定的行数据移动到另一个网格，因为我已经像这样实现了按钮 clikc ...

为此，我做了这样的事情......

    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
    $(document).ready(function ()
    {
        $('#btnMove').click(function() {

            ('#GridParent').on("click", "td", function (e) {
                var selectedTd = $(e.target).closest("td");
                var grdChkBox = selectedTd.parents('tr').find("td:first").next("td").find('input:checkbox');
                //grdChkBox.prop('checked', !grdChkBox.prop('checked'));
                if(grdChBox.Checked)
                {
                   // here I need to get the checkbox selected item row data 
                  // i dont know it is the correct way to get the item pls correct me                                                                  
                }   

            var sourcegrid =  $('#GridParent').data('kendoGrid');
            var destinationgrid =  $('#ChildGrid').data('kendoGrid');

            var checkeditem =                        
            });       
</script>
@model IEnumerable<KendoSampleMVCApp.Models.StudentDetails>
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@using (Html.BeginForm())
{ 
    @(Html.Kendo().Grid<KendoSampleMVCApp.Models.StudentDetails>()    
    .Name("GridParent")
    .Columns(columns => {
        columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' />").ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(30);
        columns.Bound(p => p.studentId).Filterable(false).Width(90);
        columns.Bound(p => p.studentName).Filterable(false).Width(90);
        columns.Bound(p => p.StudentBranch).Filterable(false).Width(90);

    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
    .HtmlAttributes(new { style = "height:250px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "StudentDtls"))
     )
  )

 <input id="btnMove" type="button" value="Move" />
  // second grid .......

我不确定选中复选框后如何获取数据

有没有人能帮忙解决这个问题... 非常感谢.....

Answer 1

在checkbox 中，从控制器端检查新grid 中的选择行绑定。希望它对你有用

查看

@{
    ViewBag.Title = "GridListView";
}
<h2>
    GridListView</h2>
<script src="~/Script/Jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="~/Script/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Script/kendo.all.min.js")" type="text/javascript"></script>
<script src="~/Script/kendo.web.min.js" type="text/javascript"></script>
<script src="~/Script/kendo.aspnetmvc.min.js" type="text/javascript"></script>
<link href="~/Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function () {

        $('#grid12').on("click", ".chkbxq", function (e) {
            var selectedTd = $(this).is(':checked');

            var rowIndex = $(this).parent().index();
            var cellIndex = $(this).parent().parent().index();
            var grid = $("#grid12").data("kendoGrid");
            var datatItem = grid.dataItem(grid.tbody.find('tr:eq(' + cellIndex + ')'));

            if (selectedTd == true) {
                sampleItem = datatItem.SampleItems;
                sampleCode = datatItem.SampleCode;
                sampledescription = datatItem.SampleDescription;

                datavalueitem = sampleItem + "--" + sampleCode + "--" + sampledescription;

                $.ajax({
                    url: '@Url.Action("NewGridView", "Test")',
                    type: "Post",
                    data: { sampleItem: sampleItem, sampleCode: sampleCode, sampledescription: sampledescription },
                    dataType: 'json',
                    success: function (result) {
                        debugger;
                        $("#mygrid").val(null);
                        var customDataList = $('#grid');
                        customDataList.empty();
                        customDataList.append(result.Data);
                        customDataList.append(result.Data);

                          $("#divasd").kendoGrid({
                        dataSource: result,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        columns: [
                       {
                            field: "SampleDescription",
                            width: 90,
                        }, {
                            field: "SampleCode",
                            width: 90,
                        }, {
                            width: 100,
                            field: "SampleItems"
                        }
                    ]
                    });

                    }
                });
            }


        });

    });
</script>
@using (Html.BeginForm("GridListView", "Test", FormMethod.Post))
{ 

    <input id="Submit1" type="button" value="SubmitValue" />
    @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
    .Name("grid12")
    .Columns(columns =>
    {
        columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox'  />").ClientTemplate("<input id='checkbox' class='chkbxq' type='checkbox' />");
        columns.Bound(p => p.SampleDescription);
        columns.Bound(p => p.SampleCode);
        columns.Bound(p => p.SampleItems);
    })
        .AutoBind(true) // here I am disabling automatic binding at page load
       .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("Read", "Test"))
     )
  )

    <br />

    <div id="divasd">
    </div>
}

控制器

   public JsonResult NewGridView(string sampleItem, string sampleCode, string sampledescription)
        {

            List<SampleModel> sampleAddList = new List<SampleModel>();
             SampleModel sampleAdd = new SampleModel();
            sampleAdd.SampleCode = sampleCode;
            sampleAdd.SampleDescription = sampledescription;
            sampleAdd.SampleItems = sampleItem;

            sampleAddList.Add(sampleAdd);
            var result = sampleAddList;  


            return Json(result, JsonRequestBehavior.AllowGet);

        }

此绑定网格来自Controller side

型号

  public class SampleModel
    {
        public bool studentclass { get; set; }
        public string SampleDescription { get; set; }
        public string SampleCode { get; set; }
        public string SampleItems { get; set; }
    }