Yii2 GridView实现了直接在列表页面修改数据的方法

你什么意思？让我简单描述一下。边肖姐姐提出的要求是这样的。看，你列表页面的数据，我点击列表后就可以直接修改了。我再点一下太麻烦不方便了。这尼玛，这需求，真想给她一根棒槌。

好了，今天我们来看看如何使用gridview直接修改yii2中的列表，非常全面。我们尽力给出各种类型属性的例子。

第一步是部署yii2-grid。

使用composer安装yii2-grid。

composer require kartik-v/yii 2-grid ' @ dev '如果在安装过程中需要输出token，此时需要登录到您的github帐户，通过设置个人访问token获取token值，输入您的token值，然后按enter。

安装后，我们按如下方式配置模块，必须进行配置。

模块'=[' GridView '=[' class '=' \ kartik \ grid \ Module ']；如前所述，我们应该首先部署yii2-grid。下载并配置后，我们将打开视图文件，并参考以下代码修改您的文件。

//使用yii \ grid \ GridView//屏蔽掉yii的gridview在这里，用户我们刚安装的GridView使用kartik \ grid \ GridView？=GridView:widget([//.export'=false，' columns'=[//.],在上面的代码中，我们只需要添加一个' export'=false，您的原始gridview不需要更改。

然后我们安装yii 2-可编辑。

在composer require kar tik-v/yii 2-editable ' @ dev '安装后，我们将editable引入到刚刚配置的gridview文件中。

使用kartik \可编辑\可编辑；首先介绍textInput类型的修改，如下图。

从上图可以轻松看到编辑效果，直接粘贴代码。

['attribute'=' title '，' class '=' kar tik \ grid \ editable column '，]，但从上图可以看出，弹出修改并不是很方便，接下来我们来看看方便的操作方式。

['attribute'=' title '，' class '=' kar tik \ grid \ editable column '，' editable options '=[' aspopover '=false，]，]，您只需点击要修改的属性值即可直接修改。让我们看看会发生什么。

你可能注意到编辑框的宽度太小，操作不太方便。如果我们把输入改成textarea会更好吗？当然，您也可以尝试为当前单元格指定headerOptions设置宽度，并单击引用进行常见的gridview操作。

在图片上真的好用多了，直接粘贴代码。

['attribute'='title '，' class '=' kartik \ grid \ EditableColumn '，' editableOptions '=[' asPopover '=false，' inputType '=\ kartik \ Editable \ Editable : input _ textarea，' options '=[' row '=4，]，]，]，有些同学好奇就点了图片中的两个按钮，一个是重置按钮，另一个是应用按钮，这个重置还是不错的，所以很容易理解。然而，为什么点击应用按钮似乎一直在处理？别担心，从开始到现在，甚至从现在开始，我们将首先解释视图中的配置。事实上，当您单击这里的应用按钮时，您将异步请求后端，我们将在后面详细描述。

如果你的列是数字呢？简单，直接在输入中修改就可以了，但是如果想要下面截图中的效果，需要继续使用composer安装touch spin widget。

安装require kartik-v/yii 2-widget-touch pin ' @ dev '后，我们来看看如何修改数字类型的属性。

第三，关于下拉框类型的修改，我们假设字段是_delete值1表示2删除，数据清单的值是1 2，所以看一下渲染，然后我们粘贴代码。

左侧和右侧有两个属性。为了进行比较，左侧是不可修改的属性显示。代码如下。

['attribute'='is_delete '，' class '=' kartik \ grid \ EditableColumn '，' editableOptions '=[' inputType '=\ kartik \ editable \ editable : input _ drop _ LIST '，' asPopover'=false，' data '=article 3360: item alias(' is _ delete ')，]，' value '=function($ model){ return article :33: item alias(' is _ delete '，$ model-model})第四个，我们讲解下日期组件和时间组件，先截图看效果，然后在安装

//日期组件设计者需要kar tik-v/yii 2-widget-日期选择器' @ dev '//时间组件设计者需要kar tik-v/yii 2-widget-datetime picker ' *//日期组件['属性='created_at '，//这个设定表格的宽度//"标题选项"=["width"="150 px"]，" class "=" kartik \ grid \ EditableColumn "，" editableOptions "=[" input type "=\ kartik \ editable 3360: input _ DATE，' asPopover'=false，//这个设定我们组件的宽度内容选项'=[' style '=' width :180 px ']，' options '=[' plugin operations '=[//设定我们日期组件的格式格式='yyyy-mm-dd '，]，]，' format'=['date '，' Y-m-d']，]，//时间组件['属性='updated_at '，//' header options '=[' width '=' 150 px ']，' class '=' kartik \ grid \ EditableColumn '，' editableOptions '=[' inputType '=\ kartik \ editable \ editable :3360 input _ DATETIME '，' asPopover'=false，' content options '=[' style '=' width :250 px ']，]，基本上就这四中类型吧，视图配置好了，我们就需要配置控制器层进行异步操作了，我们来看看是怎么操作的。

声明：如果你的控件是在视图文章/索引内，那么接下来的操作你需要在文章控制器的指数内操作。

使用yii \助手\ Json公共函数actionIndex(){ $ search model=new article search()；$ data provider=$ search model-search(yii : $ app-request-query params)；if(yii : $ app-request-post(' Haseditable '){ $ id=yii : $ app-request-post(' EdItableKey ')；$ model=article : find one([' id '=$ id])；$ out=js :3360 ENCODE([' output '=' '，' message '=' '])；$ POST=当前($ _ POST[' Article '])；$ post=[' Article '=$ post]；if($ model-load($ post)){ $ model-save()；$ output=isset($ post[' title '])$ output=$ model-title；//其他的这里就忽略了，大致可参考这个title } $ out=js : encode([' output '=$ output，' message '=' '])；echo $ out返回；}返回$this-render('index '，['searchModel'=$searchModel，' dataProvider'=$dataProvider，])；}关于小编给大家介绍的Yii2 GridView实现列表页直接修改数据的方法就给大家介绍到这里，希望对大家有所帮助，如果大家想了解更多内容敬请关注我们网站。