2

我创建了一个主要使用 HTML、CSS、PHP 和 MYSQL 的网站。我已成功让 tabledit 在该网站上工作，但我不确定如何添加下拉复选框的功能。我需要它显示为选中用户是否具有角色以及未选中时更新 MySQL 表。我试过阅读代码，但对 jquery、ajax 或 javascript 并不熟悉。下拉复选框可以用这个插件实现吗？

修改用户.php

<html>
<head>
    <title>Modifying Users</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
    <style>
        #sample_data tr > *:nth-child(1) {
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h3 align="center">Modifying Users</h3>
    <br />
    <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>
<br />
<br />
</body>
</html>

<script type="text/javascript" language="javascript" >
    $(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'] // THIS SHOULD BE AN EDITABLE DROPDOWN CHECKBOX
                    ]
                },
                restoreButton:false,
                onSuccess:function(data, textStatus, jqXHR)
                {
                    if(data.action == 'delete')
                    {
                        $('#' + data.id).remove();
                        $('#sample_data').DataTable().ajax.reload();
                    }
                }
            });
        });

    });
</script>

取用户表.php

<?php
//FetchUserTable.php

require_once("SetDBConnection.php");

$column = array("user_id", "first_name", "last_name", "email", "admin_approved", "role_id");

$query = "SELECT users.user_id, users.first_name,
       users.last_name, users.email,
       users.admin_approved,
       users_roles.role_id
FROM users, users_roles GROUP BY user_id;";

if(isset($_POST["search"]["value"]))
{
    $query .= '
 WHERE first_name LIKE "%'.$_POST["search"]["value"].'%" 
 OR last_name LIKE "%'.$_POST["search"]["value"].'%" 
 OR email LIKE "%'.$_POST["search"]["value"].'%"
 OR admin_approved LIKE "%'.$_POST["search"]["value"].'%"
 OR role_id LIKE "%'.$_POST["search"]["value"].'%"
 ';
}

if(isset($_POST["order"]))
{
    $query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
    $query .= 'ORDER BY user_id ASC ';
}
$query1 = '';

if($_POST["length"] != -1)
{
    $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$statement = $connect->prepare($query);

$statement->execute();

$number_filter_row = $statement->rowCount();

$statement = $connect->prepare($query . $query1);

$statement->execute();

$result = $statement->fetchAll();

$statement->closeCursor(); // Added

$data = array();

foreach($result as $row)
{
    $sub_array = array();
    $sub_array[] = $row['user_id'];
    $sub_array[] = $row['first_name'];
    $sub_array[] = $row['last_name'];
    $sub_array[] = $row['email'];
    $sub_array[] = $row['admin_approved'];
    $sub_array[] = $row['role_id'];
    $data[] = $sub_array;
}

function count_all_data($connect)
{
    $query = "SELECT users.user_id, users.first_name,
       users.last_name, users.email,
       users.admin_approved,
       users_roles.role_id
FROM users, users_roles GROUP BY user_id;";
    $statement = $connect->prepare($query);
    $statement->execute();
    return $statement->rowCount();
}

$output = array(
    'draw'   => intval($_POST['draw']),
    'recordsTotal' => count_all_data($connect),
    'recordsFiltered' => $number_filter_row,
    'data'   => $data
);

echo json_encode($output);
4

0 回答 0