DC js选择菜单并使用引导程序进行样式设置

Question

我从文档的this示例开始，并尝试使用bootstrap设置选择的样式。为了获得一致的测试结果，我使用了this SO Post上答案8中的LCG来播种RNG。

出于样式目的，我添加了

bootstrap-select.min.css
bootstrap-select.min.js

此处提供完整代码：http://jsfiddle.net/r7e2cnyx/60/

如果我不尝试启用选择器，则所有工作都将按预期进行：

在启用像这样准备好的文档中的样式时

$( document ).ready(function() {
//note select1 is a div and .dc-select is the select added by dc
$('#select1 .dc-select-menu').selectpicker({
  style: 'btn-info',
  size: 10
});

$('#select2 .dc-select-menu').selectpicker({
  style: 'btn-info',
  size: 10
});

$('#select3 .dc-select-menu').selectpicker({
  style: 'btn-info',
  size: 10
});

})

，然后从第一个下拉列表中选择[A]，然后从第二个下拉列表中选择[爱丽丝蓝]，您将获得类似这样的结果

请注意，项目在颜色框中的排序方式不同

，如果您单击“全选”，则会得到

请注意，选择没有样式的相同选项似乎表明应用样式后值的排序方式有所不同。爱丽丝·布鲁（Alice Blue）是样式版本中的第一名，但矢车菊（Cornflower）是此处显示的非样式版本中的第一名

我不确定明显的排序在哪里进行，但似乎引导程序正在执行此操作，或者crossfilter / dc /和引导程序之间的交互尚不清楚。

此外，似乎没有办法删除全选选项或使其真正选择所有选项并显示检查内容。

还有其他方法可以解决我没有想到的这些问题吗？还是我应该做的不是我要做的事情？

Answer 1

我没有看到排序问题（尽管花了我很多时间才能弄清楚为什么选择了错误的选项）。

问题在于，只要基础选项发生更改，您就需要手动告诉bootstrap-select刷新。

我更喜欢对事件进行所有修改-这里的postRender和postRedraw对此非常有用：

selectm1.on('postRender', function() {
$('#select1 .dc-select-menu').selectpicker({
  style: 'btn-info',
  size: 10
});
})
.on('postRedraw', function() {
$('#select1 .dc-select-menu').selectpicker('refresh') 
});

selectm2.on('postRender', function() { 
$('#select2 .dc-select-menu').selectpicker({
  style: 'btn-info',
  size: 10
});
})
.on('postRedraw', function() {
$('#select2 .dc-select-menu').selectpicker('refresh') 
});
selectm3.on('postRender', function() {
$('#select3 .dc-select-menu').selectpicker({
  style: 'btn-info',
  size: 10
});
})
.on('postRedraw', function() {
$('#select1 .dc-select-menu').selectpicker('refresh') 
});

  dc.renderAll();

http://jsfiddle.net/gordonwoodhull/a7bwtxgr/23/