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 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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/04/30 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python回调函数的使用方法
2014/01/23 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
大四学生毕业自荐信
2013/11/07 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
异地年检委托书范本
2014/09/24 职场文书
公务员政审材料
2014/12/23 职场文书
聚会通知怎么写
2015/04/23 职场文书
收入证明申请书
2015/06/12 职场文书
如何写好活动总结
2019/06/21 职场文书
导游词之太原天龙山
2020/01/02 职场文书