Kendo Grid：列标题复选框“选中所有”，在网格所有页面上选中复选框
Posted
技术标签:
【中文标题】Kendo Grid：列标题复选框“选中所有”，在网格所有页面上选中复选框【英文标题】：Kendo Grid: Column Header Checkbox 'Check All' that checks boxes across grid all pages 【发布时间】：2015-08-12 19:53:53 【问题描述】：在 javascript 和/或 jquery 中是否有一个示例，其中有人有一个“全选”复选框来检查网格所有页面上的所有复选框？
我已经尝试了 3 天，但没有找到明确的答案。
我现在拥有的是丑陋的，并没有真正的工作......
function onRequestEnd(e)
var masterCbChecked = $("#masterCheckBox").is(':checked');
var grid = $("#grid").data("kendoGrid");
for (var i = 0; i < grid.dataSource.total(); i ++)
var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
var elementRow = grid.table.find(".cbAdvisor")[i];
if (elementRow != null)
var checked = elementRow.checked,
row = $(elementRow).closest("tr"),
dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
checkedIds[dataItem.DimAgentId] = masterCbChecked;
if (masterCbChecked)
//-select the row
elementRow.checked = true;
row.addClass("k-state-selected");
dataRow.IsSelected = true;
else
//-remove selection
elementRow.checked = false;
row.removeClass("k-state-selected");
dataRow.IsSelected = false;
function checkAll(ele)
var state = $(ele).is(':checked');
var grid = $("#grid").data("kendoGrid");
//grid.dataSource.pageSize(grid.dataSource.total());
//grid.dataSource.read();
//grid.refresh();
var currentPage = $("#grid").data("kendoGrid").dataSource.page();
checkedIds = ;
//for (var a = 0; a < modelJson.length; a ++)
// var m = modelJson[a];
// m.IsSelected = true;
//
for (var a = 1; a < 2; a ++)
var pager = grid.pager;
pager.bind('change', a);
grid.one("dataBound", function ()
this.dataSource.page(a);
);
grid.dataSource.fetch();
for (var i = 0; i < grid.dataSource.total(); i ++)
var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
var elementRow = grid.table.find(".cbAdvisor")[i];
if (elementRow != null)
var checked = elementRow.checked,
row = $(elementRow).closest("tr"),
dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
checkedIds[dataItem.DimAgentId] = state;
if (state)
//-select the row
elementRow.checked = true;
row.addClass("k-state-selected");
dataRow.IsSelected = true;
else
//-remove selection
elementRow.checked = false;
row.removeClass("k-state-selected");
dataRow.IsSelected = false;
pager.bind('change', currentPage);
grid.one("dataBound", function ()
this.dataSource.page(currentPage);
);
grid.dataSource.fetch();
//mark for paging
if (dataRow != null)
if (state)
dataRow.IsSelected = true;
else
dataRow.IsSelected = false;
;
if (!state)
checkedIds = ;
//grid.dataSource.pageSize(50);
//grid.refresh();
【问题讨论】：
【参考方案1】：我用这段代码做了一些修改：
columns.Template(@<text><input name="chkStatus" type="checkbox" class="chkFormols" /></text>)
.HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)' />").Width(50);
function checkAll(ele)
debugger;
var state = $(ele).is(':checked');
var grid = $('#grid').data('kendoGrid');
if (state == true)
$('.chkFormols').prop('checked', true);
else
$('.chkFormols').prop('checked', false);
;
【讨论】：
【参考方案2】：我解决了这个问题。
<div id="panelGridContainer" class="containerGrid">
@(html.Kendo().Grid<ReportGridModel>()
.Name("grid")
.Columns(columns =>
var m = Model.Section.DrilldownColumns[0];
columns.BoundAll(p => p.DimAgentId, m);
columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' #= IsSelected ? checked='checked':'' # class='cbAdvisor' />")
.HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>").Width(30);
columns.BoundAll(p => p.AdvisorName, m).ClientTemplate("" + "#: AdvisorName #" + "<div class='reportDetailLink ui-button ui-widget ui-button-text-only' onclick='getAdvisorDetailView(this)'>Detail</div>").Width(300);
columns.BoundAll(p => p.GoalAmount, m).ClientTemplate("" + "$#: GoalAmount.formatMoney(0, '.', ',') #" + "<div id='editIndividualGoalLink' class='reportEditLink ui-button ui-widget ui-button-text-only' onclick='openFytaIndividualGoalOverlay(this)'><i class='icon icon-pencil'></i> Edit</div><div class='editIndGoalPanel' style='display:none;'></div>").Width(200);
columns.BoundAll(p => p.RevenueAmount, m).Width(100);
columns.BoundAll(p => p.GoalProgressToDate, m).Width(75);
columns.BoundAll(p => p.RevenueChangeYoY, m).Width(75);
columns.BoundAll(p => p.BranchComposer, m).Width(200);
)
.Sortable()
.Pageable(pager => pager.PageSizes(new[] 50, 100, 500, 1000 ))
//.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Read(read => read.Action("GetReportGridData", "FytByAdvisor"))
.Events(events => events.RequestStart("onDataSourceRequestStart"))
)
.Events(events => events.DataBound("onGridDataFound").DataBound("onDataBound")))
</div>
var checkedIds = ;
//on click of the checkbox:
$('#grid').on('click', '.cbAdvisor', function()
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
if (!checked)
$('#masterCheckBox').attr('checked', false); // Unchecks it
checkedIds[dataItem.DimAgentId] = checked;
if (checked)
//-select the row
row.addClass("k-state-selected");
else
//-remove selection
row.removeClass("k-state-selected");
);
//on dataBound event restore previous selected rows:
function onDataBound(e)
var view = this.dataSource.view();
for(var i = 0; i < view.length;i++)
if(checkedIds[view[i].DimAgentId])
this.tbody.find("tr[data-uid='" + view[i].uid + "']")
.addClass("k-state-selected")
.find(".cbAdvisor")
.attr("checked","checked");
var masterCbChecked = $("#masterCheckBox").is(':checked');
var grid = $("#grid").data("kendoGrid");
//if(!masterCbChecked)
//
// checkedIds = ;
//
if(masterCbChecked)
for (var i = 0; i < grid.dataSource.total(); i ++)
var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
var elementRow = grid.table.find(".cbAdvisor")[i];
if (elementRow != null)
var checked = elementRow.checked,
row = $(elementRow).closest("tr"),
dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
if (masterCbChecked)
checkedIds[dataItem.DimAgentId] = masterCbChecked;
//-select the row
elementRow.checked = true;
row.addClass("k-state-selected");
dataRow.IsSelected = true;
else
//-remove selection
elementRow.checked = false;
row.removeClass("k-state-selected");
dataRow.IsSelected = false;
function checkAll(ele)
var state = $(ele).is(':checked');
var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize(grid.dataSource.total());
grid.dataSource.read();
grid.refresh();
checkedIds = ;
for (var i = 0; i < grid.dataSource.total(); i ++)
var dataRow = $("#grid").data("kendoGrid").dataSource.data()[i];
var elementRow = grid.table.find(".cbAdvisor")[i];
if (elementRow != null)
var checked = elementRow.checked,
row = $(elementRow).closest("tr"),
dataItem = grid.dataItem(grid.tbody.find("tr").eq(i));
if (state)
checkedIds[dataItem.DimAgentId] = state;
//-select the row
elementRow.checked = true;
row.addClass("k-state-selected");
dataRow.IsSelected = true;
else
//-remove selection
elementRow.checked = false;
row.removeClass("k-state-selected");
dataRow.IsSelected = false;
//mark for paging
if (dataRow != null)
if (state)
dataRow.IsSelected = true;
else
dataRow.IsSelected = false;
;
// set back to 50 page size
grid.dataSource.pageSize(50);
【讨论】：
【参考方案3】：试试这个代码：
set column in grid(mvc)==>
columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' name='chkbSlc_Formols' class='chkFormols' />").HeaderTemplate("<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)' name='chk[]'/>").Width(50);
function checkAll(ele)
var state = $(ele).is(':checked');
$('.chkFormols').prop('checked', state);
【讨论】：
以上是关于Kendo Grid：列标题复选框“选中所有”，在网格所有页面上选中复选框的主要内容，如果未能解决你的问题，请参考以下文章
如何“使用具有一些默认选择的多复选框过滤器在服务器端过滤 Kendo Grid 数据”