Yii2的GridView实现拖动排序功能

发表于 更新于 分类于
本功能同样适用于其他的框架或者原生的程序（需要根据实际情况做修改）

1.本功能参考地址:https://www.cnblogs.com/xiuber/p/5945597.html
2.本功能必须先引入jquery和jquery-ui（注意引入先后顺序）

前端代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        ['class' => 'yii\grid\SerialColumn'],
        'uuid',
        [
            // 添加一个隐藏的uuid为要修改数据的主键方便获取(其实这个并没有用到只是以防万一的备选方案)
            'attribute' => 'uuid',
            'contentOptions' => [
                'class' => 'uuid',
            ],
            'headerOptions' => ['style'=>'display:none'],
            'contentOptions' => ['style'=>'display:none'],
        ],
        'name',
        [
            'attribute' => 'order_num',//这里是排序的字段
            'contentOptions' => [
                'class' => 'index',//向td中插入class方便后续修改排序的显示
            ],
        ],
    ],
]); ?>
<script type="text/javascript">
    var old_array = new Array();
    var paixu_array = new Array();
    $(document).ready(function(){
        var fixHelperModified = function(e, tr) {
            var $originals = tr.children();
            var $helper = tr.clone();
            $helper.children().each(function(index) {
                //获取宽度
                $(this).width($originals.eq(index).width())
            });
            return $helper;
        },
        updateIndex = function(e, ui) {
            $('td.index', ui.item.parent()).each(function (i) {
                //console.log($(this).parent().attr('data-key'));
                // 获取数据的主键data-key这个属性为GridView自动生成的 如果使用备选方案可以这么写console.log($(this).parent().find('td').eq(2).html());
                var uuid = $(this).parent().attr('data-key');
                // 将排序的顺序和主键存入数组
                paixu_array[i + 1] = uuid;
                // 修改表格的排序显示
                $(this).html(i + 1);
                // 调用方法将数据传入控制器
                save_paixu();
            });
        };
        // #paixu_div是包裹表格的一层div这里没有写
        $("#paixu_div tbody").sortable({
            helper: fixHelperModified,
            stop: updateIndex
        }).disableSelection();
    });
    function save_paixu() {
        // 获取有多少条数据
        var tr_num = $(".ui-sortable tr").length;
        tr_num = tr_num+1;
        if (paixu_array.length != tr_num){
            // 数组的长度要等于数据的长度+1(原因自己看数据的打印结果)
            return false;
        }else {
            if (paixu_array.toString() == old_array.toString()){
                // 比较旧的排序于新的排序有没有改变
                return false;
            }
        }
        // 这个判断没有用忘记删了
        if(1) {
            new__array = paixu_array;
            paixu_array = [];
            $.ajax({
                url: "ajax地址",
                data: {"paixu_array": new__array},
                type: "post",
                success: function (backdata) {
                    //console.log(backdata);
                    var res = jQuery.parseJSON(backdata);
                    if(res.success) {
                        //alert(res.message);
                        old_array = paixu_array;
                        paixu_array = [];
                    }else {
                        alert(res.message);
                    }

                }, error: function (error) {
                    console.log(error);
                }
            });
        }

    }
</script>
控制器代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
protected function findModel($id)
{
    if (($model = ModelName::findOne($id)) !== null) {
        return $model;
    } else {
        throw new NotFoundHttpException('The requested page does not exist.');
    }
}
public function actionSavePaixu(){
    if(Yii::$app->request->isAjax && isset($_POST['paixu_array'])) {
        $paixu_array = $_POST['paixu_array'];
        //事物
        $transation = Yii::$app->db->beginTransaction();
        try{
            foreach($paixu_array as $k => $v)
            {
                if ($k){
                    $model = $this->findModel($v);
                    $model->order_num = $k;
                    $model->save();
                }
            }
            // 执行事务
            $transation->commit();
            echo json_encode(array('success'=>true,'message'=>'修改成功'));
        }catch(\Exception $e){
            // 回滚
            $transation->rollBack();
            // 记录错误
            echo json_encode(array('success'=>FALSE,'message'=>'修改失败'));
        }
    }
}
以上代码仅供参考要注重理解含义举一反三，完全复制粘贴是不可能实现的