如何将选择下拉列表附加到 HTML 数据表？

Question

我创建了一个主要使用 HTML、CSS、PHP 和 MYSQL 的网站，并添加了一个带有角色的选择下拉列表供用户选择。我需要它出现在表中的每一行用户上。我已成功让 tabledit 在网站上运行，但我不确定如何将此下拉列表附加到角色列。

这就是 HTML 的设置方式

<body>
    <div class="panel panel-default">
        <!--        <div class="panel-heading">Sample Data</div>-->
        <div class="panel-body">
            <div class="table-responsive">
                <table id="sample_data" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Approval</th>
                        <th>Roles</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

<!--SELECT DROPDOWN LIST-->
<select id="test">
    <?php
    for ($a = 1; $a <= $count ; $a++){
        ?>

        <option value="1"><?php echo($roles[($a-1)]);?></option>

        <?php
    }
    ?>
</select>
<!--//////////////-->
</body>

<script>
    $(document).ready(function(){

        var dataTable = $('#sample_data').DataTable({
            "processing" : true,
            "serverSide" : true,
            "order" : [],
            "ajax" : {
                url:"FetchUserTable.php",
                type:"POST"
            }
        });

        $('#sample_data').on('draw.dt', function(){
            $('#sample_data').Tabledit({
                url:'ActionUserTable.php',
                dataType:'json',
                columns:{
                    identifier : [0, 'user_id'],
                    editable:[
                        [1, 'first_name'],
                        [2, 'last_name'],
                        [3, 'email'],
                        [4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
                        // [5, 'role_id']
                    ]
                },
                restoreButton:false,
                onSuccess:function(data, textStatus, jqXHR)
                {
                    if(data.action == 'delete')
                    {
                        $('#' + data.id).remove();
                        $('#sample_data').DataTable().ajax.reload();
                    }
                }
            });
        });

    });

Answer 1

您可以使用render option on the column definitions 来渲染您想要的任何内容。在渲染函数中，您可以访问行和整个数据对象。

$(function() {
  let $tbl = $('#sample_data'), $select = $('#select-box')

  let data = [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$3,120"
    ],
    [
      "Garrett Winters",
      "Director",
      "Edinburgh",
      "8422",
      "2011/07/25",
      "$5,300"
    ]
  ]

  $tbl.DataTable({
    data: data,

    columns: [
      null, null, null, null, {

        render: function(data, type, row, meta) {
          return $select.html() + `Use this to select "${data}"`
        }
      },
      {
        render: function(data, type, row, meta) {
          return $select.html() + `Use this to select "${data}"`
        }
      },
    ]
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css" />

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>


<body>
  <div class="panel panel-default">
    <!--        <div class="panel-heading">Sample Data</div>-->
    <div class="panel-body">
      <div class="table-responsive">
        <table id="sample_data" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>ID</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Email</th>
              <th>Approval</th>
              <th>Roles</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div style="display:none;" id="select-box">
    <select>
      <option>Role 1</option>
    </select>
  </div>
</body>

Answer 2

它不是一个合适的解决方案，但它会解决您的问题。首先选择你的角色 html

var emelnt = $('#test');
//now append to table td
$('table tbody td:nth-child(6)').html(emelnt);
//you can also use a function to first get role id from table each row then create your select here in js and the append it to html so then your roles drop down will be selected.

Answer 3

我不确定您使用的是DataTable 还是Tabledit，您似乎出于某种原因将它们混合在一起。我不确定这是否是一个好主意。我建议选择一个而不是另一个。本回答重点关注Tabledit。

由于该表本质上是由Tabledit 创建和管理的，因此您应该在那里提供数据。您目前已经使用 select 进行管理员审批：

[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']

您的角色选择可以以类似的方式创建。由于$roles 的结构不是共享的，我假设它是一个带有字符串值的数组。首先在您的<script> 标签中创建一个变量roles。

const roles = <?php echo json_encode($roles); ?>;

然后将该列添加到columns.editable 设置中：

[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}'],
[5, 'role', JSON.stringify(roles)]

---

您可能必须转换 $roles 的结构才能创建正确的 JSON 输出。以下是一些示例结果：

示例 #1

// assumed <?php echo json_encode($roles); ?> output
const roles = ["role A", "role B"];

创建：

<option value="0">role A</option>
<option value="1">role B</option>

示例 #2

// assumed <?php echo json_encode($roles); ?> output
const roles = {"role_a": "role A", "role_b": "role B"};

创建：

<option value="role_a">role A</option>
<option value="role_b">role B</option>

Answer 4

看看如何在datatables.net中添加一行...

   var t = $('#example').DataTable();

       t.row.add( [
           counter +'.1',
           counter +'.2',
           counter +'.3',
           counter +'.4',
           counter +'.5'
       ] ).draw( false );

因此，在您的情况下，在 onSuccess:function(data, textStatus, jqXHR) 内，我们应该能够将 $('#sample_data').DataTable().ajax.reload(); 更改为...。

var t = $('#sample_data').DataTable();
t.row.add([
    $('#test').html()
]).draw(false);
t.ajax.reload();

这基本上是在做你的代码之前所做的事情，但现在你也在DataTable()上调用.row.add()。