沃梦达 / 编程问答 / 前端问题 / 正文

如何在数据表中添加行 - DC.js

前端问题
2022-01-01

How to add row in datatable - DC.js(如何在数据表中添加行 - DC.js)

本文介绍了如何在数据表中添加行 - DC.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 json 文件，它根据当年和上一年为销售人员加载销售数据.

我创建了一个表格，其中显示了每个销售人员每年的总销售额，在最后一行，我需要加载所有销售人员的总销售额.如下图所示:

我正在使用 dc.dataTable 来创建我的表.

您能否告诉我 DC.js 中是否有任何方法可以在我的表中创建一行来放置总销售额?

这是我的代码，提前谢谢你.

var vendedorTable = dc.dataTable("#Vendedores");var url = 'http://www.json-generator.com/api/json/get/cgsUhkPSjS?indent=2';d3.json(url).then(函数(数据) {data.forEach(函数(d){var myCrossfilter = crossfilter(数据);var all = myCrossfilter.groupAll();dc.dataCount(".dc-data-count").dimension(myCrossfilter).组(全部)；vendorDim = myCrossfilter.dimension(function(d) {返回 d.vendnm;});var vendedorGroup = vendedorDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);函数减少添加(p，v){p.totalAno += +v.Vendas_Ano;p.totalHomologo += +v.Vendas_Ant;返回 p;}函数减少删除(p，v){p.totalAno -= v.Vendas_Ano；p.totalHomologo -= v.Vendas_Ant；返回 p;}函数 reduceInitial() {返回 {总Ano:0，totalHomologo: 0,};}//格式化程序 = d3.format(".3s");//formatter2 = d3.format(".0%");//假维度排名=函数(p){返回 ""};功能检查行(d){if (d.value.totalAno <= 0 || isNaN(d.value.totalAno) || d.value.totalHomologo <= 0 || isNaN(d.value.totalHomologo)) {返回0；}返回 d;}//供应商表vendorTable.width(500).高度(480).dimension(供应商组).group(排名).columns([函数(d){d = checkRows(d);而(d！= 0){返回 d.key;}},功能(d){d = checkRows(d);而(d！= 0){return Number(Math.round(d.value.totalAno * 100)/100).toLocaleString("es-ES", {最小分数位数:2}) + '€';}},功能(d){d = checkRows(d);而(d！= 0){return Number(Math.round(d.value.totalHomologo * 100)/100).toLocaleString("es-ES", {最小分数位数:2}) + '€';}}]).sortBy(函数(d){返回 d.value.totalAno}).order(d3.descending)vendorTable.on('pretransition', function(table) {table.selectAll('td.dc-table-column').on('点击'，函数(d) {让过滤器 = table.filters().slice();if (filters.indexOf(d.key) === -1)过滤器.push(d.key);别的过滤器 = filters.filter(k => k != d.key);if (filters.length === 0)vendorDim.filter(null);别的vendorDim.filterFunction(function(d) {返回过滤器.indexOf(d) !== -1;})table.replaceFilter([过滤器]);dc.redrawAll();});让过滤器 = table.filters();table.selectAll('tr.dc-table-row').classed('sel-rows', d => filters.indexOf(d.key) !== -1);});dc.renderAll();});$('#reset').on('点击', function() {vendorTable.filter(null);vendorDim.filter(null)dc.redrawAll();});$('#resetTable').on('click', function() {vendorTable.filter(null);vendorDim.filter(null)dc.redrawAll();});});

<head><风格>.dc 表组 {可见性:崩溃；}tr.dc-table-row.sel-rows {背景颜色:浅蓝色；}</风格><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><链接 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 完整性="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 完整性="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.js" 完整性="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 完整性="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script><script src="https://d3js.org/d3.v5.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.8/dc.js"></script><title>供应商</title></头><身体><div class="容器流体"><div class="行内容"><div class="col-md-8" style="padding-left: 20px;"><div class="行边距类"><h4 class="pull-left" id="Introduction"><small>Dados fictícios da empresa |例子德塔哈达 |</small></h4><h6 class="dc-data-count" style="float: left;margin-left:5px;"><跨度><span class="filter-count"></span>从中选出<span class="total-count"></span>记录 |<a id="重置">全部重置 </a></span></h6></div><div class="col-md-6"><br><a id="resetTable">重置</a><table class="table" id="Vendores"><头><tr><th>销售</th><th>当年</th><th>去年</th></tr></头></表></div></div></div></div></body>

解决方案

dc.js 是 crossfilter 的前端，它是一个用于 JavaScript 的内存数据库，针对此类仪表板进行了调整.

您总是希望在数据库端添加数据.所以正确的地方是在 crossfilter API 中，这里是:crossfilter.add()

我可能刚刚发表了评论，但既然你已经足够好，可以包含运行代码，让我们试试吧！

首先，让我们从数据集中保留一个供应商:

 rows = data0.filter(d => d.vendnm === 'JOÃO LUIS');var data = data0.filter(d => d.vendnm !== 'JOÃO LUIS');

然后，当点击 Add Row 按钮时，让我们添加该数据并重新绘制所有关联的图表:

 $('#addRow').on('click', function() {myCrossfilter.add(行);dc.redrawAll();});

请注意，如果您多次单击添加行"，该供应商的销售额将翻一番，然后是三倍，因为我们显示的是一个聚合组，因此该供应商获得的销售额越来越多.

仅此而已！

var vendedorTable = dc.dataTable("#Vendedores");//提升 crossfilter 和 row 以便它们对 addRow 处理程序可见var myCrossfilter，行；var url = 'http://www.json-generator.com/api/json/get/cgsUhkPSjS?indent=2';d3.json(url).then(function(data0) {//保存 Joao 以备后用rows = data0.filter(d => d.vendnm === 'JOÃO LUIS');var data = data0.filter(d => d.vendnm !== 'JOÃO LUIS');data.forEach(函数(d){myCrossfilter = 交叉过滤器(数据)；var all = myCrossfilter.groupAll();dc.dataCount(".dc-data-count").dimension(myCrossfilter).组(全部)；vendorDim = myCrossfilter.dimension(function(d) {返回 d.vendnm;});var vendedorGroup = vendedorDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);函数减少添加(p，v){p.totalAno += +v.Vendas_Ano;p.totalHomologo += +v.Vendas_Ant;返回 p;}函数减少删除(p，v){p.totalAno -= v.Vendas_Ano；p.totalHomologo -= v.Vendas_Ant；返回 p;}函数 reduceInitial() {返回 {总Ano:0，totalHomologo: 0,};}//格式化程序 = d3.format(".3s");//formatter2 = d3.format(".0%");//假维度排名=函数(p){返回 ""};功能检查行(d){if (d.value.totalAno <= 0 || isNaN(d.value.totalAno) || d.value.totalHomologo <= 0 || isNaN(d.value.totalHomologo)) {返回0；}返回 d;}//供应商表vendorTable.width(500).高度(480).dimension(供应商组).group(排名).columns([函数(d){d = checkRows(d);而(d！= 0){返回 d.key;}},功能(d){d = checkRows(d);而(d！= 0){return Number(Math.round(d.value.totalAno * 100)/100).toLocaleString("es-ES", {最小分数位数:2}) + '€';}},功能(d){d = checkRows(d);而(d！= 0){return Number(Math.round(d.value.totalHomologo * 100)/100).toLocaleString("es-ES", {最小分数位数:2}) + '€';}}]).sortBy(函数(d){返回 d.value.totalAno}).order(d3.descending)vendorTable.on('pretransition', function(table) {table.selectAll('td.dc-table-column').on('点击'，函数(d) {让过滤器 = table.filters().slice();if (filters.indexOf(d.key) === -1)过滤器.push(d.key);别的过滤器 = filters.filter(k => k != d.key);if (filters.length === 0)vendorDim.filter(null);别的vendorDim.filterFunction(function(d) {返回过滤器.indexOf(d) !== -1;})table.replaceFilter([过滤器]);dc.redrawAll();});让过滤器 = table.filters();table.selectAll('tr.dc-table-row').classed('sel-rows', d => filters.indexOf(d.key) !== -1);});dc.renderAll();});$('#reset').on('点击', function() {vendorTable.filter(null);vendorDim.filter(null)dc.redrawAll();});$('#resetTable').on('click', function() {vendorTable.filter(null);vendorDim.filter(null)dc.redrawAll();});$('#addRow').on('click', function() {myCrossfilter.add(行);dc.redrawAll();});});

<head><风格>.dc 表组 {可见性:崩溃；}tr.dc-table-row.sel-rows {背景颜色:浅蓝色；}</风格><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><链接 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 完整性="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 完整性="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.js" 完整性="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 完整性="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script><script src="https://d3js.org/d3.v5.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.8/dc.js"></script><title>供应商</title></头><身体><div class="容器流体"><div class="行内容"><div class="col-md-8" style="padding-left: 20px;"><div class="行边距类"><h4 class="pull-left" id="Introduction"><small>Dados fictícios da empresa |例子德塔哈达 |</small></h4><h6 class="dc-data-count" style="float: left;margin-left:5px;"><跨度><span class="filter-count"></span>从中选出<span class="total-count"></span>记录 |<a id="重置">全部重置 </a></span></h6></div>
<a id="addRow">添加行 </a></div><div class="col-md-6"><br><a id="resetTable">重置</a><table class="table" id="Vendores"><头><tr><th>销售</th><th>当年</th><th>去年</th></tr></头></表></div></div></div></div></body>

I have a json file that loads sales data for salespeople based on the current year and the previous year.

I created a table in which I show the total sales for each year for each salesperson and, in the last row, I need to load the total for all salespeople added up. As shown in the image below:

I am using dc.dataTable to create my table.

Can you tell me if there is any way in DC.js to create a row in my table to put the total sales?

Here is my code, thank you in advance.

var vendedorTable = dc.dataTable("#Vendedores");

var url = 'http://www.json-generator.com/api/json/get/cgsUhkPSjS?indent=2';
d3.json(url).then(function(data) {

  data.forEach(function(d) {

    var myCrossfilter = crossfilter(data);
    var all = myCrossfilter.groupAll();

    dc.dataCount(".dc-data-count")
      .dimension(myCrossfilter)
      .group(all);

    vendedorDim = myCrossfilter.dimension(function(d) {
      return d.vendnm;
    });

    var vendedorGroup = vendedorDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);

    function reduceAdd(p, v) {
      p.totalAno += +v.Vendas_Ano;
      p.totalHomologo += +v.Vendas_Ant;
      return p;
    }

    function reduceRemove(p, v) {
      p.totalAno -= v.Vendas_Ano;
      p.totalHomologo -= v.Vendas_Ant;
      return p;
    }

    function reduceInitial() {
      return {
        totalAno: 0,
        totalHomologo: 0,
      };
    }

    // formatter = d3.format(".3s");
    // formatter2 = d3.format(".0%");

    //Fake Dimension
    rank = function(p) {
      return ""
    };

    function checkRows(d) {
      if (d.value.totalAno <= 0 || isNaN(d.value.totalAno) || d.value.totalHomologo <= 0 || isNaN(d.value.totalHomologo)) {
        return 0;
      }
      return d;
    }

    //vendedorTable
    vendedorTable.width(500)
      .height(480)
      .dimension(vendedorGroup)
      .group(rank)
      .columns([function(d) {
          d = checkRows(d);
          while (d != 0) {
            return d.key;
          }
        },
        function(d) {
          d = checkRows(d);
          while (d != 0) {
            return Number(Math.round(d.value.totalAno * 100) / 100).toLocaleString("es-ES", {
              minimumFractionDigits: 2
            }) + '€';
          }
        },
        function(d) {
          d = checkRows(d);
          while (d != 0) {
            return Number(Math.round(d.value.totalHomologo * 100) / 100).toLocaleString("es-ES", {
              minimumFractionDigits: 2
            }) + '€';
          }
        }
      ])
      .sortBy(function(d) {
        return d.value.totalAno
      })
      .order(d3.descending)

    vendedorTable.on('pretransition', function(table) {
      table.selectAll('td.dc-table-column')
        .on('click', function(d) {
          let filters = table.filters().slice();
          if (filters.indexOf(d.key) === -1)
            filters.push(d.key);
          else
            filters = filters.filter(k => k != d.key);
          if (filters.length === 0)
            vendedorDim.filter(null);
          else
            vendedorDim.filterFunction(function(d) {
              return filters.indexOf(d) !== -1;
            })

          table.replaceFilter([filters]);
          dc.redrawAll();
        });
      let filters = table.filters();
      table.selectAll('tr.dc-table-row')
        .classed('sel-rows', d => filters.indexOf(d.key) !== -1);
    });

    dc.renderAll();

  });

  $('#reset').on('click', function() {
    vendedorTable.filter(null);
    vendedorDim.filter(null)

    dc.redrawAll();
  });

  $('#resetTable').on('click', function() {
    vendedorTable.filter(null);
    vendedorDim.filter(null)

    dc.redrawAll();
  });

});

<head>
  <style>
    .dc-table-group {
      visibility: collapse;
    }
    
    tr.dc-table-row.sel-rows {
      background-color: lightblue;
    }
  </style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
  <script src="https://d3js.org/d3.v5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.8/dc.js"></script>

  <title>Vendedores</title>
</head>

<body>


  <div class="container-fluid">
    <div class="row content">
      <div class="col-md-8" style="padding-left: 20px;">
        <div class="row marginClass">
          <h4 class="pull-left" id="Introduction"><small>Dados fictícios da empresa | Exemplo de Pesquisa
                            Detalhada |
                        </small></h4>
          <h6 class="dc-data-count" style="float: left;margin-left:5px;">
            <span>
                            <span class="filter-count"></span> selected out of
            <span class="total-count"></span> records |
            <a id="reset"> Reset All </a>
            </span>
          </h6>
        </div>

        <div class="col-md-6">
          <br>
          <a id="resetTable"> Reset</a>
          <table class="table" id="Vendedores">
            <thead>
              <tr>
                <th>Sales</th>
                <th>Current Year</th>
                <th>Last Year</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

解决方案

dc.js is the frontend for crossfilter, which is an in-memory database for JavaScript that is tuned for these kinds of dashboards.

You always want to add data on the database side. So the right place to look is in the crossfilter API, and here it is: crossfilter.add()

I might have just left a comment, but since you were nice enough to include running code, let's try it out!

First, let's reserve one of the vendors out of the dataset:

  rows = data0.filter(d => d.vendnm === 'JOÃO LUIS');
  var data = data0.filter(d => d.vendnm !== 'JOÃO LUIS');

Then, when the Add Row button is clicked, let's add that data and redraw all the associated charts:

  $('#addRow').on('click', function() {
    myCrossfilter.add(rows);
    dc.redrawAll();
  });

Notice that if you click Add Row multiple times, the sales for that vendor will double, then triple, because we are displaying an aggregated group, so that vendor gets more and more sales added in.

That's all there is to it!

var vendedorTable = dc.dataTable("#Vendedores");
// lift crossfilter and row so they are visible to addRow handler
var myCrossfilter, rows;

var url = 'http://www.json-generator.com/api/json/get/cgsUhkPSjS?indent=2';
d3.json(url).then(function(data0) {

  // save Joao for later
  rows = data0.filter(d => d.vendnm === 'JOÃO LUIS');
  var data = data0.filter(d => d.vendnm !== 'JOÃO LUIS');

  data.forEach(function(d) {

    myCrossfilter = crossfilter(data);
    var all = myCrossfilter.groupAll();

    dc.dataCount(".dc-data-count")
      .dimension(myCrossfilter)
      .group(all);

    vendedorDim = myCrossfilter.dimension(function(d) {
      return d.vendnm;
    });

    var vendedorGroup = vendedorDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);

    function reduceAdd(p, v) {
      p.totalAno += +v.Vendas_Ano;
      p.totalHomologo += +v.Vendas_Ant;
      return p;
    }

    function reduceRemove(p, v) {
      p.totalAno -= v.Vendas_Ano;
      p.totalHomologo -= v.Vendas_Ant;
      return p;
    }

    function reduceInitial() {
      return {
        totalAno: 0,
        totalHomologo: 0,
      };
    }

    // formatter = d3.format(".3s");
    // formatter2 = d3.format(".0%");

    //Fake Dimension
    rank = function(p) {
      return ""
    };

    function checkRows(d) {
      if (d.value.totalAno <= 0 || isNaN(d.value.totalAno) || d.value.totalHomologo <= 0 || isNaN(d.value.totalHomologo)) {
        return 0;
      }
      return d;
    }

    //vendedorTable
    vendedorTable.width(500)
      .height(480)
      .dimension(vendedorGroup)
      .group(rank)
      .columns([function(d) {
          d = checkRows(d);
          while (d != 0) {
            return d.key;
          }
        },
        function(d) {
          d = checkRows(d);
          while (d != 0) {
            return Number(Math.round(d.value.totalAno * 100) / 100).toLocaleString("es-ES", {
              minimumFractionDigits: 2
            }) + '€';
          }
        },
        function(d) {
          d = checkRows(d);
          while (d != 0) {
            return Number(Math.round(d.value.totalHomologo * 100) / 100).toLocaleString("es-ES", {
              minimumFractionDigits: 2
            }) + '€';
          }
        }
      ])
      .sortBy(function(d) {
        return d.value.totalAno
      })
      .order(d3.descending)

    vendedorTable.on('pretransition', function(table) {
      table.selectAll('td.dc-table-column')
        .on('click', function(d) {
          let filters = table.filters().slice();
          if (filters.indexOf(d.key) === -1)
            filters.push(d.key);
          else
            filters = filters.filter(k => k != d.key);
          if (filters.length === 0)
            vendedorDim.filter(null);
          else
            vendedorDim.filterFunction(function(d) {
              return filters.indexOf(d) !== -1;
            })

          table.replaceFilter([filters]);
          dc.redrawAll();
        });
      let filters = table.filters();
      table.selectAll('tr.dc-table-row')
        .classed('sel-rows', d => filters.indexOf(d.key) !== -1);
    });

    dc.renderAll();

  });

  $('#reset').on('click', function() {
    vendedorTable.filter(null);
    vendedorDim.filter(null)

    dc.redrawAll();
  });

  $('#resetTable').on('click', function() {
    vendedorTable.filter(null);
    vendedorDim.filter(null)

    dc.redrawAll();
  });

  $('#addRow').on('click', function() {
    myCrossfilter.add(rows);
    dc.redrawAll();
  });

});

<head>
  <style>
    .dc-table-group {
      visibility: collapse;
    }
    
    tr.dc-table-row.sel-rows {
      background-color: lightblue;
    }
  </style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.8/dc.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
  <script src="https://d3js.org/d3.v5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.8/dc.js"></script>

  <title>Vendedores</title>
</head>

<body>


  <div class="container-fluid">
    <div class="row content">
      <div class="col-md-8" style="padding-left: 20px;">
        <div class="row marginClass">
          <h4 class="pull-left" id="Introduction"><small>Dados fictícios da empresa | Exemplo de Pesquisa
                            Detalhada |
                        </small></h4>
          <h6 class="dc-data-count" style="float: left;margin-left:5px;">
            <span>
                            <span class="filter-count"></span> selected out of
            <span class="total-count"></span> records |
            <a id="reset"> Reset All </a>
            </span>
          </h6>
        </div>

        <div>
            <a id="addRow"> Add Row </a>
        </div>

        <div class="col-md-6">
          <br>
          <a id="resetTable"> Reset</a>
          <table class="table" id="Vendedores">
            <thead>
              <tr>
                <th>Sales</th>
                <th>Current Year</th>
                <th>Last Year</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

这篇关于如何在数据表中添加行 - DC.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：如何在数据表中添加行 - DC.js

上一篇： JavaScript - 从对象数组中计算和删除重复项 ES6
下一篇： 为什么我在 React Native 中的这个布尔值上有两个不同的值?

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2