Kendo UI Grid 自定义命令重定向答案

【问题标题】：Kendo UI Grid custom commands redirectKendo UI Grid 自定义命令重定向
【发布时间】：2013-01-24 15:57:58
【问题描述】：

我有一个工作网格（字段是名称和 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>

【问题讨论】：

标签： javascript spring jsp kendo-ui

【解决方案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 是剑道网格dataItem。

【讨论】：

【解决方案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;
})

【讨论】：