javascript - 使用 AnhularJS 指令刷新 Kendo 详细信息

Question

我正在使用一个网格，它自动定义数据源并为每个项目加载子网格。

此标记相当简单

<div class="thegrid"
     kendo-grid
     k-data-source="vm.GeneralData"
     k-options="vm.gridMainOptions">
    <div k-detail-template>
        <div kendo-grid k-options="vm.detailGridOptions(dataItem)"></div>
    </div>
</div>

在子网格详细信息模板中，我有一个网格列，它会触发一个事件以响应 ng-click 事件。

columns: [
{
    field: "Id",
    editable: false,
    hidden: true
},
{
    title: "",
    width: "160px",
    editable: false,
    template:
    "<span class='glyphicon glyphicon-remove remove-template'  
           ng-click='vm.removeItem(dataItem)'></span><",
    attributes: {
    "class": "managing-templates-column",
    "title": "Delete This Template"
}

]

在 Controller 本身中，我有一个对此做出响应的方法。

function removeItem(dataItem) {

    console.log("remove", dataItem);
    //removed code that makes an ajax call to actually delete item

    //... and now need to refesh that datasource that this belongs to.

}

我如何获取 dataItem 的数据源以便刷新它？

Answer 1

在 Kendo 的模板引擎中，您可以使用 data 对象，它实际上是您的 dataItem。试试这个:

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem(data)'></span>"

如果这不起作用，请尝试通过 DOM 访问 dataItem:

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem(this)'></span>"

然后:

function removeItem(span) {
    var $tr = $(span).closest("tr"),
        grid = $tr.closest(".k-grid").data("kendoGrid"),
        dataItem = grid.dataItem($tr);
}

更新

基于this answer ，试试这个:

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem($event)'></span>"

还有...

function removeItem($event) {
    var $tr = $($event.currentTarget).closest("tr"),
        grid = $tr.closest(".k-grid").data("kendoGrid"),
        dataItem = grid.dataItem($tr);
}