TP5 method to implement table drag sorting and save to database (code attached)

The content of this article is about the method of dragging and sorting tables and saving them to the database in TP5 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

I modified an old project some time ago, and the client asked me to reorder the tables by doctor’s professional title. Because the client's project is a hospital personnel system, and considering that there are thousands of people in the entire hospital, it would be tiring to arrange them one by one according to the client's requirements... Fortunately, at this time, I remembered that I can use the jqueryUi plug-in to achieve it. this function. However, the jqueryUi plug-in can only sort on the current page, and it will return to its original state as soon as the page is refreshed. So I studied how to drag sorting and permanently save the sorting to the database. After working on it for an hour, I finally got it done. Record it here. If any students have better ideas, please feel free to enlighten me.
First download the jqueryUi plug-in. You can search it online and skip it here.
After the download is completed, introduce the page. Just add a line of code:

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

It should be noted that the selector should select the tbody of the table. Many configuration parameters can be added to the sort method. For details, you can view this Documentation for this plug-in. Similarly, you can search a lot on the Internet, such as novice tutorials. Now we only implement sorting on the current page, but the database is still the same. Below is my method of saving the sorting to the database. Previously, my sorting was based on the ID value of the data table, which was in reverse order by default. Now I can add a sort field, or XX field, to the data table to represent the sorted number. After each drag is completed, use the built-in update function of this plug-in to transmit the ID of each sorted row to the background through ajax. After receiving it in the background controller, traverse and change the sort value of the data in the first row to the key value 1.
For example, after the sorting is completed, the data ID value of the first row is 8, and the data ID value of the second row is 8. is 6, and the third line is 2. When traversing is received in the background, the data with ID 8 must be traversed first, then the key value of the data in foreach must be 0, that is, $k is 0, then sort it Change to $k 1 equals 0 and 1 equals 1. In the same way, the sort of the second data is $k 1 equals 2, and so on. Then arrange it in positive order according to the sort value.
The following is the front desk Code:

$("#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);
                }
            });
        }
    });

This is an old project, written by TP3, so I didn’t use the TP5 writing method. TP5 only needs to change the url address to {:url(...)} The writing method is fine.

Backend code: (It is also the writing method of TP3. In TP5, you only need to use the model method to get the table model, and then change the save method)

  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();
    }
}

In this way, every time The update function will be triggered every time the foreground is dragged and sorted, and then the newly sorted ID value will be transmitted to the background using ajax. After the background receives it, the sort value can be modified in order.

This article ends here It’s all over. For more other exciting content, you can pay attention to the JavaScript Tutorial Video column on the PHP Chinese website!

The above is the detailed content of TP5 method to implement table drag sorting and save to database (code attached). For more information, please follow other related articles on the PHP Chinese website!