如何从双方父母和孩子对电网checkbox元素参考 [英] how to get the reference for checkbox element from both parent and child grids
本文介绍了如何从双方父母和孩子对电网checkbox元素参考的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有要求，像我需要找到父网格行复选框，如果家长网格行复选框被选中，那么我需要设置所有子网格复选框为true，该父网格行复选框为此我已经这样做了....
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃btnMove'）。点击（函数（）{
VAR parentgrid = $（'＃GridParent'）的数据（kendoGrid'）。
VAR childGrid = $（'＃GridParent'）最接近（K-电网）的数据（kendoGrid）。;
变种数= $（'＃Gridparent'）数据（kendoGrid）dataSource.total（）。
警报（计数）;
对于（i = 0; I＆LT;计数;我++）
{
VAR =器isChecked parentgrid.tbody.find（'TR：EQ（'+ I +'）'）找到（'TD'）找到（'chkbxq。'）是（'：检查'）。;
警报（器isChecked）; //这里我需要得到家长网格行复选框的财产，我没有得到这个警报....
如果（==器isChecked真）
{
。VAR allchildgridchkboxes = childGrid.tbody.find（'TD'）找到（'chkbx'）;
警报（allchildgridchkboxes）; //我没有得到这个警报
//这里我需要设置所有的复选框选中属性设置为true
} }
}）;
}）;
＆LT; / SCRIPT＆GT;
这是我的看法我在哪里定义网格复选框...
查看
@using（Html.BeginForm（））
{
@（Html.Kendo（）网格和LT; Topco.TopMapp.MVC.Models.CostPageSearch＆GT;（）
。名称（Gridparent）
.Columns（列=＆GT;
{
columns.Template（@＆LT;文本＆GT;＆LT; /文本＆GT;）。ClientTemplate（＆LT;输入ID =复选框的onclick ='grdChkBoxClick（本）;阶级='chkbxq类型=复选框/＆gt;中）.WIDTH（30）;
columns.Bound（E =＆GT; e.CostPage）.WIDTH（100）;
columns.Bound（E =＆GT; e.Description）.WIDTH（100）;
columns.Bound（E =＆GT; e.VendorName）.WIDTH（100）;
columns.Bound（E =＆GT; e.BillTypeDirect）.WIDTH（100）;
columns.Bound（E =＆GT; e.BillTypeWarehouse）.WIDTH（100）;
columns.Bound（E =＆GT; e.VendorName）.WIDTH（100）;
}）
.ClientDetailTemplateId（客户端模板）
.HtmlAttributes（新{风格=高度：480像素;}）
.DataSource（数据源=＆GT;数据源
阿贾克斯（）
.PageSize（6）
.Read（读=＆GT; read.Action（HierarchyBinding_Employees，CostPageDisplay））
）
.Events（事件=＆GT; events.DataBound（数据绑定））
）
＆LT;脚本ID =客户端模板TYPE =文/剑道-TMPL＆GT;
@（Html.Kendo（）网格和LT; Topco.TopMapp.MVC.Models.ItemsDescriptionModel＆GT;（）
。名称（网格_＃= CostPage＃）
.Columns（列=＆GT;
{
columns.Template（@＆LT;文本＆GT;＆LT; /文本＆GT;）。ClientTemplate（＆LT;输入ID =复选框的onclick ='grdChkBoxClick（本）;阶级='chkbxq类型=复选框/＆gt;中）.WIDTH（30）;
columns.Bound（O =＆GT; o.ItemId）.WIDTH（100）;
columns.Bound（O =＆GT; o.ItemDescription）.WIDTH（100）;
columns.Bound（O =＆GT; o.Brand code）.WIDTH（100）;
columns.Bound（O =＆GT; o.PackSize）.WIDTH（100）;
}）
.DataSource（数据源=＆GT;数据源
阿贾克斯（）
.PageSize（5）
.Read（读=＆GT; read.Action（HierarchyBinding_Orders，CostPageDisplay，新{雇员=＃= CostPage＃}））
）
.ToClientTemplate（）
）
＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
数据绑定功能（）{
this.expandRow（this.tbody.find（tr.k主行）第一（））;
//警报（'1'）;
}
＆LT; / SCRIPT＆GT;
将在这任何一个请帮助...如何找到父网格行复选框选中，以及如何让儿童网格中的所有复选框....
请看看图片...我需要得到两个网格复选框参照
更新：
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃btnMove'）。点击（函数（）{
调试器;
警报（按钮，点击）;
VAR parentgrid = $（'＃GridParent'）的数据（kendoGrid'）。
变种数= $（'＃Gridparent'）的数据（kendoGrid'）dataSource.total（）。
警报（计数）;
。VAR ischeckedone = parentgrid.tbody.find（'TD'）找到（'。chkbxq'）是（'：检查'）;
警报（ischeckedone）;
VAR行= parentgrid.table.find（'＆GT;＆TBODY GT; TR'）。找到（'tr.k状态选择'）dataSource.total（）。
警报（行）;
// VAR SEL =行[0] .cells [1] .innerHTML;
//警报（SEL）;
// VAR gridchild = parentgrid.parents（[数据角色=网]）的数据（kendoGrid）;
// VAR COUNT = parentgrid.parents（[数据角色=网]）的数据（kendoGrid）dataSource.total（）。
// VAR childGrid = $（'＃GridParent'）最接近（K-电网）的数据（kendoGrid）。;
// VAR childgrid = parentgrid.detailCell.find（'＆GT; .K-网格）。数据（）kendoGrid。
。//变种anothercount = $（'＃GridParent'）最接近（K-电网）的数据（kendoGrid）dataSource.total（）;
//警报（anothercount）;
//变种childrows = parentgrid.detailCell.find（'＆GT; .K栅'）。数据（）kendoGrid.dataSource.total（）;
//警报（childrows）;
。VAR chekbox = parentgrid.table.find（'TR'）找到（'TD：首先输入'）找到（'。chkbxq'）是（'：检查'）;
警报（chekbox）;
对于（i = 0; I＆LT;计数;我++）{
// VAR =器isChecked parentgrid.tbody.find（'TR：EQ（'+ I +'）'）找到（'TD'）找到（'chkbxq。'）是（'：检查'）。;
。VAR chekbox = parentgrid.table.find（'TR'）找到（'TD：首先输入'）找到（'。chkbxq'）是（'：检查'）;
警报（chekbox）; // din't工作
警报（器isChecked）; // din't工作
如果（==器isChecked真）
{
。VAR allchildgridchkboxes = childGrid.tbody.find（'TD'）找到（'chkbx'）;
警报（allchildgridchkboxes）; // din't工作
}
}
}）;
}）;
＆LT; / SCRIPT＆GT;
解决方案
在我的codeI有复选框在头不是 D 但是这帮助您找到相应的子格 复选框来，
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃grid12'）。在（点击，.chkbxq功能（E）{
变量$此= $（本）;
VAR选择= $ this.is（'：检查'）;
VAR ID = $ this.attr（'身份证'）;
变种值= id.replace（'checkbox_'，''）;
VAR的rowIndex = $ this.parent（）指数（）。
。VAR cellIndex = $ this.parent（）父（）指数（）;
VAR电网= $（＃grid12）的数据（kendoGrid）;
VAR datatItem = grid.dataItem（grid.tbody.find（'TR：EQ（'+ cellIndex +'）'））; 。VAR childgridid = $（'K-细节排'）找到（'td.k细节细胞'）找到（'div.k网'）ATTR（ID）。
变种valurchildgrid = childgridid.replace（'grid_'，''）;
VAR childrowscount = $（'DIV [ID * =grid_'+ valurchildgrid +']'）数据（kendoGrid）dataSource.total（）。 VAR检查= $('.k-detail-row').find('td.k-detail-cell').find('div.k-grid').find('table').find('tbody').find('input[id*=\"checkboxChild_' +价值+']'）。每个（函数（）{
如果（选择==真）{
$（本）.attr（'检查'，'检查'）;
}
其他{
$（本）.attr（'检查'，FALSE）;
}
}）; }）;
}）;
＆LT; / SCRIPT＆GT;
网格视图
＆LT;脚本ID =客户端模板TYPE =文/剑道-TMPL＆GT; @（Html.Kendo（）网格和LT; TwoModelInSinglePageModel.SampleGridModel＆GT;（）
。名称（网格_＃= CostPage＃）
.Columns（列=＆GT;
{
columns.Template（@＆LT;文本＆GT;＆LT; /文本＆GT;）。ClientTemplate（＆LT;输入ID ='checkboxChild _＃= INX＃''类='checkchild类型=复选框/＆gt;中）。宽度（ 30）;
columns.Bound（O =＆GT; o.SampleDescriptionGrid）.WIDTH（100）;
columns.Bound（O =＆GT; o.Sample codeGRID）.WIDTH（100）;
columns.Bound（O =＆GT; o.SampleItemsGrid）.WIDTH（100）;
}）
.DataSource（数据源=＆GT;数据源
阿贾克斯（）
.PageSize（5）
.Read（读=＆GT; read.Action（ReadGrid，测试））
）
.ToClientTemplate（）
）
＆LT; / SCRIPT＆GT;
@using（Html.BeginForm（GridListView，测试，FormMethod.Post））
{@ *＆LT;输入ID =Submit1类型=按钮值=SubmitValue/＆GT; * @
＆LT;输入ID =btnSubmit按钮类型=按钮值=SubmitValue/＆GT;
@（Html.Kendo（）网格和LT; TwoModelInSinglePageModel.SampleModel＆GT;（）
。名称（grid12）
.Columns（列=＆GT;
{
columns.Bound（P =＆GT; p.studentclass）.HeaderTemplate（＆LT;输入ID ='全选'类='chkbxq类型=复选框/>\").ClientTemplate(\"<input ID ='checkbox_ ＃= INX＃类='chkbxq类型=复选框/＆gt;中）;
columns.Bound（p值=＆GT; p.SampleDescription）;
columns.Bound（P =＆GT; p.Sample code）;
columns.Bound（p值=＆GT; p.SampleItems）;
}）
.ClientDetailTemplateId（客户端模板）
.AutoBind（真）//我在这里禁用自动在页面加载绑定
.DataSource（数据源=＆GT;数据源
阿贾克斯（）
.Read（读=＆GT; read.Action（读，测试））
）
）
在儿童电网通唯一键中的每个子复选框。 INX 是我们唯一键 .Pass 唯一键像这样的 ID ='_ checkboxChild＃= INX＃。
这是演示链接 http://jsbin.com/ivoqup/3/edit
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 ...
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>
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
UPDATE :
<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>
解决方案
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>
Grid View
<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"))
)
)
In Child Grid pass unique-key in each child checkbox. INX is our unique-key.Pass Unique-key like this id='checkboxChild_#=inx#'.
This is demo link http://jsbin.com/ivoqup/3/edit
这篇关于如何从双方父母和孩子对电网checkbox元素参考的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
