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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
AngularJS实现路由实例
Feb 12 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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高效率写法(详解原因)
2013/06/20 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP框架性能测试报告
2016/05/08 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
简单的js表格操作
2016/09/24 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
python 实现端口扫描工具
2020/12/18 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
门卫岗位安全职责
2013/12/13 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server