是否可以更改制表符中单个单元格的格式化程序？

Question

我有一个 table，其中一列往往很长，用户希望它在 table 首次加载时正常显示（即作为文本并用省略号截断） .如果他们单击此备注单元格，他们希望它展开并显示整个字段内容。我通过删除该列并添加具有相同定义的 "new" 来实现此目的，只需在新列上添加 formatter: 'textarea' 的规范。这几乎可以满足我的要求，我运行唯一感兴趣的是这会导致所有行扩展，我真正想要的只是他们点击的行在。这可能与制表符有关吗？如果可以，如何处理？

这是一个代码片段，不确定这里是否需要：

    ctrl.activities = [
  {
    "Completed": false,
    "Notes": "Pork loin strip steak andouille, kevin cow porchetta spare ribs rump. Leberkas capicola jerky cow. Shank pork loin bacon fatback boudin t-bone flank. Porchetta filet mignon brisket, pork loin boudin short loin burgdoggen chuck beef short ribs fatback ham chicken prosciutto biltong. Shoulder buffalo pork andouille, doner ground round sausage porchetta chicken beef ribs spare ribs. Prosciutto bresaola doner ham bacon drumstick ground round shankle kielbasa. 1"
  },
  {
    "Completed": false,
    "Notes": "followup future"
  },
  {
    "Completed": false,
    "Notes": "dac"
  },
  {
    "Completed": false,
    "Notes": "dac"
  },
  {
    "Completed": false,
    "Notes": "Spare ribs cupim turducken pastrami. Alcatra ground round venison jowl chuck meatball turducken hamburger shoulder fatback frankfurter tenderloin ham. Short ribs spare ribs pig flank, frankfurter turkey biltong pork chop hamburger alcatra ball tip. Turkey filet mignon cupim shankle sirloin kielbasa brisket pork fatback ham pig turducken jerky bacon."
  }
];

    el.tabulator({
        layout: 'fitColumns'
        , responsiveLayout: 'hide'
        , placeholder: 'No activities'
        , data: ctrl.activities
        , columns: [{{
                title: 'Notes'
                , field: 'Notes'
                , minWidth: 100
                , cellDblTap: notesClick
                , cellClick: notesClick
            }, {
                title: 'Toggle'
                , headerSort: false
                , field: 'Completed'
            }]

    function notesClick(e, cell) {
        $log.debug({type: 'tabulator cell click', e, cell});
        tabActivities.tabulator('deleteColumn', 'Notes');
        tabActivities.tabulator('addColumn', {
            title: 'Notes'
            , field: 'Notes'
            , formatter: 'textarea'
            , variableHeight: true
            , cellDblTap: expandedNotesClick
            , cellTap: expandedNotesClick
            , cellClick: expandedNotesClick
        }, true, 'Completed');
    }

    function expandedNotesClick(e, cell) {
        $log.debug({type: 'tabulator cell click', e, cell});
        tabActivities.tabulator('deleteColumn', 'Notes');
        tabActivities.tabulator('addColumn', {
            title: 'Notes'
            , field: 'Notes'
            , minWidth: 100
            , cellDblTap: notesClick
            , cellTap: notesClick
            , cellClick: notesClick
        }, true, 'Completed');
    }

Answer 1

普通文本格式化器和制表符内置的文本区域格式化器之间的唯一区别是文本区域格式化器设置 css white-space 值到 pre-wrap

所以实际上你根本不需要更改格式化程序，你只需要切换单元格 white-space 属性在 pre-wrap 和 normal 之间然后在行组件上调用 normalizeHeight 函数以重置该行的高度。

cellClick(e, cell){
    var el = cell.getElement();

    el.css("white-space",  el.css("white-space") === "pre-wrap" ? "normal" : "pre-wrap");
    cell.getRow().normalizeHeight();
}

这是我最终得到的结果：

    if(el.css('white-space') === 'pre-wrap') {
        el.css('white-space', 'nowrap');
        cell.getRow().reformat();
    } else {
        el.css('white-space', 'pre-wrap');
        cell.getRow().normalizeHeight();
    }

是否可以更改制表符中单个单元格的格式化程序？

Is it possible to change the formatter for a single cell in tabulator?

tabulator