英文:
In Tabulator.js, how can I set the value of a cell to a string that contains angle brackets? e.g. "a<b<c"
问题
我在我的Tabulator表格中有一个单元格，它使用了一个列表类型的编辑器。选项是由一个看起来像这样的字符串数组填充的（作为示例）：
[
"a<b",
"b<c",
"c<d",
]
当列表编辑器被填充时（在列定义中使用editorParams:{values:exampleOptions}），或者当我直接在单元格上使用setValue()时，它会删除尖括号之后的所有内容。所以在下拉列表中我看到类似这样的东西：
"a",
"b",
"c",
如何将完整的字符串放入下拉列表/单元格中？
英文:
I have a cell in my Tabulator table that uses a list type editor. The options are populated by an array of strings that looks like (as an example):
[
"a<b",
"b<c",
"c<d",
]
When the list editor is populated (using editorParams:{values:exampleOptions} in the column definition), or when I use setValue() on the cell directly, it drops everything after the angle bracket. So I see something like this in the dropdown list:
"a",
"b",
"c",
How can I get the full string into that dropdown list/cell?
答案1
得分: 1
一种方法是在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'
}
]
});
在name列上使用了上述示例。
英文:
One way would be to use the itemFormatter option in editorParams to define a new element node for the values list, and return the innerHTML of the element containing the list value:
editorParams: {
values: ["a<b", "b<c", "c<d"],
itemFormatter: (label, value, item, element) => {
const listNode = document.createTextNode(value);
element.appendChild(listNode);
return element.innerHTML;
}
},
Here is an example on the name column:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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'
}
]
})
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 0
用"<"替换为"&lt;"解决了这个问题。
英文:
Solved it by replacing "<" with "&lt;"
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论