如何在剑道网格中使用自定义命令按钮和 ajax 调用使用 javascript

Question

我在使用带有 ajax 调用的剑道网格中的自定义命令按钮时遇到问题，使用 javascript 调用 web api 发布操作，按钮背后有动态参数单击（开始、停止、重新启动）

1. 数据源

dataSource = new kendo.data.DataSource({
            transport: {
                read:
                    {
                        url: crudServiceBaseUrl + "WindowsService",
                        dataType: "json",
                    },
                destroy:
                    {
                        url: crudServiceBaseUrl + "WindowsService/Delete/?deletedby=" + clientid,
                        type: "DELETE"
                    },
                create:
                    {
                        url: crudServiceBaseUrl + "WindowsService/Post",
                        type: "POST"
                        //complete: function (e) {
                        //    $("#grid").data("kendoGrid").dataSource.read();
                        //}
                    },
                update:
                    {
                        url: crudServiceBaseUrl + "WindowsService/Put/",
                        type: "PUT",
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                                };
                            }
                        }
                    },
            },
            schema:
                {
                    model:
                        {
                            id: "WindowsServiceId",
                            fields: {
                                WindowsServiceId: { editable: true, nullable: false, type: "int" },
                                ServiceName: { editable: true, nullable: true, type: "string" },
                                ServiceStatus: { editable: true, nullable: false, type: "string" },
                            }

                        }
                }
        });

1. 剑道网格

$("#grid").kendoGrid({
        dataSource: dataSource,
        editable: "popup",
        toolbar: ["create"],
        columns: [
        {
            field:"ServiceName",
            title: "Service",
            width: '200px',
        },
        {
            field: "ServiceStatus",
            title: "Status",
            width: '140px',
        },
        {
            field: "CreatedDate",
            title: "Date",
            width: '140px',
        },
        {
            command: [
                     {
                      name: "start",
                      text: "Start",
                      click: function (e) {
                          $.ajax({
                              method: "POST",
                              url: crudServiceBaseUrl + "WindowsService/Start?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
                          }).done(function (msg) {
                              alert("Service Started successfully");
                          }).fail(function () {
                              alert("service failed");
                          });
                      }
                     },
                     {
                         name: "stop",
                         text: "Stop",
                         click: function (e) {
                             $.ajax({
                                 method: "POST",
                                 url: crudServiceBaseUrl + "WindowsService/Stop?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
                             }).done(function (msg) {
                                 alert("Service Stop successfully");
                             }).fail(function () {
                                 alert("service failed");
                             });
                         }
                     },
                     {
                         name: "restart",
                         text: "Restart",
                         click: function (e) {
                             $.ajax({
                                 method: "POST",
                                 url: crudServiceBaseUrl + "WindowsService/ReStart?windowsserviceid=3c661827-01cf-e511-bcd8-3859f9fd735e"+"&clientid="+clientid
                             }).done(function (msg) {
                                 alert("Service ReStarted successfully");
                             }).fail(function () {
                                 alert("service failed");
                             });
                         }
                     },
                     {
                         name: "history",
                         text: "History",
                         click: function (e) {
                             alert("History");
                         }
                     }
            ]

        }
        ],

        //height: "500px",
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
    }).data("kendoGrid")

   ;

1. html

<div id="grid"> </div>

我在传递唯一 id 的动态 windowsserviceid 时遇到问题，现在我只使用静态 id。它使用静态值。 请帮助/指导我如何在 ajax 函数调用中使用动态 windowsserviceid。感谢您宝贵的时间和精力。提前致谢。

Answer 1

最后我通过访问行的唯一 ID 然后在我的按钮点击函数中使用该 ID 找到了解决方案，这对我来说非常完美。

var tr = $(e.target).closest("tr");    //accessing a row in grid
var item = this.dataItem(tr);     //accessing row items in the grid
var winServiceId = item.WindowsServiceId;    //my Unique Id in a row

最后在我的按钮点击函数中使用了这个 winServiceId。

Answer 2

这应该适合你：

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { hidden: true, field: "id" },
    { field: "name" }
  ],
  dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>

您可以在此处阅读更多信息：

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerAttributes

那么您所要做的就是访问函数中的隐藏字段值。

另一方面，您应该从网格定义中删除您的函数，并将它们作为您从网格定义中调用的单独函数。