标签：function GridView 排序功能 tr paixu var array Yii2 uuid

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

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

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

标签：function,GridView,排序功能,tr,paixu,var,array,Yii2,uuid
来源： https://www.cnblogs.com/night-bright/p/11609986.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。