Yii2的GridView实现拖动排序功能

Posted 2020-11-15 night-bright

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

1.本功能参考地址:https://www.cnblogs.com/xiuber/p/5945597.html

2.本功能必须先引入jquery和jquery-ui（注意引入先后顺序）

前端代码:

<?= 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>

控制器代码:

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\'=>\'修改失败\'));
        }
    }
}

以上代码仅供参考要注重理解含义举一反三，完全复制粘贴是不可能实现的