Question

我有一个使用dc.js构建的仪表板，并且我使用的图表类型为dc.rowChart和dc.dataTables。
没有条件格式的工作场景：
dc.rowChart-显示前50名客户
dc.dataTable-显示所有必填字段，并根据rowChart过滤数据。
具有条件格式的工作方案（在数据表行上）
在我的HTML中，我正在为DataTable调用jquery插件（用于conditioanl格式），这是下面的代码：

    <script>
    $(document).ready(function() {
    $("#Table").DataTable( {
    /*
        fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if ($(nRow).find('td:eq(7)').text()<'0') {
              $(nRow).find('td:eq(7)').addClass('color');
          }   
    }

    */                
                 columns : [
                 { title : "Customer Name" },

                 { title : "YoY Rank Change" ,

                 render: function ( data, type, row ) {
                if (data > '0') {
                    return '<p class="positive">'+data+'</p>';
                } else {
                    return '<p class="negative">'+data+'</p>';
                } } },

                 { title : "Jan'19 Qty" },
                 { title : "Dec'18 Qty" },
                 { title : "Nov'18 Qty" },
                 { title : "Oct'18 Qty" },
                 { title : "Sep'18 Qty" },
                 { title : "Aug'18 Qty" }
                ]   

       } );
    } );

    $.extend( true, $.fn.dataTable.defaults, {
        "searching": true,
        "ordering": false,
        "paging": false,
        "info": false,

    } );
    </script>

CSS：

    .negative {
    background-color:rgba(255,0,0,1.00);
    color: #fff;
    text-align: center;
    }
   .positive {
    background-color:rgba(50,205,50,1.00);
    color: #fff;
    text-align: center;
    }

在此处发布 当我第一次渲染页面时，带有条件格式的数据表的所有内容都可以正常工作
但是，当我单击“行图”以根据“客户”过滤数据表时，条件格式就消失了。
非常感谢您提供任何帮助来解决此问题。
我已经尝试了几乎所有的堆栈答案，但我无法实现。
下面使用的引用：
1. How to color code rows in a table dc.datatable?
2. How do I apply conditional formatting using datatables.js?
3. Color code a data table in dc.js 4. How to color code rows in a table dc.datatable?（由于我不想对整行进行颜色编码，所以选择了此选项）

@Gordon一直是我的幸存者。.请寻找您的意见！

Answer 1

我看到您仍在使用dc.js 2.0，因此我没有尝试将其移植到dc.datatables.js或dc-tableview。我仍然认为这样会更容易维护。

正如我在评论中指出的那样，$.DataTable是一种单向转换：完成此操作后，就无法更新表，因为dc.dataTable无法识别DOM结构以及DataTable doesn't have a way to reinitialize。

可能有一些聪明的方法来获取DataTables以更新数据（这就是库的作用）。首先构建一个表，然后使用DOM作为数据源来构建一个DataTable，这也是非常低效的。

但是，无论如何，每次绘制dc.dataTable时，都要从头开始构建DataTable。

执行此操作的方法是侦听表的pretransition事件，记住我们是否已经初始化了DataTable，如果有，则销毁旧实例：

var dt = null;
table.on('pretransition', function() {
    if(dt)
        dt.destroy();
    dt = $("#dc-data-grid").DataTable( {
        // as before
    } );
});

Fork of your fiddle。我不得不修复其他一些问题，但我不会赘述。

dc.js dataTable使用jquery dataTable进行条件格式化

1 个答案: