时间戳

首页 > 解决方案 > dc js 选择菜单和带有引导程序的样式

twitter-bootstrap - dc js 选择菜单和带有引导程序的样式

问题描述

我从文档中的这个示例开始，并尝试使用引导程序设置选择的样式。为了获得一致的测试结果，我使用了此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] 你会得到这样的结果

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

如果你点击全选，你会得到

下拉选择结果

请注意，选择没有样式的相同选项似乎表明在应用样式后对值进行了不同的排序。Alice Blue 是第一个样式版本，但矢车菊是第一个在这里显示的非样式版本 比较

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

此外，似乎没有办法删除Select All选项或使其实际选择所有选项并显示检查。

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

标签： twitter-bootstrapdc.jscrossfilter

解决方案

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

问题是您需要手动告诉 bootstrap-select 在底层选项更改时刷新。

我更喜欢做所有的 mods 来响应事件 - 这里 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/

推荐阅读