剑道工具栏追加不起作用

Kendo toolbar append is not working

本文关键字：不起作用 追加 工具栏      更新时间：2023-09-26

我正在尝试使用以下功能将我的剑道网格工具栏附加到某些功能之后：

1）我得到的工具栏

是：： 
    var toolbar = $("#Grid").find(".k-grid-toolbar").html();

2）然后在使用grid.setOptions(JSON.parse(options))对网格进行一些更改后，导致工具栏消失，我再次将工具栏附加到网格中

，如下所示： 
    $("#Grid").find(".k-grid-toolbar").html(toolbar);

此处工具栏已正确附加，但我无法使用这些功能（即工具栏内的下拉列表）。

如何让我的工具栏下拉列表工作？

提前致谢

获取 html() 方法仅提供 HTML 代码，而不是附加到此 HTML 元素的 JavaScript。因此，当您在工具栏中注入HTML代码时，您需要再次调用附加到元素的JavaScript。如果要获取剑道小部件配置，例如下拉列表，则需要从小部件调用options和dataSource。

例如：

var $toolbar = $("#Grid").find(".k-grid-toolbar"),
    toolbar = $toolbar.html(),
    // Dropdown list Element
    $ele = $("input[name=myInput]", $toolbar.get(0)),
    // Dropdown list Widget object
    ddl = $ele.data("kendoDropDownList"),
    cfg = ddl.options;
// toJSON returns objects without the observer properties
cfg.dataSource = ddl.dataSource.data().toJSON();
// HERE YOU REBUILD YOUR TABLE
$toolbar.html(toolbar);
$("input[name=myInput]", $toolbar.get(0)).kendoDropDownList(cfg);

如果您添加到工具栏的元素始终相同，我建议您创建一个以网格作为参数的函数（如果数据发生变化，则创建数据）：

function setToolbarContent(grid){
  var $toolbar = grid.find(".k-grid-toolbar");
  $toolbar.html('My HTML String');
  $toolbar.find("input[name=myInput]").kendoDropDownList({my: 'cfg'});
}

顺便说一下，如果你将工具栏配置和模板添加到grid.setOptions（），也许它一开始就不会消失:)

相关文章：