Tabulator 有没有办法在制表器中消除行单击

我有一个制表表表的

rowclick

和

rowdblclick

处理程序，我想去抖动

rowclick

处理程序，这样我就不会得到两个

rowclick

，然后每当我单击一行时，就会触发一个

rowdblclick

，是否有一个内置的方法可以做到这一点？我知道我可以使用rxjs创建主题和去Bounce，但如果存在，我希望使用内置的去Bounce。

我有一个非常类似的问题-全局行/cellClick在基于列的cellClick激发时也激发

我的工作是将e.stopImmediatePropagation（）放入基于列的cellClick函数中。这还允许RowdBlick事件向上/向下传递等（冒泡？）。然而，这可能与您所需要的正好相反，除非您通过在事件列中添加内容来消除双击的需要

var editIcon = function(cell, formatterParams, onRendered){ //plain text value
    return "<i class='fa fa-edit'></i>";
};

var table = new Tabulator("#table", {
    columns:[
        {title:"Name", field:"name"}, //etc
        {formatter:editIcon, headerSort:false, width:40, align:"center", cellClick:function(e, cell){ 
        // do whatever
            e.stopImmediatePropagation(); //prevent table wide rowClick() from also triggering
        },
    ],
    rowClick:function(e, row){
        //all rows/cells will inherit this function, however the cell level cellClick function will take the first bite of the event before bubbling up to rowClick
    },
});

var editIcon=函数（单元格、formatterParams、onRendered）{//纯文本值
返回“”；
};
var table=新制表器（“#table”{
栏目：[
{标题：“名称”，字段：“名称”}，//等
{格式化程序：编辑图标，标题排序：false，宽度：40，对齐：“中心”，单元格单击：函数（e，单元格）{
//做任何事
e、 stopImmediatePropagation（）；//防止表范围的rowClick（）也触发
},
],
行单击：函数（e，行）{
//所有行/单元格都将继承此函数，但是单元格级别的cellClick函数将在冒泡到rowClick之前接受事件的第一个部分
},
});

---

不知道这是否有帮助，可能是更优雅的方式，但对我来说有点有用。

我有一个非常类似的问题-全局行/cellClick在基于列的cellClick fire时也会触发

我的解决方法是将e.stopImmediatePropagation（）放入基于列的cellClick函数中。这还允许RowdBlick事件向上/向下传递等（冒泡？）。但是，这可能与您需要的相反，除非您通过放入事件列来消除双击的需要

var editIcon = function(cell, formatterParams, onRendered){ //plain text value
    return "<i class='fa fa-edit'></i>";
};

var table = new Tabulator("#table", {
    columns:[
        {title:"Name", field:"name"}, //etc
        {formatter:editIcon, headerSort:false, width:40, align:"center", cellClick:function(e, cell){ 
        // do whatever
            e.stopImmediatePropagation(); //prevent table wide rowClick() from also triggering
        },
    ],
    rowClick:function(e, row){
        //all rows/cells will inherit this function, however the cell level cellClick function will take the first bite of the event before bubbling up to rowClick
    },
});

var editIcon=函数（单元格、formatterParams、onRendered）{//纯文本值
返回“”；
};
var table=新制表器（“#table”{
栏目：[
{标题：“名称”，字段：“名称”}，//等
{格式化程序：编辑图标，标题排序：false，宽度：40，对齐：“中心”，单元格单击：函数（e，单元格）{
//做任何事
e、 stopImmediatePropagation（）；//防止表范围的rowClick（）也触发
},
],
行单击：函数（e，行）{
//所有行/单元格都将继承此函数，但是单元格级别的cellClick函数将在冒泡到rowClick之前接受事件的第一个部分
},
});

---

不知道这是否有帮助，可能是某种更优雅的方式，但对我来说有点有用。

我最后做的是使用一个EventEmitter，执行一个.emit，并从单击的行传递id。然后在订阅EventEmitter的管道中，我执行了一个.distinct，消除了在执行d时对同一行的第二次单击双击

export class XYZComponent implements AfterViewInit {
ngAfterViewInit(): void {
  this.tabX = new Tabulator('#xyz', {
        columns: [
          // 1
          {
            title: 'clickable column',
            field: 'X'
            headerSort: false,
            // visible: false,
            width: '5rem',
            cellDblClick: this.itemDblClick.bind(this),
            cellClick: this.itemClick.bind(this),
          },
          //...
        ]
      }
    );
}

  private itemClick(e, item) {
    // both cells and rows have a getData function
    this.onItemSelect(item.getData());
  }
  private itemDblClick(e, item) {
    // both cells and rows have a getData function
    this.onItemEdit(item.getData());
  }
}

export class ABCComponent implements AfterViewInit {

ngAfterViewInit(): void {
    this.selectItemSubject
      .pipe(
        takeWhile(() => this.active)
        , distinctUntilChanged() // this will eliminate the second click
      )
      .subscribe(item => {
        // load additional data for item
      });

    this.editItemSubject.pipe(
      takeWhile(() => this.active)
    )
    .subscribe((item) => {
      // do whatever to edit the item
    });

  }
}

---

我最后做的是使用EventEmitter并执行.emit，然后从单击的行传递id。然后在订阅EventEmitter的管道中执行.distinct，消除了双击时对同一行的第二次单击

export class XYZComponent implements AfterViewInit {
ngAfterViewInit(): void {
  this.tabX = new Tabulator('#xyz', {
        columns: [
          // 1
          {
            title: 'clickable column',
            field: 'X'
            headerSort: false,
            // visible: false,
            width: '5rem',
            cellDblClick: this.itemDblClick.bind(this),
            cellClick: this.itemClick.bind(this),
          },
          //...
        ]
      }
    );
}

  private itemClick(e, item) {
    // both cells and rows have a getData function
    this.onItemSelect(item.getData());
  }
  private itemDblClick(e, item) {
    // both cells and rows have a getData function
    this.onItemEdit(item.getData());
  }
}

export class ABCComponent implements AfterViewInit {

ngAfterViewInit(): void {
    this.selectItemSubject
      .pipe(
        takeWhile(() => this.active)
        , distinctUntilChanged() // this will eliminate the second click
      )
      .subscribe(item => {
        // load additional data for item
      });

    this.editItemSubject.pipe(
      takeWhile(() => this.active)
    )
    .subscribe((item) => {
      // do whatever to edit the item
    });

  }
}

---

这是一种标准的JavaScript点击事件行为，而不是制表器特有的任何行为

在绑定单击和双击处理程序时，将首先触发单击处理程序

我建议您使用设置的超时来检测双击是否发生，然后让双击事件清除阻止单击操作发生的超时：

  var debounce = null; //hold debounce timer

  var table = new Tabulator("#table", {
    rowClick:function(e, row){
        debounce = setTimeout(function(){
            //do something
        }, 100)
    },
    rowDblClick:function(e, row){
        clearTimeout(debounce);
    },
});

---

这是一种标准的JavaScript点击事件行为，而不是制表器特有的任何行为

在绑定单击和双击处理程序时，将首先触发单击处理程序

我建议您使用设置的超时来检测双击是否发生，然后让双击事件清除阻止单击操作发生的超时：

  var debounce = null; //hold debounce timer

  var table = new Tabulator("#table", {
    rowClick:function(e, row){
        debounce = setTimeout(function(){
            //do something
        }, 100)
    },
    rowDblClick:function(e, row){
        clearTimeout(debounce);
    },
});

---

酷，我走了一条不同的路线，使用主题对其进行审核，并以这种方式对其进行限制。酷，我走了一条不同的路线，使用主题对其进行审核，并以这种方式对其进行限制。这是一个标准事件处理问题，并非制表器、绑定单击和双击所独有单击同一元素的事件侦听器将导致在dbl单击之前触发单击这是一个标准的事件处理问题，并非Tabletor独有，将单击和双击事件侦听器绑定到同一元素将导致在dbl单击之前触发单击