首页 文章

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

提问于
浏览 次
5

我有一个显示一组数据的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单元格，以及单元格所在行的其他数据 . 似乎所有数据都在那里所以它不应该是这么困难，但我真的很难找到完成这个所需的数据 .

谢谢你的帮助！

kendo-ui telerik kendo-grid

1 回答

  • 16

    获取数据项是：

    // 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/（使用列 Headers 获取列名称）

    回复于

相关问题