股价天梯更新后需要清除单元格数据

Question

var domtableOne = new Tabulator("#domtableOne", {
maxHeight:"100%",
height:"150pt",
data:prices,
index:"price",
movableColumns: true,
columns:
[

{title:"Last", field:"DLnowprice", editor:"input", 
 hozAlign:"center", width:"15pt", mutateLink:"price", 
 mutator: function(value, data) {
                value = data.DLnowprice;
                return value},
               },

{title:"Buyers", field:"bid", editor:"input", hozAlign:"center", 
 width:"15%"},

{title:"Price", field:"price", editor:"input", hozAlign:"center", 
 width:"15%",
 formatter:function(cell, formatterParams, onRendered){
 var value = cell.getValue();
 if (value == cell.getRow().getData().DLnowprice)
 {cell.getElement().style.backgroundColor = "lightgreen"}
 if (value != cell.getRow().getData().DLnowprice)
 {cell.getElement().style.backgroundColor = "white"}
 return value},
 },

 {title:"Sellers", field:"ask", editor:"input", hozAlign:"center", 
  width:"15%"},

 {title:"P/L$", field:"ppld", editor:"input", hozAlign:"center", 
  width:"15%"},

 {title:"P/L%", field:"plper", editor:"input", hozAlign:"center", 
  width:"15%"},
  ]
  });

//Data received from websocket
 if (json.cmd == "L1Update")
 {
 var Nsym = json.result.sym;
 var Lprice = json.result.price.toFixed(2);
 var LVol = json.result.volume;
 var Lbid = json.result.bid;
 var Lask = json.result.ask
 domtableOne.updateData ([{ price:Lprice, DLnowprice:Lprice, 
 bid:Lbid, ask:Lask}])

编码工作正常，但当新价格添加到该列时，最后一列不会清除。结果是价格列继续显示多个价格的绿色。

需要将价格栏仅针对当前价格显示为绿色。

如果我手动清除/删除最后一栏中的a单元格数据，价格栏中相应的价格将返回到白色。

当向该列添加/更新新价格时，需要代码来清除/删除最后一列价格中的价格。

更新后还需要自动滚动到“价格栏”中的当前价格。

谢谢。

Answer 1

希望我正确理解您的问题，但如果您需要在添加下一个价格之前清除最后一列中的数据，一种方法可能是在更新数据之前完全清除最后一列：

const prices = [
  { DLnowprice: '', bid: '', price: '1.67' },
  { DLnowprice: '', bid: '', price: '1.66' },
  { DLnowprice: '', bid: '', price: '1.65' },
  { DLnowprice: '', bid: '', price: '1.64' },
  { DLnowprice: '', bid: '', price: '1.63' },
  { DLnowprice: '', bid: '', price: '1.62' },
  { DLnowprice: '', bid: '', price: '1.61' },
  { DLnowprice: '', bid: '', price: '1.60' }
]

const samplePrices = ['1.60', '1.61', '1.62', '1.63', '1.64', '1.65', '1.66', '1.67']

const domtableOne = new Tabulator('#table', {
  data: prices,
  index: 'price',
  movableColumns: true,
  columns: [
    {
      title: 'Last',
      field: 'DLnowprice',
      editor: 'input',
      hozAlign: 'center',
      width: '15pt',
      mutateLink: 'price',
      mutator: function (value, data) {
        value = data.DLnowprice
        return value
      }
    },
    { title: 'Buyers', field: 'bid', editor: 'input', hozAlign: 'center', width: '15%' },
    {
      title: 'Price',
      field: 'price',
      editor: 'input',
      hozAlign: 'center',
      width: '15%',
      formatter: function (cell, formatterParams, onRendered) {
        var value = cell.getValue()
        if (value == cell.getRow().getData().DLnowprice) {
          cell.getElement().style.backgroundColor = 'lightgreen'
        }
        if (value != cell.getRow().getData().DLnowprice) {
          cell.getElement().style.backgroundColor = 'white'
        }
        return value
      }
    },

    { title: 'Sellers', field: 'ask', editor: 'input', hozAlign: 'center', width: '15%' },
    { title: 'P/L$', field: 'ppld', editor: 'input', hozAlign: 'center', width: '15%' },
    { title: 'P/L%', field: 'plper', editor: 'input', hozAlign: 'center', width: '15%' }
  ]
})

document.getElementById('updatePrice').addEventListener('click', () => {
  const priceIndex = Math.floor(Math.random() * samplePrices.length)

  // Clear 'Last' column
  prices.forEach((price) => (price.DLnowprice = ''))

  domtableOne.updateData([{ price: samplePrices[priceIndex], DLnowprice: samplePrices[priceIndex] }])
  domtableOne.redraw(true)
})

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

<div id="table"></div>
<button id="updatePrice">Update Price</button>