1

我想在 Tabulator 中使用 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');
        })
    }
},

我添加了一个工作示例。

触发所选值在表格上方的下拉菜单中起作用。尽管在表格中触发了更改事件，但它不会在下拉列表中显示所选值。

谢谢，

广告

4

2 回答 2

2

如果您试图使该字段可编辑，您应该创建一个自定义编辑器而不是格式化程序

格式化程序用于向用户显示数据，编辑器用于允许用户编辑数据。

内置选择编辑器

在我深入这个示例之前，您是否知道 Tabulator 已经内置了一个选择编辑器以使您的生活更加轻松，在文档中的演示中，查看性别列以查看它的实际效果。

自定义编辑器

使用自定义编辑器时，它们带有选择和取消回调，允许您将数据传递回表中。

因此，对于您的示例，它应该看起来像这样（此代码未经测试）

//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},
于 2018-12-04T22:51:52.870 回答
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>

于 2018-12-04T15:06:02.490 回答