使用 AnhularJS 指令刷新剑道细节

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"
}

]

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

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