时间戳

首页 > 解决方案 > 制表符中的多选样式

javascript - 制表符中的多选样式

问题描述

我确实在根据本指南创建的制表器中有一个多选标题过滤器：如何在制表器中创建多选标题过滤器？

我迷失了多选输入字段的样式。请您指教，如何将样式更改为 ie selected、select2、bootstrap 或任何其他自定义样式？

我试图将 css 类分配给该列标题，它可以工作，但数据不会动态更改。

在此先感谢您的帮助！

我当前的代码：

<!DOCTYPE html>
<html>
<head>

<title>List of processing items</title>

<meta charset=UTF-8>
<?php include 'header.php';?>
</head>
<body>

<div class="container">
<div id="tabulator"></div>
<script type="text/javascript">

const processingTypeTypes = ['TASK', 'WORKFLOW'];
function multiSelectHeaderFilter(cell) {
  var values = processingTypeTypes;
  const filterFunc = (rowData) => {
    return values.includes(rowData['processingType']);
  }
  const getSelectedValues = (multiSelect) => {
    var result = [];
    var options = multiSelect && multiSelect.options;
    var opt;

    for (var i = 0, iLen = options.length; i < iLen; i++) {
      opt = options[i];

      if (opt.selected) {
        result.push(opt.value || opt.text);
      }
    }
    return result;
  }

  const onChange = () => {
    var editor = document.getElementById('processingTypeSelector');
    values = getSelectedValues(editor);
    console.log("values: " + values);
    cell.getColumn().getTable().removeFilter(filterFunc);
    cell.getColumn().getTable().addFilter(filterFunc);
  }

  var select = document.createElement("select");
  select.multiple = "multiple";
  select.id = 'processingTypeSelector';
  select.class = "chosen-select";
  select.style = 'width: 100%';
  processingTypeTypes.forEach(processingType => {
    select.innerHTML += "<option id='" + processingType + "' value='" + processingType + "' selected='selected'>" + processingType + "</option>";
  });
  cell.getColumn().getTable().addFilter(filterFunc);
  select.addEventListener('change', onChange);

  return select;
}
</script>

<script>
var tabledata = 
<?php include("include/dummyJson.php"); ?>
;

var table = new Tabulator("#tabulator", {
    layout:"fitColumns",
    headerSort: true,
    tooltips:true,
    placeholder:"No Data. Incorrect input, OR empty response.",
    data:tabledata,
    columns:[
    {title:"Type", field: "processingType", sorter: "string", headerFilter: multiSelectHeaderFilter, headerFilterLiveFilter: false},
    ],
});
</script>

</div>

</body>
</html>

标签： javascripthtmltabulator

解决方案

如果您设置了列标题的样式，则列表元素的样式不会更改，因为列表元素直接附加到正文元素，并且绝对定位到选择的输入元素下方。这种方法消除了任何否则会出现的容器溢出问题。

如果您希望能够自行设置列表样式，则需要覆盖应用于类的 CSS。（确保在导入 tabulator.css 后添加此 css）

要覆盖列表容器上的任何内容，您需要：

.tabulator-edit-select-list{
    border:2px solid #f00; //make list have red border
}

要覆盖列表项上的任何内容，您将需要：

.tabulator-edit-select-list .tabulator-edit-select-list-item{
    color:#f00; //make list item have red text
}

要覆盖所选列表项上的任何内容，您需要：

.tabulator-edit-select-list .tabulator-edit-select-list-item.active{
    background:#f00; //make list item background red when selected
}

要覆盖焦点列表项上的任何内容，您将需要：

.tabulator-edit-select-list .tabulator-edit-select-list-item.focused{
    background:#0f0; //make list item background green when focused
}

推荐阅读