jQuery Tabulator 插件：如何使行、列和单元格的颜色在前端可编辑

Question

我正在努力做到这一点，以便最终用户可以 select 行、列或单元格，并在网站前端将其设为他们选择的任何颜色。 Tabulator 有一种方法可以更改特定列的颜色，但它是在后端编码的。我可以对行甚至单元格执行相同的操作，但这对最终用户不起作用。

我尝试了多个 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>

预期结果：单击一次 select 行（或单元格），然后单击第二次以触发颜色选择器。

实际结果：我可以让 select 行工作，但不能比这更远。

错误信息：None.

Answer 1

我以前从未使用过 jQuery 制表符，但通过参考手册 here 我设法让它按照你想要的方式工作（至少我希望如此），这是代码

<!DOCTYPE html>
<html>

<head>
  <title>Tabulator Table</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/css/bootstrap/tabulator_bootstrap4.min.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 src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.2.7/js/tabulator.min.js" type="text/javascript"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js" type="text/javascript"></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",

        rowSelected: function(row) {
          $(row.getElement()).css({
            borderWidth: '3px',
            borderColor: 'red'
          });
        },

        rowDeselected: function(row) {
          $(row.getElement()).css({
            borderWidth: '',
            borderColor: ''
          });
        },

        columns: [{
            title: "First Name",
            field: "first_name",
            width: 200
          },
          {
            title: "Last Name",
            field: "last_name",
            width: 200
          },
          {
            title: "Email",
            field: "email",
            width: 200
          },
          {
            title: "Phone",
            field: "phone",
            width: 200
          },
        ],
        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"
          },
        ],

      });
      $('.jscolor').focusout(function() {
        $('.tabulator-selected').css({
          borderWidth: '',
          borderColor: ''
        });
        $('.tabulator-selected').removeClass('tabulator-selected');
        $('.jscolor').html('Click here to pick a color');
      });
      $('.jscolor').html('Click here to pick a color');

    });
  </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
    {onFineChange:'update(this)', closable:true, closeText:'Close me!'}">
                Click here to pick a color
            </button>
      <script type="text/javascript">
        function update(picker) {
          var color = picker.valueElement.innerHTML;
          $('.tabulator-selected').css('backgroundColor', '#' + color);
        }
      </script>

    </div>
    <div id="data-container" class="table-responsive">

    </div>
  </div>

</body>

</html>

当您单击一行（或多行）时，它会带有红色边框的下划线，因此您可以看到您选择了哪些行来更改它们的颜色，一旦您选择了所需的颜色，边框就会自行移除以让您知道进行了更改。

以下方法起到了作用：

rowSelected:function(row){
   $(row.getElement()).css({borderWidth: '3px', borderColor: 'red'});
},

rowDeselected:function(row){
   $(row.getElement()).css({borderWidth: '', borderColor: ''});
},

对于颜色选择器：

<script type="text/javascript">
    function update(picker) {              
        var color = picker.valueElement.innerHTML;
        $('.tabulator-selected').css('backgroundColor', '#' + color);
    }
 </script>

您可以在自己方便的时候随意修改，希望对您有所帮助。

jQuery Tabulator 插件：如何使行、列和单元格的颜色在前端可编辑

jQuery Tabulator Plugin: How to make colors editable on front end for rows, columns, and cells

jquery

web-frontend

tabulator