• 谈谈yii2-GridView如何实现列表页直接修改数据


    作者:白狼 出处:http://www.manks.top/yii2_gridview_advanced.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    什么意思呢?我来简单的描述下,小编妹子提的需求是这样的,你看啊,你这列表页的数据,能不能我就直接在列表上进行点一下就直接修改啊,我再点进去修改多麻烦,太不方便了。这尼玛,这需求,是不是真想给她一棒槌。
    先声明哈,本文涉及大概6张图片效果,原文有图片可参考。
    ok,我们今天就来看看在yii2中如何去利用gridview实现列表上直接修改的功能,很全面哦,我们尽量各种类型的属性都给出实例。

    第一步,我们先来部署好yii2-grid
    利用composer安装yii2-grid

    composer require kartik-v/yii2-grid "@dev"

    如果你在安装的过程中需要让你输出Token,此时也就是需要你登录你的github帐号,通过setting>personal access tokens获取token值后输入你的token值,回车就好。
    安装好了之后,我们对module进行如下配置,这个是必须要配置的

    'modules' => [
       'gridview' =>  [
            'class' => 'kartikgridModule'
        ]
    ];

    前面我们说了,要先把yii2-grid部署好,下载配置好之后,我们打开视图文件并参考下面的代码修改你的文件

    // use yiigridGridView;
    //这里屏蔽掉yii的gridview,user我们刚刚安装的gridview
    use kartikgridGridView;
    <?= GridView::widget([
            //......
            'export' => false,
            'columns' => [
                //......
            ],
    ?>

    上面代码中我们只需要添加一项 'export' => false, 即可,你原先的gridview无需改动。

    然后我们安装yii2-editable

    composer require kartik-v/yii2-editable "@dev"

    安装好了后,我们在刚才配置好gridview的文件中引入editable
    use kartikeditableEditable;
    首先介绍下textInput类型的修改,图如下

    从上图中可以很轻松的看到编辑的效果,直接贴代码

    [
        'attribute' => 'title',
        'class'=>'kartikgridEditableColumn',
    ],

    但是从上图中我们也看到了,弹窗式修改呢不是很方便,我们接下来看看方便点的操作方式

    [
        'attribute' => 'title',
        'class'=>'kartikgridEditableColumn',
        'editableOptions'=>[
            'asPopover' => false,
        ],
    ],

    只需要对要修改的属性值点击一下可以直接进行修改,我们来看看这样会有什么问题

    也许你发现了,编辑框的宽度太小了,操作不是很方便,我们把input改为textarea会不会好点?试试看,当然你也可以给当前单元格指定headerOptions设定宽度,关于gridview常见操作可点击参考

    看图片上果然效果好很多,直接贴代码

    [
        'attribute' => 'title',
        'class'=>'kartikgridEditableColumn',
        'editableOptions'=>[
            'asPopover' => false,
            'inputType'=>kartikeditableEditable::INPUT_TEXTAREA,
            'options' => [
                'rows' => 4, 
            ],
        ],
    ],

    有同学很好奇的点了图中的两个按钮,一个是重置按钮,另一个是应用按钮,重置还好,很容易理解,但是嘛,为啥点了应用按钮就貌似一直在处理中的意思呢?别急别急,从一开始到现在乃至接下来,我们都将先讲解view中的配置,其实这里你点击应用按钮后也就异步请求了后端,我们后面详细的说道。

    如果你的column是数字类型的呢?简单嘛,input内直接修改就好了,可如果你想要下面截图中的效果,需要你继续继续利用composer安装touch spin widget

    require kartik-v/yii2-widget-touchspin "@dev"

    安装完毕后,我们看看数字类型的属性的修改方式

    第三种,关于下拉框式的修改,我们假定字段is_delete值1显示 2删除且数据库存的值是1 2这种数字类型,看效果图然后我们再贴代码

    继续阅读

  • 相关阅读:
    新博客安家
    Win32设置与获取cookies的几种方法
    Win32 操作剪切板
    搜索PEB结构获取Kernel32.dll基址
    动人心魄音乐 [身骑白马 徐佳莹]
    单例模式与静态方法的区别(转载)
    个人回顾
    关于引入每日站会的思考
    2017年的总结和回顾
    《知易行难》回顾
  • 原文地址:https://www.cnblogs.com/wwolf/p/5496934.html
Copyright © 2020-2023  润新知