如何通过选中的复选框获取用户 ID 并与表单提交一起发送

Question

我创建了一个 JSFiddle https://jsfiddle.net/cga_2019/ubjcx6ms/41/ 代表用户和他们的 ID。我在 Rails 7 应用程序中将 Tabulator 与 StimulusJS 结合使用。

我想最终从每个已选中的复选框中获取用户 ID，并在提交表单时提交这些用户 ID。

如何将用户 ID 值添加到复选框？我如何获取已检查的用户 ID 并提交它们？

感谢您的帮助。克里斯

HTML

<html>
  <head>
  <link href="https://unpkg.com/tabulator-tables@5.1.8/dist/css/tabulator.min.css" rel="stylesheet">
 <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.1.8/dist/js/tabulator.min.js"></script>
  </head>

<body>

  <input type="hidden" id="projId" name="projId" value="7">

  <div data-controller="tabulator">
    <div data-tabulator-target="table"></div>
  </div>
</body>
</html>

JavaScript

import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
const application = Application.start()

application.register("tabulator", class extends Controller{
  static get targets() {
    return ["table"]
  }
  
  connect() {
    // this.tableTarget.innerHTML = "Put a tabulator table here!"

    this.tabledata = [
      {id:1, first_name:"Oli", last_name:"Bob", netid:"obob"},
      {id:2, first_name:"Mary", last_name:"May", netid:"mmay"},
      {id:3, first_name:"Christine", last_name:"Lobowski", netid:"clobowski"},
      {id:4, first_name:"Brendon", last_name:"Philips", netid:"bphilips"},
      {id:5, first_name:"Margret", last_name:"Marmajuke", netid:"mmarmajuke"},
      {id:6, first_name:"John", last_name:"Wayne", netid:"jwayne"},
    ];

    this.table = new Tabulator(this.tableTarget, {
      //height: 205,
      pagination: true,
      paginationSize: 3,
      data: this.tabledata,
      // ajaxURL: "http://localhost:3000/users_projects/users",
      layout: "fitColumns",
      columns: [
        {formatter:"rowSelection",titleFormatter:"rowSelection",hozAlign:"center",
          headerSort:false,width:50,cellClick:function(e, cell){cell.getRow().toggleSelect();}},
        {title:"ID", field:"id", width:50},
        {title:"Last Name", field:"first_name", width:150},
        {title:"First Name", field:"last_name"},
        {title:"NetID", field:"netid"},
      ],
    })
  }
  
})

Answer 1

使用table.getSelectedData()

Official Docs

工作JSFiddle

如何通过选中的复选框获取用户 ID 并与表单提交一起发送

How to obtain user ids via checked checkboxes and send with Form submission

tabulator

stimulusjs

HTML

JavaScript