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

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

我已经创建了一个主要使用HTML，CSS，PHP和MYSQL的网站，并且添加了一个带有用户角色的select下拉列表供用户选择。我需要它在表中用户的每一行上。我已经成功地使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();
                    }
                }
            });
        });

    });

解决方法

您可以使用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","8422","2011/07/25","$5,300"
    ]
  ]

  $tbl.DataTable({
    data: data,columns: [
      null,null,{

        render: function(data,type,row,meta) {
          return $select.html() + `Use this to select "${data}"`
        }
      },{
        render: function(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>

看看如何在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();

这基本上可以完成您的代码之前的工作，但是现在您还可以在.row.add()上调用DataTable()。

这不是适当的解决方案，但可以解决您的问题。首先选择您的角色html

paste0(emo::ji("sun"),"Temperature")

我不确定您是使用DataTable还是Tabledit，由于某种原因，您似乎在混用它们。我不确定这是否是一个好主意。我建议选择一个。这个答案集中在Tabledit上。

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

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

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

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

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

[4,"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>

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

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

解决方法

相关推荐