javascript - 如何从父网格和子网格中获取复选框元素的引用

Question

我有这样的要求，比如我需要找到父网格行复选框，如果父网格行复选框被选中，那么我需要为该父网格行复选框将所有子网格复选框设置为 true 为此，我已经这样做了....

 <script type="text/javascript">
    $(document).ready(function () {
        $('#btnMove').click(function () {                                        
        var parentgrid = $('#GridParent').data('kendoGrid');  
        var childGrid = $('#GridParent').closest(".k-grid").data("kendoGrid");               
        var Count = $('#Gridparent').data("kendoGrid").dataSource.total();
        alert(Count);
      for (i = 0; i < Count; i++) 
     {
          var isChecked = parentgrid.tbody.find('tr:eq(' + i + ')').find('td').find('.chkbxq').is(':checked');
          alert(isChecked); // here i need to get the property of parent grid row checkbox and I am not getting this alert....                  
          if (isChecked == true)
          {
             var allchildgridchkboxes = childGrid.tbody.find('td').find('chkbx');
             alert(allchildgridchkboxes); // i am not getting this alert     
             // here i need to set the all checkboxes checked property to true
          }

     }     
   });
 });
</script>

这是我在网格中定义复选框的 View ...

查看

@using (Html.BeginForm())
{ 
   @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.CostPageSearch>()
        .Name("Gridparent")
        .Columns(columns =>
        {
            columns.Template(@<text></text>).ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this);' class='chkbxq' type='checkbox' />").Width(30);
            columns.Bound(e => e.CostPage).Width(100);
            columns.Bound(e => e.Description).Width(100);
            columns.Bound(e => e.VendorName).Width(100);
            columns.Bound(e => e.BillTypeDirect).Width(100);
            columns.Bound(e => e.BillTypeWarehouse).Width(100);
            columns.Bound(e => e.VendorName).Width(100);    
        })
        .ClientDetailTemplateId("client-template")
        .HtmlAttributes(new { style = "height:480px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_Employees", "CostPageDisplay"))
        )
        .Events(events => events.DataBound("dataBound"))
)
    <script id="client-template" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.ItemsDescriptionModel>()
            .Name("grid_#=CostPage#")
            .Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); 'class='chkbxq' type='checkbox'/>").Width(30);
                columns.Bound(o => o.ItemId).Width(100);
                columns.Bound(o => o.ItemDescription).Width(100);
                columns.Bound(o => o.BrandCode).Width(100);
                columns.Bound(o => o.PackSize).Width(100);
            })
           .DataSource(dataSource => dataSource
               .Ajax()
               .PageSize(5)
               .Read(read => read.Action("HierarchyBinding_Orders", "CostPageDisplay" , new { employeeID = "#=CostPage#" }))
           )
           .ToClientTemplate()
   )
    </script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
        //alert('1');
    }
</script>

请问有没有人帮忙...如何找到选中的父网格行复选框以及如何获取子网格的所有复选框....

请看图片...我需要获取两个网格的复选框引用

更新:

  <script type="text/javascript">
    $(document).ready(function () {
        $('#btnMove').click(function () {
            debugger;
            alert("button clicked");
            var parentgrid = $('#GridParent').data('kendoGrid');       
            var count = $('#Gridparent').data('kendoGrid').dataSource.total();
            alert(count);
            var ischeckedone = parentgrid.tbody.find('td').find('.chkbxq').is(':checked');
            alert(ischeckedone);
            var rows = parentgrid.table.find('>tbody>tr').find('tr.k-state-selected').dataSource.total();
            alert(rows);
            //var sel = rows[0].cells[1].innerHTML;
            //alert(sel);        
            //var gridchild = parentgrid.parents("[data-role=grid]").data("kendoGrid");
            //var COUNT = parentgrid.parents("[data-role=grid]").data("kendoGrid").dataSource.total();
            //var childGrid = $('#GridParent').closest(".k-grid").data("kendoGrid");
            //var childgrid = parentgrid.detailCell.find('>.k-grid').data().kendoGrid;                
            //var anothercount = $('#GridParent').closest(".k-grid").data("kendoGrid").dataSource.total();
            //alert(anothercount);
           // var childrows = parentgrid.detailCell.find('>.k-grid').data().kendoGrid.dataSource.total();
           // alert(childrows);
            var chekbox = parentgrid.table.find('tr').find('td:first input').find('.chkbxq').is(':checked');
            alert(chekbox);
            for (i = 0; i < Count; i++) {
               // var isChecked = parentgrid.tbody.find('tr:eq(' + i + ')').find('td').find('.chkbxq').is(':checked');
                var chekbox = parentgrid.table.find('tr').find('td:first input').find('.chkbxq').is(':checked');
                alert(chekbox);// din't worked
                alert(isChecked);// din't worked
                if (isChecked == true)
                {
                    var allchildgridchkboxes = childGrid.tbody.find('td').find('chkbx');
                    alert(allchildgridchkboxes); // din't worked
                }              
            }     
        });
    });
</script>

Answer 1

在我的代码中，我在 header 中有 checkbox 而不是在 td 中，但这可以帮助您找到相应的 child grid checkbox 到,

<script type="text/javascript">
    $(document).ready(function () {
          $('#grid12').on("click", ".chkbxq", function (e) {
        var $this = $(this);
        var selected = $this.is(':checked');
        var id = $this.attr('id');
        var value = id.replace('checkbox_', '');
        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 + ')'));

         var childgridid = $('.k-detail-row').find('td.k-detail-cell').find('div.k-grid').attr('id');
          var valurchildgrid = childgridid.replace('grid_', '');
          var childrowscount = $('div[id*="grid_' + valurchildgrid + '"]').data("kendoGrid").dataSource.total();

        var check = $('.k-detail-row').find('td.k-detail-cell').find('div.k-grid').find('table').find('tbody').find('input[id*="checkboxChild_' + value + '"]').each(function () {
            if (selected == true) {
                $(this).attr('checked', 'checked');
            }
            else {
                $(this).attr('checked', false);
            }
        });        



    });
});
</script>

GridView

<script id="client-template" type="text/kendo-tmpl">

         @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleGridModel>()
                    .Name(" grid_#=CostPage#")
            .Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate("<input id='checkboxChild_#=inx#' 'class='checkchild' type='checkbox'/>").Width(30);
                columns.Bound(o => o.SampleDescriptionGrid).Width(100);
                columns.Bound(o => o.SampleCodeGrid).Width(100);
                columns.Bound(o => o.SampleItemsGrid).Width(100);
            })
           .DataSource(dataSource => dataSource
               .Ajax()
               .PageSize(5)
                       .Read(read => read.Action("ReadGrid", "Test"))
           )
           .ToClientTemplate()
   )
</script>
@using (Html.BeginForm("GridListView", "Test", FormMethod.Post))
{ 

@*<input id="Submit1" type="button" value="SubmitValue" />*@
    <input id="btnsubmit" 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_#=inx#' class='chkbxq' type='checkbox' />");
        columns.Bound(p => p.SampleDescription);
        columns.Bound(p => p.SampleCode);
        columns.Bound(p => p.SampleItems);
    })
        .ClientDetailTemplateId("client-template")
        .AutoBind(true) // here I am disabling automatic binding at page load
       .DataSource(dataSource => dataSource
        .Ajax()
            .Read(read => read.Action("Read", "Test"))
     )
  )

在 Child Grid 中，在每个子 checkbox 中传递 unique-key。 INX 是我们的unique-key。像这样传递Unique-key id='checkboxChild_#=inx#' .

这是演示链接 http://jsbin.com/ivoqup/3/edit