我想在制表器中使用Select2，但无法触发选定的值。
这是表格列的格式化程序代码：
{
title: "Select2", field: "lucky_no", align: "center", width: 300, editor: true,
formatter: function (cell, formatterParams, onRendered) {
onRendered(function () {
var select_2 = $(cell.getElement());
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
}).on('change', function (e) {
console.log('change');
});
select_2.val(list[cell.getValue()].id);
var x = select_2.val();
select_2.val(x).trigger('change');
})
}
},
我添加了一个有效的示例。
在表上方的下拉列表中触发所选值。 尽管在表中触发了更改事件，但该事件未在下拉列表中显示所选值。
谢谢
Aad
答案 0 :(得分：1)
如果您要使字段可编辑，则应创建自定义的 编辑器 ，而不是 格式化程序 >
格式化程序用于向用户显示数据，编辑器用于允许用户编辑数据。
在深入探讨此示例之前，您是否知道Tabulator已经内置了Select Editor，使您的生活更加轻松，请在文档中的演示中查看“性别”列看到它的实际效果。
使用自定义编辑器时，它们带有 select 和 cancel 回调，以允许您传递数据返回表中。
因此，在您的示例中，它看起来应该像这样（此代码未经测试）
//create custom editor
var select2Editor = function(cell, onRendered, success, cancel, editorParams){
//create input element to hold select
var editor = document.createElement("input");
onRendered(function(){
var select_2 = $(editor);
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
});
select_2.on('change', function (e) {
success(select_2.val());
});
select_2.on('blur', function (e) {
cancel();
});
});
//add editor to cell
return editor;
}
//in your column definition for the column
{title: "Select2", field: "lucky_no", align: "center", width: 300, editor: select2Editor},
答案 1 :(得分：0)
我的第一个问题..不包括在内！
var tabledata = [{
id: 1,
name: "Oli Bob",
progress: 12,
location: "United Kingdom",
gender: "male",
rating: 1,
col: "red",
dob: "14/04/1984",
car: 1,
lucky_no: 3
},
{
id: 2,
name: "Mary May",
progress: 1,
location: "Germany",
gender: "female",
rating: 2,
col: "blue",
dob: "14/05/1982",
car: true,
lucky_no: 2
},
{
id: 3,
name: "Christine Lobowski",
progress: 42,
location: "France",
gender: "female",
rating: 0,
col: "green",
dob: "22/05/1982",
car: "true",
lucky_no: 5
},
{
id: 4,
name: "Brendon Philips",
progress: 100,
location: "USA",
gender: "male",
rating: 1,
col: "orange",
dob: "01/08/1980",
lucky_no: 7
},
{
id: 5,
name: "Margret Marmajuke",
progress: 16,
location: "Canada",
gender: "female",
rating: 5,
col: "yellow",
dob: "31/01/1999",
lucky_no: 4
},
];
var list = [{
"id": 1,
"text": "Organisatorische tekortkomingen"
}, {
"id": 2,
"text": "Mechanische gevaren"
}, {
"id": 3,
"text": "Hijs-/hefgevaren"
}, {
"id": 4,
"text": "Ergonomische tekortkomingen"
}, {
"id": 5,
"text": "Mobiliteit en gevaarlijke situaties"
}, {
"id": 6,
"text": "Elektrische gevaren"
}, {
"id": 7,
"text": "Blootstelling aan gevaarlijke stoffen"
}, {
"id": 8,
"text": "Gevaarlijke situaties - Algemeen"
}, {
"id": 9,
"text": "Blootstelling aan straling"
}, {
"id": 10,
"text": "Druk"
}, {
"id": 11,
"text": "Blootstelling aan trillingen"
}, {
"id": 12,
"text": "Blootstelling aan geluid"
}, {
"id": 13,
"text": "Fysieke gevaren (overig)"
}, {
"id": 14,
"text": "Gevaar voor/door derden (hijsen/heffen)"
}, {
"id": 15,
"text": "Hijsen/heffen en ergonomische tekortkomingen"
}, {
"id": 16,
"text": "Mobiliteit en werkplek/bestuurdersplaats"
}, {
"id": 17,
"text": "Mobiliteit en ergonomische tekortkomingen"
}, {
"id": 18,
"text": "Mobiliteit en energiebron en -overbrenging"
}, {
"id": 19,
"text": "Mobiliteit en stabiliteit"
}, {
"id": 20,
"text": "Gevaarlijke situaties door onverwachte opstart/beweging"
}, {
"id": 21,
"text": "Gevaren beheerst!",
"scope": "Algemeen"
}, {
"id": 22,
"text": "NIET beoordeeld!"
}];
$('#selectList').select2({
data: list,
minimumResultsForSearch: Infinity,
width: 'resolve',
minimumInputLength: 0,
allowClear: true,
placeholder: "Select",
});
$('#selectList').val(7).trigger('change');
//Build Tabulator
var table = new Tabulator("#example-table", {
height: "500px",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Location",
field: "location",
width: 130
},
{
title: "Progress",
field: "progress",
sorter: "number",
align: "left",
formatter: "progress",
width: 140
},
{
title: "Gender",
field: "gender",
editor: "select",
editorParams: {
"male": "Male",
"female": "Female"
}
},
{
title: "Rating",
field: "rating",
formatter: "star",
align: "center",
width: 100
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date"
},
{
title: "Driver",
field: "car",
align: "center",
formatter: "tickCross"
},
{
title: "Select2",
field: "lucky_no",
align: "center",
width: 300,
//editor: true,
formatter: function(cell, formatterParams, onRendered) {
onRendered(function() {
var select_2 = $(cell.getElement());
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
}).on('change', function(e) {
//console.log('change');
});
select_2.val(list[cell.getValue()].id);
var x = select_2.val();
select_2.val(x).trigger('change');
})
}
},
],
});
//load sample data into the table
table.setData(tabledata);<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/tabulator-tables@4.1.3/dist/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables@4.1.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<html>
<body>
<div>
<select class="form-control" name="selectList" id="selectList">
</select>
</div>
<br />
<div id="example-table" class="table-striped table-bordered"></div>
</body>
</html>