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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
3种vue组件的书写形式
Nov 29 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
nodejs读取memcache示例分享
2014/01/02 NodeJs
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
详解Python中的四种队列
2018/05/21 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python函数参数操作详解
2018/08/03 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
Python any()函数的使用方法
2019/10/28 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
五年级语文教学反思
2014/01/30 职场文书
中青班党性分析材料
2014/02/16 职场文书
感恩教育月活动总结
2014/07/07 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript