如何通过检查复选框获取用户ID并随表格提交发送

发布于 2025-01-19 19:14:10 字数 2652 浏览 4 评论 0原文

我创建了一个jsfiddle https://jsfiddle.net/cga_net/cga_2019/cga_2019/ubjcx6mms/41/41/41/41/41/41/41/41/41/41/ 代表用户及其ID。我在Rails 7应用程序中使用刺激器的制表器。

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

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

谢谢您的任何帮助。 Chris

HTML

<html>
  <head>
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
 <script type="text/javascript" src="https://unpkg.com/[email protected]/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"},
      ],
    })
  }
  
})

原文

I have created a JSFiddle https://jsfiddle.net/cga_2019/ubjcx6ms/41/ representing users and their ids. I am using Tabulator with StimulusJS in a Rails 7 application.

I would like to ultimately grab user ids from each checkbox that has been checked and submit those user ids on form submission.

How do I add user id values to the checkboxes? How would I grab the checked user ids and submit them?

Thank you for any help.
Chris

HTML

<html>
  <head>
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
 <script type="text/javascript" src="https://unpkg.com/[email protected]/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"},
      ],
    })
  }
  
})

分享到QQ

分享到微博