Yii2.0框架 列表页 通过 textInput 输入框失去焦点 ajax排序功能

Yii2.0框架 列表页 通过 textInput 输入框失去焦点 ajax排序功能

下面已分类管理为例（最终效果）

1 视图部分

<?= TreeGrid::widget([
        'dataProvider' => $dataProvider,
        'keyColumnName' => 'id',
        'parentColumnName' => 'pid',
        'parentRootValue' => '0', 
        'pluginOptions' => [
        ],
        'columns' => [
            'id',
            'pid' => [
                'attribute' => 'pid',
                'value' => function ($model) {
                    return $model->pid == 0 ? '一级分类' : '二级分类';
                }
            ],
            'title',
            [
                'attribute' => 'sort',
                'label' =>'排序',
                'contentOptions' => ['style' => 'white-space: normal;', 'width' => '100px'],
                'content'=>function ($model){
                    return Html::textInput('sorts',$model->sort,['style'=>'width:100px;','class'=>'sortpro']);
                }
            ],
            'status' => [
                'attribute' => 'status',
                'value' => function ($model) {
                    return BaseParam::CodeHelper(BaseParam::$cateStatus, $model->status);
                }
            ],
            //功能
            [
                'class' => 'frontend\modules\common\models\ActionJsColumn',
                'template' => '{update}{cate-status}',
            ]
        ]
    ]); ?>

1、在columns里添加一下代码，复制上方代码段即可，样式可自行修改

2、js部分代码,验证规则可自行修改

<script>
    $(function () {
        $(document).on('blur', '.sortpro', function () {
            var id = $(this).closest('tr').data('key');
            var sort = $(this).val();
            if (!(/(^[1-9]\d*$)/.test(sort))) {
                alert("输入的不是正整数");
                location.reload()
                return false;
            }
            if(sort.length > 3){
                alert("输入值不能大于3位");
                location.reload()
                return false;
            }
            $.ajax({
                type : "get",    //请求类型
                url : "/resource/resource-classes/updatesort?id="+id+"&sort="+sort,//请求的 URL地址
                dataType : "json",//返回的数据类型
                success: function (data) {
                    layer.msg(data['data'], {icon: 1,time:500},function () {
                        location.reload()
                    });
                },
                error:function (data) {
                    alert(data.result);
                }
            });
        });
    })
</script>

2 控制器部分

//排序
    public function actionUpdatesort()
    {
        $id = (int)Yii::$app->request->get('id');//接收所排序的id
        $sort = (int)Yii::$app->request->get('sort');//获取sort值
        $data = ResourceClasses::find()->where(['id' => $id])->one();
        $data->sort = $sort;
        //不验证数据更新操作 false ,这里是Yii框架的属性，不需要验证数据字段时传false,有的时候保存不进数据库，可以传false，或者在模型中添加验证规则
        if ($data->save(false)) {
            return json_encode(['data' => '排序成功~~']);
        }
    }