Question

我正在使用mdl为应用程序创建一个简单的Web前端。我有一个MDL卡，用户可以在其中指定一个简单的过滤器以应用于数据表。过滤器的指定如下：一个提供正确布局的容器元素，其中包含以下子元素： -允许选择字段的MDL菜单 -允许选择运算符的mdl菜单（例如<，=等）。 -允许指定值的元素（取决于所选字段，它可以是mdl文本字段或mdl菜单）

我想让用户可以编辑当前定义的过滤器，然后决定是应用已编辑的过滤器还是取消编辑并保留当前定义的过滤器。滤卡具有“应用”按钮和“取消”按钮。单击“应用”按钮时，将调用一个函数，该函数将克隆当前的过滤器元素（即具有其字段，运算符，值子级的容器元素）并将其存储在全局变量中。主窗口有一个“过滤器”按钮，显示带有当前定义的过滤器的过滤器窗口。过滤器按钮onclick处理程序是一个函数，它删除当前过滤器元素（因为它们可能是取消的编辑的结果，而不是当前定义的过滤器的结果），并通过添加保存在其中的克隆节点来重新创建当前定义的过滤器。全局变量。我最后得到的是一组看起来正确的元素（即，第一个mdl菜单显示当前定义的字段，第二个mdl菜单显示当前定义的运算符，第三个元素显示当前定义的值），但是mdl -menu元素没有任何行为：如果单击第一个或第二个mdl-menu元素，则不会显示值的下拉列表。我尝试过在添加的元素上添加appendChild（）之前在克隆的元素上调用componentHandler.upgradeElement，但这是行不通的。

我以前曾尝试过从头开始创建元素，但是我找不到能动态设置mdl菜单的选定值或mdl-textfield的值的方法），这就是为什么我尝试了不同的方法方法。

function showOrderFilter() {
  var filterContainer = document.getElementById("order- 
  filter").querySelector(".mdl-card__supporting-text");
  var listHtml = '';
  if (orderFilterCriteria.length == 0) {
    listHtml += createDefaultFilterRow();
    filterContainer.innerHTML = listHtml;
    componentHandler.upgradeDom();
  } else {
    while (filterContainer.firstChild) 
     {filterContainer.removeChild(filterContainer.firstChild);}
    for (let i = 0; i < currentFilter.length; i++) {                     
      componentHandler.upgradeElement(currentFilter[i]);                     
      filterContainer.appendChild(currentFilter[i]);                 
   }
  }
  showPageDialog("order-filter");
}

在定义完过滤器后打开过滤器窗口时，showOrderFilter（）函数采用“ else”路径，并将先前克隆的过滤器添加到filterContainer中，但是如果单击两个mdl-menu元素之一，菜单选项（即<li>元素）未显示。使用Chrome开发人员工具，我可以看到克隆的节点元素已经升级，因此我尝试先对其进行降级，但是并不能解决问题。

将克隆的mdl-menu元素与appendChild一起添加时，它没有任何行为

0 个答案: