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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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
图解上海144收音机
2021/03/02 无线电
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
Python基础之getpass模块详细介绍
2017/08/10 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
质检部部长职责
2013/12/16 职场文书
委托书的格式
2014/08/01 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
民间借贷协议书范本
2014/10/01 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
被委托人身份证明
2015/08/07 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers