Question

我正在动态地将信息填充到数据表中，我在每行上添加了两个单选按钮，分别表示是和否。我无法一次在每一行上选择一个单选按钮，整个表中只勾选了一个按钮。

我正在使用单选按钮（是或否），我正在逐行收集信息并将其保存在末尾。

let cTraining = {};
cTraining.bindDataTable = function(trainingDataModelDisplay) {
  $('#traineeProgramsHistoryReassign').dataTable().fnDestroy();
  var customError = "";
  if (typeof(trainingDataModelDisplay) == "string") {
    customError = trainingDataModelDisplay;
    trainingDataModelDisplay = [];
  }
  var options = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }; //, hour: 'numeric', minute: 'numeric', second: 'numeric'
  var programUserTable =
    $('#traineeProgramsHistoryReassign').dataTable({
      "pageLength": 25,
      scrollX: true,
      "ordering": false,
      //"searching": false,
      "order": [], //Initial no order.
      language: {
        paginate: {
          next: '<i class="fa fa-arrow-right"></i>', // or '→'
          previous: '<i class="fa fa-arrow-left"></i>', // or '←'
        },
        "emptyTable": "No data available may be because there are no program(s) assigned!!"
      },
      columns: [

        {
          data: 'FLSP_NAME',
          name: 'FLSP_NAME',
          title: 'Trainee Name',
          width: 50
        },
        {
          data: 'PROGRAM_NAME',
          name: 'PROGRAM_NAME',
          title: 'Program Name',
          width: 50
        },
        {
          data: 'REASSIGN_YES',
          title: 'Reassign Yes',
          width: 40,
          render: function(data, type, full, meta) {
            if (data == true) {
              return '<input id="chk1" name="radio1" type = \"radio\" checked value="' + data + '">';
            } else {
              return '<input id="chk1" name="radio1" type = \"radio\" value="' + data + '">';
            }
          }
        },
        {
          data: 'REASSIGN_NO',
          title: 'Reassign No',
          width: 40,
          render: function(data, type, full, meta) {
            if (data == true) {
              return '<input id="chk2" name="radio1" type = \"radio\" checked value="' + data + '">';
            } else {
              return '<input id="chk2" name="radio1" type = \"radio\" value="' + data + '">';
            }
          }
        },
      ],
      rowsGroup: ['FLSP_NAME:name', 'PROGRAM_NAME:name'],
      data: trainingDataModelDisplay

    });

  $('#traineeProgramsHistoryReassign tbody').on('change', '#chk1',
    function() {
      // If checkbox is not checked
      var data =
        programUserTable.api().row($(this).parents('tr')).data();
      data.REASSIGN_YES = this.checked

    });


  $('#traineeProgramsHistoryReassign tbody').on('change', '#chk2',
    function() {
      // If checkbox is not checked
      var ReassignNoProgUser = {};
      var data =
        programUserTable.api().row($(this).parents('tr')).data();
      data.REASSIGN_NO = this.checked

    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

我想为每行分组单选按钮，以便每次可以选择一个单选按钮。

谢谢。

Answer 1

我有相同的查询。这就是我使用@mplungjan的建议解决的方法。希望这会帮助处于同样困境的其他人。

<table class="table table-striped datatable" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th rowspan="2">Threat</th>
            <th colspan="2">Risk Scale</th>
        </tr>
        <tr>
            <th>Low</th>
            <th>Medium</th>
            <th>High</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var risk in Model)
        {
            <tr>
                <td>@ed.Threat.Name</td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="1"></td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="2"></td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="3"></td>
            </tr>
        }
    </tbody>
</table>

如何为数据表中的每一行创建单选按钮组？

1 个答案: