首页 文章

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

提问于
浏览 次
0

我有一个表格，其中一列往往很长，用户希望它在表格首次加载时正常显示（即作为文本，并使用elipsis截断） . 如果他们点击这个备注单元格，他们希望它展开并显示整个字段内容 . 我有这个工作，删除列并添加一个具有相同定义的"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');
    }
tabulator

1 回答

  • 1

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

    实际上你根本不需要更改格式化程序，你只需要在 pre-wrap 和 normal 之间切换单元格 white-space 属性，然后调用行组件上的 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();
    }
    回复于

相关问题