亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

TP5實現(xiàn)表格拖動排序并保存到數(shù)據(jù)庫的方法（附代碼）

來源：不言 發(fā)布時間：2019-03-20 14:55:39 閱讀量：982

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于TP5實現(xiàn)表格拖動排序并保存到數(shù)據(jù)庫的方法（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

前一段時間修改了一個舊的項目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因為客戶的這個項目是醫(yī)院的人事系統(tǒng)，考慮到整個醫(yī)院有幾千號人，要是一個個按客戶的要求排得累壞我的小腰...幸好這時我想起了可以利用jqueryUi插件實現(xiàn)這個功能。但是jqueryUi插件只能在當前頁面上排序，頁面一刷新又恢復(fù)原樣了。于是我就研究如何拖動排序并永久把排序保存到數(shù)據(jù)庫中，做了1小時，做出來了。這里記錄一下，如果有同學(xué)有更好的思路，請不吝賜教..
首先下載jqueryUi插件，網(wǎng)上一搜就要，這里略過。
下載完成后，引入頁面。加入一行代碼就可以:

1

2

3

4

5

6

<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

  $(document).ready(function(){

    $("#sort tbody").sortable();

});

</script>

需要注意的是，選擇器應(yīng)該選中表格的tbody. sort方法中可以添加很多配置的參數(shù)，具體的可以查看這款插件的文檔。同樣網(wǎng)上一搜一大堆，比如菜鳥教程就有?，F(xiàn)在只是實現(xiàn)了在當前頁面排序，但數(shù)據(jù)庫還是老樣子。下面是我的把排序保存到數(shù)據(jù)庫的方法。之前我的排序是按照數(shù)據(jù)表的ID值，默認倒序的，現(xiàn)在我可以給數(shù)據(jù)表中加一個sort字段，或者XX字段，代表排序的數(shù)字。 在每次拖動完成后，利用這款插件內(nèi)置的update函數(shù)，通過ajax方式把排序完成的每個行的ID傳到后臺。在后臺控制器里接收后，遍歷，把排在第一行的數(shù)據(jù)的sort值改為鍵值+1.
比如排序完成后第一行的數(shù)據(jù)ID值為8,第二行的數(shù)據(jù)ID為6，第三行為2，后臺接收遍歷時，ID為8的數(shù)據(jù)肯定是第一個遍歷的，那該數(shù)據(jù)在foreach里面的鍵值肯定是0，即$k為0，那把它的排序改為$k+1即為0+1等于1.同理，第二個數(shù)據(jù)的sort就為$k+1即為2，以此類推.然后按sort值正序排列即可.
下面是前臺代碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

$("#sort tbody").sortable({

        update:function () {

            var idArr = [];

            $("input[name='id']").each(function () {//遍歷每一行的ID值

                idArr.push($(this).val());//把拍完序的數(shù)據(jù)ID依次推入數(shù)組

            })

            $.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);

                }

            });

        }

    });

這個是一個老項目，TP3寫的，所以我沒用TP5的寫法，TP5只需要把url地址改為{:url(...)}的寫法就行.

后臺代碼:(也是TP3的寫法,TP5只要用model方法取表模型,然后再改改save方法就可以)

1

2

3

4

5

6

7

8

9

10

11

12

  public function pinyong(){

   if (IS_POST) {

        //前臺post方式傳數(shù)組的話，后臺必須指定接收格式才能接收，否則會報錯

        $arr = I('idArr/a');

        foreach ($arr as $k => $v) {

            M('pinyong')->where('id','eq',$v)->save(['sort'=>$k + 1]);

        }

        $this->success('排序成功');

    } else {

        $this->display();

    }

}

這樣,每次前臺拖動排序都會觸發(fā)update函數(shù)，然后就會把新排序的ID值用ajax傳到后臺，后臺接收后，按順序重新修改sort值就可以.


分享：
評論：
你還沒有登錄，請先

熱門文章

    推薦文章