javascript - Kendo 工具栏附加不起作用

Question

我正在尝试使用以下命令在某些功能之后附加我的 Kendo Grid 工具栏::

1)我得到的工具栏为::

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

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

    $("#Grid").find(".k-grid-toolbar").html(toolbar);

此处工具栏已正确附加，但我无法使用这些功能(即工具栏内的下拉菜单)。

如何让我的工具栏下拉菜单正常工作？

提前致谢

Answer 1

获取 html() 方法仅提供 HTML 代码，而不提供附加到该 HTML 元素的 JavaScript。因此，当您在工具栏中注入(inject) HTML 代码时，您需要再次调用附加到元素的 JavaScript。如果您想获取 kendo 小部件配置(例如 dropdownList)，您需要从小部件中调用 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()，也许它一开始就不会消失:)