如何将带有尖括号的字符串赋值给Tabulator.js中的单元格,例如:"a<b<c"?
P粉718730956
P粉718730956 2023-08-03 13:48:37
0
1
521
<p>我在Tabulator表格中有一个使用列表类型编辑器的单元格。选项由一个字符串数组填充,看起来像这样(以示例为例):</p> <pre class="brush:php;toolbar:false;">[ "a<b", "b<c", "c<d", ]</pre> <p>当列表编辑器被填充(在列定义中使用editorParams:{values:exampleOptions}),或者当我直接在单元格上使用setValue()时,它会丢弃尖括号后面的内容。所以在下拉列表中我看到类似于这样的内容:</p> <pre class="brush:php;toolbar:false;">"a", "b", "c",</pre> <p>如何将完整的字符串显示在下拉列表/单元格中?</p>
P粉718730956
P粉718730956

全部回复(1)
P粉659378577

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

editorParams: {
  values: ["a<b", "b<c", "c<d"],
  itemFormatter: (label, value, item, element) => {
    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<b", "b<c", "c<d"],
        itemFormatter: (label, value, item, element) => {
          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'
    }
  ]
})
<link href="https://unpkg.com/tabulator-tables@5.5.1/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.1/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>


热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!