jQuery 如何获得剑道网格行选择
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/26778465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get Kendo grid row selection
提问by peter
How to enable kendo ui grid row selection .I created a kendo grid by using html helper function accessed it via javascript and enabled row selction ,but no luck code is shown below
如何启用剑道 ui 网格行选择。我通过使用 html 辅助函数通过 javascript 访问它并启用行选择创建了一个剑道网格,但下面没有显示运气代码
@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model)
.Name("grid")
.Columns(columns =>
{
// Create a column bound to the ProductID property
columns.Bound(product => product.Name);
// Create a column bound to the ProductName property
columns.Bound(product => product.Description);
and accessed it in javascript
并在 javascript 中访问它
<script>
$(function () {
// Notice that the Name() of the grid is used to get its client-side instance
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
alert(selectedItem.ShipName);
});
</script>
回答by Andrei V
You need to add the Selectable()
configuration method. This will enable the default row selection,
您需要添加Selectable()
配置方法。这将启用默认行选择,
@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model)
.Name("grid")
.Columns(columns =>
{
// Create a column bound to the ProductID property
columns.Bound(product => product.Name);
// Create a column bound to the ProductName property
columns.Bound(product => product.Description);
})
.Selectable()
)
Notethat you are getting the selected item in the document ready
event. This means that the grid has just been initialized and it's improbable that any row had been selected. A better approach is to use the "select" event, configurable in the helper:
请注意,您正在获取document ready
事件中的选定项目。这意味着网格刚刚初始化,不可能选择任何行。更好的方法是使用“选择”事件,可在帮助程序中配置:
@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model)
.Name("grid")
.Columns(columns =>
{
// Create a column bound to the ProductID property
columns.Bound(product => product.Name);
// Create a column bound to the ProductName property
columns.Bound(product => product.Description);
})
.Selectable()
.Events(ev => ev.Change("doOnRowSelect"))
)
You then need to define the doOnRowSelect
JavaScript function:
然后您需要定义doOnRowSelect
JavaScript 函数:
function doOnRowSelect(e) {
var selectedItem = this.dataItem(this.select());
alert(selectedItem.ShipName);
}
EDIT:the method above (at least the JavaScript part) works only when the data is loaded trough AJAX. The row selection however should also work when the data is loaded from the Model
. In this care, the selected row will have the k-state-selected
class:
编辑:上述方法(至少是 JavaScript 部分)仅在通过 AJAX 加载数据时才有效。然而,当数据从Model
. 在这种情况下,所选行将具有以下k-state-selected
类:
function getSelectedItem () {
var grid = $("#grid").data("kendoGrid");
var selectedRows = $(".k-state-selected", "#grid");
if (selectedRows.length > 0) {
var selectedItem = grid.dataItem(selectedRows[0]);
alert(selectedItem.ShipName);
}
}