有没有办法在dc.js selectmenu中使用optgroup?

时间:2019-04-24 15:41:01

标签: dc.js crossfilter bootstrap-selectpicker

我正在使用dc-select-menu来成功过滤许多图形。我正在用bootstrap-selectpicker装饰选择。

我遇到了需要应用optgroup的情况,这对最终用户更有意义-而不是创建另一个选择。

我尝试在div中为dc-select添加optgroup标记。

我尝试将div更改为选择。

我尝试附加optgroup。

相关代码...

            var dept = ndx.dimension(function(d) { return d.Department });
            var deptGp = dept.group();

            var deptGroupLabel = ndx.dimension(function(d) { return d.DepartmentGroup; });
            var deptLabel = deptGroupLabel.group();

            var depts = "<optgroup label=" + deptLabel + ">" + "</optgroup>";

          deptSelect
            .dimension(dept)
            .group(deptGp)
            .multiple(true)
            .title(function(d) { return d.key })
            .controlsUseVisibility(true);

        deptSelect
            .on('postRender', function() {
                deptSelect.select('.dc-select-menu').attr('data-actions-box', 'true');

                $('#deptSelect .dc-select-menu').selectpicker({
                    liveSearch: true,
                    liveSearchStyle: 'contains',
                    showTick: true,
                    selectOnTab: true,
                    virtualScroll: 8,
                    doneButton: true
                });
              })
                .on('postRedraw', function() {
                $('#deptSelect .dc-select-menu').selectpicker('refresh');
            });

            $('#deptSelect .dc-select-menu').append(depts);

我希望将deptLabel视为optgroup,随后是相应的部门。

0 个答案:

没有答案