Я пытаюсь сделать так, чтобы конечный пользователь мог выбрать строку, столбец или ячейку и сделать любой цвет, который он выбрал, находясь в передней части веб-сайта.
В табуляторе есть способ изменить цвета для определенных столбцов, но он закодирован в бэкэнде. Я могу сделать то же самое для строк, даже ячеек, но это не будет работать для конечных пользователей.
Я попробовал несколько фрагментов JavaScript и jQuery, чтобы заставить это работать. Я также установил jSColor плагин jQuery, но не могу заставить его работать с Tabulator. В идеале я бы хотел дважды щелкнуть строку, чтобы открыть палитру цветов.
Я потратил несколько часов сегодня, просматривая документацию Tabulator и jsColor, затем сочиняя различные фрагменты кода, но без особой удачи.
<!DOCTYPE html>
<html>
<head>
<title>Tabulator Table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="tabulator-master/dist/css/bootstrap/tabulator_bootstrap4.css">
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
/* Create data */
$(document).ready(function() {
// Build Table
var tab_table = new Tabulator("#data-container", {
layout: "fitColumns",
selectable: true,
height: "auto",
width: "auto",
var colorFormatter = function rowClick(e, row){
var value = row.getValue('color');
}
columns: [
{title: "First Name", field: "first_name", width: 200, formatter: "color"},
{title: "Last Name", field: "last_name", width: 200, formatter: "color"},
{title: "Email", field: "email", width: 200, formatter: "color"},
{title: "Phone", field: "phone", width: 200, formatter: "color"},
],
data: [
{id:1, first_name: "Bugs", last_name: "Bunny", email: "bugsbunny@wb.com", phone: "(555) 555-1212"},
{id:2, first_name: "Yosemite", last_name: "Sam", email: "yosemite@wb.com", phone: "(555) 555-2323"},
{id:3, first_name: "Daffy", last_name: "Duck", email: "daffyduck@wb.com", phone: "(555) 555-3434"},
{id:4, first_name: "Wile E.", last_name: "Coyote", email: "wile.e.coyote@wb.com", phone: "(555) 555-4545"},
{id:5, first_name: "Elmer", last_name: "Fudd", email: "elmer@wb.com", phone: "(555) 555-5656"},
],
rowSelectionChanged:function(data, rows){
//update selected row counter on selection change
$("#select-stats span").text(data.length);
}
});
var setJsColor = function update(jscolor) {
document.getElementByClassId('row_id').style.backgroundColor = '#' + jscolor;
}
});
</script>
</head>
<body>
<div class="container">
<div id="table-buttons">
<input class="form-control" type="text" id="numColumns" value="1" />
<button class="btn btn-primary" id="btnAddColumns">Add Columns</button>
<button class="btn btn-primary" id="btnRemoveColumn">Remove Column</button>
<button class="jscolor
{valueElement:'valueInput', styleElement:'styleInput'}">
Click here to pick a color
</button>
</div>
<div id="data-container" class="table-responsive">
</div>
</div>
</body>
</html>
Ожидаемый результат: нажмите один раз, чтобы выбрать строку (или ячейку), и нажмите второй раз, чтобы активировать палитру цветов.
Фактический результат: я могу заставить выбранную строку работать, но не могу получить дальше.
Сообщения об ошибках: нет.