Bootstrap Multiselect - 动态选项填充

Question

我使用Bootstrap Multiselect 来满足我的应用需求。我的应用程序还使用 wicket 框架。我在刷新我的应用程序中的引导多选之一时遇到了问题。请参考下图

根据从报告区域选择框中选择的值，可用多选应该使用适当的选项刷新。虽然使用不同的值修改了底层的常规多选，但位于其顶部的 boostrap 多选无法刷新。

报告区域选择框正在使用 wicketajax，我尝试使用下面的代码来刷新 可用引导多选

<div>Report Area:</div>
<div>
    <select wicket:id="reportArea">
        <option value="TaskCardAssignment">TaskCardAssignment</option>                                                           
    </select>
</div>
<div class="labelbg">Available:</div>
<div class="select">
    <select wicket:id="available" multiple="true" size="15">
       <option value="Workgroup">Workgroup</option>                                                      
    </select>
</div>
<script type="text/javascript">
    var idAvailable = jQuery('[name="attributes:available"]').attr('id');
    var availbleId = jQuery('#'+idAvailable);
    availbleId.multiselect(); //Creates multiselect 

    jQuery('[name="attributes:reportArea"]').change(function(e) {
      setTimeout(function() {
            availbleId.multiselect('rebuild');
            availbleId.multiselect('refresh');
        },0);
    });
</script>

Answer 1

Wicket 的 Ajax 和 Bootstrap Multiselect 不能很好地协同工作。

当您通过 availbleId.multiselect(); 调用创建多选时，引导多选会将一些数据附加到原始选择的 dom 元素（无法完全回忆起确切的数据是什么）。根据我对类似问题的调查，这些数据似乎对于纠正 Bootstrap Multiselect 的功能至关重要。

不过，Wicket 的 Ajax 有其他计划。当您通过 wicket 的 ajax 重新渲染组件时，wicket 所做的是重新渲染组件的 HTML（以及任何可能相关的脚本）并将新的 html 发送到客户端。在浏览器端，wicket 完全用包含新生成的 HTML 的新元素替换旧的 DOM 元素。

您现在可能已经猜到问题所在了。当 wicket 替换原始选择的 HTML 时，Bootstrap Multiselect 附加到 DOM 元素的任何数据都消失了。这会导致多选停止工作。

不幸的是，这个问题没有简单的解决方案。与 ListView 之类的东西不同，其中的单个选项也是检票口组件，任何扩展 AbstractChoice 的组件中的选项都不是，因此不能单独重新渲染。但是，您可以使用的一种解决方案是，您可以为选项生成 HTML 并编写一些 JavaScript 来仅替换选项而不是选择本身，而不是重新呈现您的 AbstractChoice。这可以通过做与AbstractChoice#onComponentTagBody() 中的wicket 所做的基本相同的事情来完成。也就是说，而不是做

@Override 
protected void onUpdate(final AjaxRequestTarget target) { 
    target.add(availableFields);
}

你可以做类似的事情

@Override 
protected void onUpdate(final AjaxRequestTarget target) { 

    // Generate HTML for the select's options - this is literally the code from AbstractChoice#onComponentTagBody()

    List<? extends T> choices = getChoices();
    final AppendingStringBuffer buffer = new AppendingStringBuffer((choices.size() * 50) + 16);
    final String selectedValue = getValue();

    buffer.append(getDefaultChoice(selectedValue));

    for (int index = 0; index < choices.size(); index++)
    {
        final T choice = choices.get(index);
        appendOptionHtml(buffer, choice, index, selectedValue);
    }

    // Create javascript which will replace the body of the select with the new options
    String replacementJavaScript =
            "$('#" + this.getMarkupId() + "')" +
                    ".replaceWith('" + buffer.toString().replace("'", "\"") + "');";

    String multiselectRefresh = "$(yourMultiselectSelector).multiselect('refresh');"

    target.appendJavaScript(replacementJavaScript + multiselectRefresh);
}