我的制表符表中有一个使用列表类型编辑器的单元格。这些选项由看起来像(作为示例)的字符串数组填充:
[
"a<b",
"b<c",
"c<d",
]
当填充列表编辑器时(在列定义中使用 editorParams:{values:exampleOptions} ),或者当我直接在单元格上使用 setValue() 时,它会删除尖括号后面的所有内容。所以我在下拉列表中看到类似这样的内容:
"a",
"b",
"c",
如何将完整字符串放入该下拉列表/单元格中?
一种方法是使用
itemFormatter
中的 editorParams
选项为值列表定义一个新元素节点,并返回包含列表值的元素的 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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>