首页 > 社区问答列表 >如何将带有尖括号的字符串赋值给Tabulator.js中的单元格,例如:"a<b<c"?

  如何将带有尖括号的字符串赋值给Tabulator.js中的单元格,例如:"a<b<c"?

我在Tabulator表格中有一个使用列表类型编辑器的单元格。选项由一个字符串数组填充,看起来像这样(以示例为例):

[
   "a

当列表编辑器被填充(在列定义中使用editorParams:{values:exampleOptions}),或者当我直接在单元格上使用setValue()时,它会丢弃尖括号后面的内容。所以在下拉列表中我看到类似于这样的内容:

"a",
   "b",
   "c",

如何将完整的字符串显示在下拉列表/单元格中?

P粉718730956
P粉718730956

  • P粉659378577
  • P粉659378577   采纳为最佳   2023-08-04 00:07:33 1楼

    一种方法是使用editorParams中的itemFormatter选项来定义值列表的新元素节点,并返回包含列表值的元素的innerHTML:

    editorParams: {
      values: ["a {
        const listNode = document.createTextNode(value);
        element.appendChild(listNode);
    
        return element.innerHTML;
      }
    },

    这是在name列上的一个示例:


    const data = [{
        id: 1,
        name: 'Billy Bob',
        age: '12',
        gender: 'male',
        height: 1,
        col: 'red',
        dob: '',
        cheese: 1
      },
      {
        id: 2,
        name: 'Mary May',
        age: '1',
        gender: 'female',
        height: 2,
        col: 'blue',
        dob: '14/05/1982',
        cheese: true
      },
      {
        id: 10,
        name: 'Margret Marmajuke',
        age: '16',
        gender: 'female',
        height: 5,
        col: 'yellow',
        dob: '31/01/1999'
      }
    ]
    
    const table = new Tabulator('#example-table', {
      data: data,
      columns: [{
          title: 'Name',
          field: 'name',
          editor: "list",
          editorParams: {
            values: ["a {
              const listNode = document.createTextNode(value);
              element.appendChild(listNode);
    
              return element.innerHTML;
            }
          },
        },
        {
          title: 'Age',
          field: 'age'
        },
        {
          title: 'Gender',
          field: 'gender'
        },
        {
          title: 'Height',
          field: 'height'
        },
        {
          title: 'Favourite Color',
          field: 'col'
        }
      ]
    })
    
    
    


    +0 添加回复