Kendo UI Grid:选择单个单元格，取回DataItem，防止特定单元格被选中? [英] Kendo UI Grid: Select single cell, get back DataItem, and prevent specific cells from being selected?

问题描述

我有一个显示一组数据的 Kendo UI 网格，我需要能够选择特定的单元格(特定列中的单元格)，并在选择后返回所选单元格所在行的 DataItem，以及单击的那个 DataItem 的属性.我不知道这是否可行，但我已经研究了一整天并得出结论，我需要一些帮助.

这是我的 grid 和 dataBound 函数，它当前为我提供了 DataItem，但就是这样:

 var hhGrid = hhDiv.kendoGrid({数据来源:住房，可滚动:假，可排序:真实，可选:单元格"，列: [{ field: "Start", title: "Start", format: "{0:MM/dd/yyyy}", type: "date" },{ field: "Stop", title: "Stop", format: "{0:MM/dd/yyyy}", type: "date" },{字段:设施"}，{字段:区域"}，{字段:Pod"}，{字段:单元格"}，{ 字段:评论"}]}).data('kendoGrid');hhGrid.bind('change', grid_change);函数 grid_change(e) {var selectedCells = this.select();var dataItem = this.dataItem(selectedCells[0].parentNode);}

首先，有没有办法关闭"网格定义中特定列的选择?我找不到任何关于这样做的东西.我只希望用户能够在区域"、Pod"和单元"列中选择单元格.如果他们单击其他列，则不会发生任何事情.此外，当他们单击那些选定的单元格时，我想获取单元格所在行的 DataItem(我目前可以使用该 grid_change 方法来完成)，以及选择的列或属性被选中的数据项.

因此，例如，如果用户单击Pod"单元格，我想知道它是被单击的 Pod 单元格，以及该单元格所在行的其他数据.似乎所有的数据在那里，所以它不应该这么困难，但我真的很难找到实现这一目标所需的数据.

感谢您的帮助！

解决方案

获取数据项为:

//获取选中的单元格var selected = this.select();//获取单元格所属的行.var row = this.select().closest("tr");//获取该单元格对应的数据项var item = grid.dataItem(row);

要获取列名，您可以这样做:

//获取单元格索引(列号)var idx = selected.index();//从 Grid 列定义中获取列名var col = this.options.columns[idx].field;

获取与列关联的字段的另一种方法是:

//从Grid列标题数据中获取列名var col = $("th", this.thead).eq(idx).data("field");

优点是列是可排序的，无论如何都可以使用.为了清除您不想要的列的选择，只需调用 clearSelection().

if (col !== 'Area' && col !== 'Pod' && col !== 'Cell') {this.clearSelection();}

在此处查看示例:http://jsfiddle.net/OnaBai/m5J9J/1/ 和此处:http://jsfiddle.net/OnaBai/m5J9J/2/(使用列标题获取列名)>

I've got a Kendo UI Grid displaying a set of data and I need to be able to select specific cells (cells in specific columns), and when selected, return the DataItem for the row the selected cell is in, and the property of that DataItem that was clicked on. I don't know if this is possible, but I've been working on it all day and have concluded that I need some help.

Here's my grid and dataBound function, which currently gets me the DataItem, but that's it:

    var hhGrid = hhDiv.kendoGrid({
        dataSource: housing,
        scrollable: false,
        sortable: true,
        selectable: 'cell',
        columns: [
            { field: "Start", title: "Start", format: "{0:MM/dd/yyyy}", type: "date" },
            { field: "Stop", title: "Stop", format: "{0:MM/dd/yyyy}", type: "date" },
            { field: "Facility" },
            { field: "Area" },
            { field: "Pod" },
            { field: "Cell" },
            { field: "Comment" }
        ]
    }).data('kendoGrid');

    hhGrid.bind('change', grid_change);

function grid_change(e) {
    var selectedCells = this.select();
    var dataItem = this.dataItem(selectedCells[0].parentNode);
}

So first of all, is there a way to 'turn off' selection of specific columns in the grid definition? I can't find anything on doing this. I only want users to be able to select cells in the 'Area', 'Pod' and 'Cell' columns. If they click the other columns nothing should happen. Also, when they do click on those selected cells, I want to get the DataItem for the row the cell is in (which I currently can do using that grid_change method), as well as the column that was selected, or the property in the DataItem that was selected.

So, for example, if the user clicks a 'Pod' cell, I want to know that it was the pod cell that was clicked, and the other data for the row the cell is in. It seems that all of the data is there, so it shouldn't be this difficult, but I'm really struggling to find the data needed to accomplish this.

Thanks for your help!

解决方案

Getting the data item is:

// Get selected cell
var selected = this.select();
// Get the row that the cell belongs to.
var row = this.select().closest("tr");
// Get the data item corresponding to this cell
var item = grid.dataItem(row);

For getting the column name you can get it doing:

// Get cell index (column number)
var idx = selected.index();
// Get column name from Grid column definition
var col = this.options.columns[idx].field;

An alternative method for getting the field associated to a columns is:

// Get column name from Grid column header data
var col = $("th", this.thead).eq(idx).data("field");       

The advantage is that is columns are sortable this will work anyway. In order to clear selection for columns that you don't want just need to invoke clearSelection().

if (col !== 'Area' && col !== 'Pod' && col !== 'Cell') {
    this.clearSelection();
}

Check an example here : http://jsfiddle.net/OnaBai/m5J9J/1/ and here: http://jsfiddle.net/OnaBai/m5J9J/2/ (using column header for getting column name)

这篇关于Kendo UI Grid:选择单个单元格，取回DataItem，防止特定单元格被选中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！