Méthode TP5 pour implémenter le tri par glissement de table et enregistrer dans la base de données (code joint)

Le contenu de cet article concerne la méthode de glisser et de trier les tableaux et de les enregistrer dans la base de données dans TP5 (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. à vous.

J'ai modifié un ancien projet il y a quelque temps, et le client m'a demandé de réorganiser les tableaux par titres professionnels de médecins. Parce que le projet du client est le système du personnel de l'hôpital. Considérant qu'il y a des milliers de personnes dans tout l'hôpital, il serait fatigant de les disposer une à une selon les exigences du client... Heureusement, à ce moment-là, je me suis souvenu que je peut utiliser le plug-in jqueryUi pour réaliser cette fonction. Cependant, le plug-in jqueryUi ne peut trier que sur la page en cours et il reviendra à son état d'origine dès que la page sera actualisée. J'ai donc étudié comment faire glisser le tri et enregistrer définitivement le tri dans la base de données. Après avoir travaillé dessus pendant une heure, j'ai finalement réussi. Enregistrez-le ici. Si des étudiants ont de meilleures idées, n'hésitez pas à m'éclairer
Téléchargez d'abord le plug-in jqueryUi. Vous pouvez le rechercher en ligne et l'ignorer ici.
Une fois le téléchargement terminé, importez la page. Ajoutez simplement une ligne de code :

<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#sort tbody").sortable();
});
</script>

Il est à noter que le sélecteur doit sélectionner le corps de la table De nombreux paramètres de configuration peuvent être ajoutés à la méthode de tri. , consultez spécifiquement la documentation de ce plugin. De même, vous pouvez effectuer de nombreuses recherches sur Internet, comme des tutoriels pour débutants. Désormais, nous implémentons le tri uniquement sur la page actuelle, mais la base de données est toujours la même. Vous trouverez ci-dessous ma méthode pour enregistrer le tri dans la base de données. Auparavant, mon tri était basé sur la valeur ID de la table de données, qui était dans l'ordre inverse par défaut. Je peux désormais ajouter un champ de tri, ou champ XX, à la table de données pour représenter le numéro trié. Une fois chaque glissement terminé, utilisez la fonction de mise à jour intégrée de ce plug-in pour transmettre l'ID de chaque ligne triée en arrière-plan via ajax. Après l'avoir reçu dans le contrôleur d'arrière-plan, parcourez et modifiez la valeur de tri des données de la première ligne par la valeur clé + 1.
Par exemple, une fois le tri terminé, la valeur d'ID de données de la première ligne est 8. , et la valeur de l'ID de données de la deuxième ligne est 8. L'ID est 6 et la troisième ligne est 2. Lorsque le parcours est reçu en arrière-plan, les données avec l'ID 8 doivent être parcourues en premier, donc la valeur clé des données dans foreach doit être 0, c'est-à-dire que $k vaut 0, alors son tri est modifié en $k+1, ce qui signifie que 0+1 est égal à 1. De la même manière, le tri des secondes données est $k +1, qui vaut 2, et ainsi de suite. Organisez-le ensuite dans un ordre positif en fonction de la valeur de tri.
Ce qui suit est le code frontal :

$("#sort tbody").sortable({
        update:function () {
            var idArr = [];
            $("input[name='id']").each(function () {//遍历每一行的ID值
                idArr.push($(this).val());//把拍完序的数据ID依次推入数组
            })
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "__URL__/staff/pinyong",
                data:{idArr:idArr},
                success:function (data) {
                    layer.msg(data['msg'],{icon:1,time:2000});
                },
                error:function (request) {
                    console.log(request);
                }
            });
        }
    });

Ceci est un ancien projet, écrit par TP3, donc je n'ai pas utilisé la méthode d'écriture TP5. TP5 n'a besoin que de changer l'adresse URL en {:url (...)} fera l'affaire. : (C'est également écrit dans TP3. Dans TP5, il suffit d'utiliser la méthode model pour obtenir le modèle de table, puis de changer la méthode de sauvegarde)

  public function pinyong(){
   if (IS_POST) {
        //前台post方式传数组的话，后台必须指定接收格式才能接收，否则会报错
        $arr = I('idArr/a');
        foreach ($arr as $k => $v) {
            M('pinyong')->where('id','eq',$v)->save(['sort'=>$k + 1]);
        }
        $this->success('排序成功');
    } else {
        $this->display();
    }
}

Vidéo du didacticiel JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!