如何从父网格和子网格中获取复选框元素的引用 [英] how to get the reference for checkbox element from both parent and child grids
本文介绍了如何从父网格和子网格中获取复选框元素的引用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的要求，比如我需要找到父网格行复选框，如果父网格行复选框被选中，那么我需要为该父网格行复选框将所有子网格复选框设置为 true 为此目的我已经这样做了....
I have got requirement like i need to find the parent grid row checkbox and if parent grid row checkbox is checked then i need to set all child grid checkboxes to true for that parent grid row checkbox for that purpose I have done like this....
<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>
这是我在网格中定义复选框的观点...
and this is my view where i am defining checkboxes in grid ...
查看
@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>
有人对此有帮助吗...如何找到选中的父网格行复选框以及如何获取子网格的所有复选框....
would any one pls help on this ... how to find the parent grid row checkbox checked and how to get all checkboxes for child grid ....
请看图片...我需要获取两个网格的复选框参考
pls look at the image ...i need to get the checkbox reference for both grids
更新:
<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>
推荐答案
在我的代码中，我在 header 中有 checkbox 而不是在 td 中这可以帮助您找到相应的 child grid checkbox 到，
In my code i have checkbox in header not in td but this help you to find corresponding child grid checkbox to,
<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>
网格视图
<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"))
)
)
在子网格中，在每个子checkbox 中传递unique-key.INX 是我们的 unique-key.Pass Unique-key 像这样 id='checkboxChild_#=inx#'.
In Child Grid pass unique-key in each child checkbox. INX is our unique-key.Pass Unique-key like this id='checkboxChild_#=inx#'.
这是演示链接http://jsbin.com/ivoqup/3/edit
这篇关于如何从父网格和子网格中获取复选框元素的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
