0

我有一个表格，其中有一列往往很长，用户希望它在表格首次加载时正常显示（即作为文本并用省略号截断）。如果他们单击此注释单元格，他们希望它展开并显示整个字段内容。我通过删除列并添加具有相同定义的“新”列来实现此目的，只需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');
    }
4

1 回答 1

1

普通文本格式化程序和制表符内置的文本区域格式化程序之间的唯一区别是文本区域格式化程序将 css空白值设置为预换行

所以实际上你根本不需要更改格式化程序，你只需要在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();
    }
于 2018-09-24T20:42:02.050 回答