Kendo UI Grid:选择单个单元格,返回DataItem,并阻止选择特定单元格？

Question

我有一个显示一组数据的Kendo UI Grid,我需要能够选择特定的单元格(特定列中的单元格),并且在选中时,返回所选单元格所在行的DataItem,以及单击的DataItem.我不知道这是否可能,但我一整天都在努力,并得出结论我需要一些帮助.

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

    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);
}

首先,有没有办法在网格定义中"关闭"特定列的选择？这样做我找不到任何东西.我只希望用户能够在"Area","Pod"和"Cell"列中选择单元格.如果他们点击其他列,则不会发生任何事情.此外,当他们点击那些选定的单元格时,我想获取单元格所在行的DataItem(我目前可以使用该grid_change方法执行),以及选中的列,或者已选择的DataItem.

因此,例如,如果用户单击"Pod"单元格,我想知道它是单击的pod单元格,以及单元格所在行的其他数据.似乎所有数据都在那里所以它不应该是这么困难,但我真的很难找到完成这个所需的数据.

谢谢你的帮助!

Answer 1

获取数据项是:

// 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);

要获取列名称,您可以执行以下操作:

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

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

// Get column name from Grid column header data
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/(使用列标题获取列名)