Question

我有一个工作网格（字段是名称和ID）：

<grid stuff>
    <kendo:grid-column width="80px">
        <kendo:grid-column-command>
            <kendo:grid-column-commandItem name="delete" text="Delete">
                <kendo:grid-column-commandItem-click>
                //Here I want to grab this worker id and redirect the user to the url workerDelete.html?Id
                </kendo:grid-column-commandItem-click>
            </kendo:grid-column-commandItem>
        </kendo:grid-column-command>
    </kendo:grid-column>
    <kendo:grid-column width="80px">
        <kendo:grid-column-command>
            <kendo:grid-column-commandItem name="update" text="Update">
                <kendo:grid-column-commandItem-click>
                    // here I want to grab this worker id and redirect the user to the url workerUpdate.html?Id
                </kendo:grid-column-commandItem-click>
            </kendo:grid-column-commandItem>
        </kendo:grid-column-command>
    </kendo:grid-column>
</grid stuff>

我需要知道当用户按下自定义按钮并更改视图时，如何从行中捕获数据，并在查询字符串上传递数据。我使用jsp和spring。

我尝试使用以下代码，但它不起作用：

<script>
    function deleteWorker() {
        var grid = $('#grid').data('kendoGrid');
        var row = grid.dataItem(grid.select());
        var id = row.id;
        window.location.href = "/workerDelete.html?"+cpf; 
    }
</script>

Answer 1

您需要定义grid-column-command，如下所示：

<kendo:grid-column-command>
    <kendo:grid-column-commandItem name="update" text="Update" click="deleteWorker"/>
</kendo:grid-column-command>

和deleteWorker功能为：

    function deleteWorker(e) {
        var tr = $(e.currentTarget).closest("tr");
        var item = $("#grid").data("kendoGrid").dataItem(tr);
        // Do whatever else you need
    }

在此功能item中是Kendo Grid dataItem。

Answer 2

使用模板列。模板可以是一个用 k-button 类（因此它看起来像一个剑道按钮）和自定义类（如 deleteWorker 类）装饰的按钮。

然后，您可以在网格初始化时添加委托事件处理程序，例如：

$('#gridName').on('click','.deleteWorker',function(){
    var tr = $(this).closest('tr');
    var rowItem = grid.dataItem(tr);
    var id = rowItem.id;
    window.location.href = "/workerDelete.html?"+id;
})

Kendo UI Grid自定义命令重定向

2 个答案: