bootstrap modal+gridview实现弹出框效果


Posted in Javascript onAugust 15, 2017

项目需要在gridview的表单信息中点击更新,弹出表单进行操作,不需要跳转。

bootstrap modal+gridview实现弹出框效果

1.在girdview中加入更新操作按钮用来调用modal弹窗

'buttons' => [
  'update' => function ($url, $model, $key) {
       return Html::a('<span class="glyphicon glyphicon-pencil"></span>', '#', [
          'data-toggle' => 'modal',
          'data-target' => '#update-modal',
          'class' => 'data-update',
          'data-id' => $key,
          'title'=>'更改状态',
          ]);
        },
      ],

2.gridview的头部创建modal弹窗样式

<?php
use yii\bootstrap\Modal;//模态弹出框
Modal::begin([
  'id' => 'update-modal',
  'header' => '<h4 class="modal-title">更改状态</h4>',
  'footer' => '<a href="#" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">Close</a>',
]); 
Modal::end();
?>

3.gridview中ajax

<?php    
$requestUpdateUrl = Url::toRoute('update');
$updateJs = <<<JS
  $('.data-update').on('click', function () {
    $.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
      function (data) {
        $('.modal-body').html(data);
      } 
    );
  });
JS;
$this->registerJs($updateJs); 
?>

4.控制器update方法

public function actionUpdate($id)
{
  $model = Order_packet::findOne($id);
  $model->setScenario('update');//指定场景,防止时间等变量同时被更改
  if ($model->load(Yii::$app->request->post()) && $model->save()) {
    return $this->redirect(['index']);
  } else {
    return $this->renderAjax('update', [  //这里需要渲染update模版,要在view中写update
      'model' => $model,
    ]);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
js几个验证函数代码
Mar 25 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
vue实现点击图片放大效果
Aug 15 #Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 #jQuery
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 #Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 #jQuery
Vue组件通信实践记录(推荐)
Aug 15 #Javascript
js移动端事件基础及常用事件库详解
Aug 15 #Javascript
js实现移动端轮播图效果
Dec 09 #Javascript
You might like
php中批量替换文件名的实现代码
2011/07/20 PHP
linux iconv方法的使用
2011/10/01 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php返回json数据函数实例
2014/10/09 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
详解js闭包
2014/09/02 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
Python内置函数——__import__ 的使用方法
2017/11/24 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
python中字符串内置函数的用法总结
2018/09/13 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
Shell编程面试题
2012/05/30 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
数据员岗位职责
2013/11/19 职场文书
工作交流会欢迎词
2014/01/12 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
南京导游词
2015/02/03 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle