fastadmin实现弹窗

一：点击列表某按钮实现弹窗

如下图：

1、第一步：增加方法，如addname()

    /*** 添加字段和注释* @param unknown $ids* @return mixed*/public function addname($ids = NULL){if (Request::instance()->isPost()){$database = config('database.database');$prefix = config('database.prefix');$table_name = 'message_data';$param = Request::instance()->param("row/a");$field = empty($param['field']) ? $this->error('字段名称不能为空') : $param['field'];$comment = empty($param['comment']) ? $this->error('字段说明不能为空') : $param['comment'];$sql = "select count(*) from information_schema.columns where TABLE_SCHEMA = '$database' and table_name = '$prefix$table_name' and column_name = '$field'";$result = Db::query($sql);//读操作if ($result[0]['count(*)']>=1) $this->error('字段已存在');$sql = "alter table ".$prefix.$table_name." add ".$field." varchar(255) comment'$comment'";$result = Db::execute($sql);//写操作if ($result==2)$this->success('字段添加成功');$this->success('字段添加失败');}return $this->fetch();}

2、第二步：增加对应的html文件，如addname.html，需要注意的是 id="addname-form"

<form id="addname-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""><div class="form-group"><label for="c-field" class="control-label col-xs-12 col-sm-2">{:__('字段名称')}:</label><div class="col-xs-12 col-sm-8"><input id="c-field" data-rule="required" class="form-control" name="row[field]" type="text" value=""></div></div><div class="form-group"><label for="c-comment" class="control-label col-xs-12 col-sm-2">{:__('字段说明')}:</label><div class="col-xs-12 col-sm-8"><textarea id="c-comment" class="form-control" name="row[comment]"></textarea></div></div><div class="form-group layer-footer"><label class="control-label col-xs-12 col-sm-2"></label><div class="col-xs-12 col-sm-8"><button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button><button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button></div></div>
</form>

3、第三部：在对应的文件中添加如下代码

{field: 'id', title: __('按钮'), table: table, buttons: [{name: 'name1', text: '查看字段', title: '查看字段', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'zhuhai/msgcat/getDbColumnComment', callback:function(data){}},{name: 'addname', text: '添加字段', title: '添加字段', icon: 'fa fa-list', classname: 'btn btn-xs btn-primary btn-dialog', url: 'zhuhai/msgcat/addname'},//{name: 'name2', text: '导出数据', title: '导出数据', icon: 'fa fa-flash', classname: 'btn btn-xs btn-success btn-ajax', url: 'zhuhai/msgcat/outExcel', success:function(data, ret){}, error:function(){}},{name: 'name3', text: '管理分组信息', title: '管理分组信息', icon: 'fa fa-flash', classname: 'btn btn-xs btn-info btn-addtabs', url: '/admin/zhuhai/msgdata?ref=addtabs'}], operate:false, formatter: Table.api.formatter.buttons},

如图：

4、第四步：绑定操作事件

addname: function () {Controller.api.bindevent();
},

如下图：

二：使用fastadmin里的方法普通弹窗【同上】

在对应的js文件的代码：

1、在index.html中添加如下代码

<a href="appletls/user/out"  class="btn btn-danger btn-import btn-dialog" data-title="导出测评数据"   data-multiple="false" initialized="true" style="position: relative; z-index: 1;"><i class="fa fa-download"></i> 导出数据 </a>

2、在Table.api.init()里面添加

setting_url: 'appletls/user/setting',

3、绑定方法

setting: function () {Controller.api.bindevent();
},

view代码：

<form id="setting-form" class="form-horizontal form-ajax" role="form" data-toggle="validator" method="POST" action=""><div class="form-group"><label for="title" class="control-label col-xs-12 col-sm-2">{:__('名称')}:</label><div class="col-xs-12 col-sm-8"><input type="text" class="form-control" id="title" name="row[title]" value="" data-rule="required;name" /></div></div><div class="form-group" style="display: none"><label for="jumpurl" class="control-label col-xs-12 col-sm-2">{:__('跳转链接')}:</label><div class="col-xs-12 col-sm-8"><input type="text" class="form-control" id="jumpurl" name="row[jumpurl]" autocomplete="off" value="" /></div></div><div class="form-group"><label for="c-image" class="control-label col-xs-12 col-sm-2">{:__('上传图片')}:</label><div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-image" class="form-control" size="50" name="row[thumb]" type="text" value=""><div class="input-group-addon no-border no-padding"><span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span><span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span></div><span class="msg-box n-right"></span></div><ul class="row list-inline plupload-preview" id="p-image"></ul></div></div><div class="form-group"><label for="weigh" class="control-label col-xs-12 col-sm-2">{:__('排序')}:</label><div class="col-xs-12 col-sm-8"><input type="number" class="form-control" id="weigh" name="row[weigh]" value="1" data-rule="required;weigh" /></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('状态')}:</label><div class="col-xs-12 col-sm-8">{:build_radios('row[status]', ['1'=>__('正常'), '0'=>__('隐藏')])}</div></div><div class="form-group hidden layer-footer"><label class="control-label col-xs-12 col-sm-2"></label><div class="col-xs-12 col-sm-8"><button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button><button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button></div></div>
</form>

php代码：

/*** 信息配置* @return mixed*/public function setting(){if (\request()->isPost()){$this->error('ccc');}return $this->fetch();}

三：使用fastadmin里的弹窗导出数据为Excel

直接url访问，不能使用ajax，因为ajax要求返回数据，和PHPExcel一会浏览器输出冲突！将数据作为参数

js代码：

1、在Table.api.init()里面添加

out_url: 'appletls/user/out',

2、绑定方法

out: function () {Controller.api.bindevent();
},

view代码：

注意：禁用了role=‘form’后无法使用系统自带的时间选择插件，需要引入layui的时间选择插件

https://www.layui.com/laydate/

<style type="text/css">#schedulepicker {padding-top:7px;}
</style>
<form id="out-form"  class="form-horizontal"   data-toggle="validator" method="POST" action="out"><div class="form-group"><label for="begintime" class="control-label col-xs-12 col-sm-2">{:__('Begin time')}:</label><div class="col-xs-12 col-sm-6"><input type="text" class="form-control datetimepicker" id="begintime"  name="row[begintime]" value="" data-rule="{:__('Begin time')}:required" size="6" /></div></div><div class="form-group"><label for="endtime" class="control-label col-xs-12 col-sm-2">{:__('End time')}:</label><div class="col-xs-12 col-sm-6"><input type="text" class="form-control datetimepicker" id="endtime" name="row[endtime]" value="" data-rule="{:__('End time')}:required;match(gte, row[begintime], datetime)" size="6" /></div></div><div class="form-group hidden layer-footer"><label class="control-label col-xs-12 col-sm-2"></label><div class="col-xs-12 col-sm-8"><button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button><button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button></div></div>
</form><script src="/assets/layui/laydate/laydate.js"></script>
<script>//执行一个laydate实例//指定元素laydate.render({elem: '#begintime' ,type: 'datetime'});//指定元素laydate.render({elem: '#endtime' ,type: 'datetime'});
</script>

php代码：

/*** 导出所有用户数据* 直接url访问，不能使用ajax，因为ajax要求返回数据，和PHPExcel一会浏览器输出冲突！将数据作为参数* @throws \PHPExcel_Exception* @throws \PHPExcel_Writer_Exception* @throws \think\Exception* @throws \think\db\exception\DataNotFoundException* @throws \think\db\exception\ModelNotFoundException* @throws \think\exception\DbException*/public function out(){if (\request()->isPost()){//dump(\request()->param());exit();$result = Db::name('applet_user')->field('id,name,mobile,colleges')->order('id desc')->select();$filename = "用户测评数据";vendor('PHPExcel.PHPExcel');$objPHPExcel = new \PHPExcel();//设置保存版本格式$objWriter = new \PHPExcel_Writer_Excel5($objPHPExcel);//设置表头$objPHPExcel->getActiveSheet()->setCellValue('A1','id');$objPHPExcel->getActiveSheet()->setCellValue('B1','姓名');$objPHPExcel->getActiveSheet()->setCellValue('C1','手机');$objPHPExcel->getActiveSheet()->setCellValue('D1','意向院校');$objPHPExcel->getActiveSheet()->setCellValue('E1','测评分值');$objPHPExcel->getActiveSheet()->setCellValue('F1','学历背景得分');$objPHPExcel->getActiveSheet()->setCellValue('G1','企业背景得分');$objPHPExcel->getActiveSheet()->setCellValue('H1','收入水平得分');$objPHPExcel->getActiveSheet()->setCellValue('I1','发展潜力得分');$objPHPExcel->getActiveSheet()->setCellValue('J1','管理经验得分');$objPHPExcel->getActiveSheet()->setCellValue('K1','英语水平得分');$objPHPExcel->getActiveSheet()->setCellValue('L1','背景优势');$objPHPExcel->getActiveSheet()->setCellValue('M1','背景劣势');$objPHPExcel->getActiveSheet()->setCellValue('N1','匹配院校');//改变此处设置的长度数值$objPHPExcel->getActiveSheet()->getColumnDimension('A')->setWidth(10);$objPHPExcel->getActiveSheet()->getColumnDimension('B')->setWidth(12);//输出表格$str = '用户未进行测评';foreach ($result as $key => &$val) {$count = Db::name('applet_answer')->where(['uid'=>$val['id'],'isdelete'=>0])->count();$i=$key+2;//表格是从2开始的if ($count>=1){$row = SubjectService::getResult($val['id'],'');//score--1学历背景 2企业背景 3收入水平 4发展潜力 5管理经验  6英语水平//优势$advan = $row['advan'] ? implode('、',$row['advan']) : '暂无优势';$inferi = $row['inferi'] ? implode('、',$row['inferi']) : '暂无劣势';$colllist = $row['colllist'] ? implode('、',array_column($row['colllist'],'title')) : '无匹配院校';//$score = Db::name('applet_answer')->where(['uid'=>$val['id'],'isdelete'=>0])->sum('score');//dump($row);exit();$objPHPExcel->getActiveSheet()->setCellValue('A'.$i,$val['id']);$objPHPExcel->getActiveSheet()->setCellValue('B'.$i,$val['name']);$objPHPExcel->getActiveSheet()->setCellValue('C'.$i,$val['mobile']);$objPHPExcel->getActiveSheet()->setCellValue('D'.$i,$val['colleges']);$objPHPExcel->getActiveSheet()->setCellValue('E'.$i,$row['totalscore']);$objPHPExcel->getActiveSheet()->setCellValue('F'.$i,$row['score'][0]);$objPHPExcel->getActiveSheet()->setCellValue('G'.$i,$row['score'][1]);$objPHPExcel->getActiveSheet()->setCellValue('H'.$i,$row['score'][2]);$objPHPExcel->getActiveSheet()->setCellValue('I'.$i,$row['score'][3]);$objPHPExcel->getActiveSheet()->setCellValue('J'.$i,$row['score'][4]);$objPHPExcel->getActiveSheet()->setCellValue('K'.$i,$row['score'][5]);$objPHPExcel->getActiveSheet()->setCellValue('L'.$i,$advan);$objPHPExcel->getActiveSheet()->setCellValue('M'.$i,$inferi);$objPHPExcel->getActiveSheet()->setCellValue('N'.$i,$colllist);}else{$objPHPExcel->getActiveSheet()->setCellValue('A'.$i,$val['id']);$objPHPExcel->getActiveSheet()->setCellValue('B'.$i,$val['name']);$objPHPExcel->getActiveSheet()->setCellValue('C'.$i,$val['mobile']);$objPHPExcel->getActiveSheet()->setCellValue('D'.$i,$val['colleges']);$objPHPExcel->getActiveSheet()->setCellValue('E'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('F'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('G'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('H'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('I'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('J'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('K'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('L'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('M'.$i,$str);$objPHPExcel->getActiveSheet()->setCellValue('N'.$i,$str);}}header("Pragma: public");header("Expires: 0");header("Cache-Control:must-revalidate, post-check=0, pre-check=0");header("Content-Type:application/force-download");header("Content-Type:application/vnd.ms-execl");header("Content-Type:application/octet-stream");header("Content-Type:application/download");header('Content-Disposition:attachment;filename='.$filename.'.xls');header("Content-Transfer-Encoding:binary");$objWriter->save('php://output');}return $this->fetch();}

四：使用layui自定义弹窗【不推荐】

如下图：

第一步：引入layui的css和js文件

第二步：在对应的文件中添加按钮和弹出层表单代码

1、按钮
<a href="javascript:;" class="btn btn-danger btn-import" title="导入" id="saveSiteconf" data-url=""  data-multiple="false" initialized="true" style="position: relative; z-index: 1;"><i class="fa fa-upload"></i> SEO配置 </a>2、表单
<div class="layui-row" id="test" style="display: none;"><div class="layui-col-md10"><form class="layui-form" id="addEmployeeForm" ><div class="layui-form-item"><label class="layui-form-label">ID信息：</label><div class="layui-input-block"><input type="text" name="id" id="seo_id" value="{$website.id}" class="layui-input seo_id" readonly="readonly"></div></div><div class="layui-form-item"><label class="layui-form-label">网站域名：</label><div class="layui-input-block"><input type="text" name="seo_url" id="seo_url" value="{$website.seo_url}" class="layui-input seo_url"></div></div><div class="layui-form-item"><label class="layui-form-label">网站名称：</label><div class="layui-input-block"><input type="text" name="seo_name" id="seo_name" value="{$website.site_name}" class="layui-input seo_name"></div></div><div class="layui-form-item"><label class="layui-form-label">网站标题：</label><div class="layui-input-block"><input type="text" name="seo_title" value="{$website.seo_title}"  class="layui-input seo_title"></div></div><div class="layui-form-item"><label class="layui-form-label">网站关键词：</label><div class="layui-input-block"><input type="text" name="seo_keywords" value="{$website.seo_keywords}"  class="layui-input seo_keywords"></div></div><div class="layui-form-item"><label class="layui-form-label">网站描述：</label><div class="layui-input-block"><input type="text" name="seo_description" value="{$website.seo_description}"  class="layui-input seo_description"></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="button" class="layui-btn layui-btn-normal" id='activeBtn' >完成</button><button type="button" class="layui-btn layui-btn-normal  layui-layer-close layui-layer-close1" id='close' >关闭</button></div></div></form></div>
</div>

第三步：写js代码，在获取input的值时需要注意

// 显示弹出层
$('#saveSiteconf').click(function()
{var sid = $(this).data('id');// 获取点击项的id/* 再弹出添加界面 */layer.open({type:1,title:"网站SEO信息配置",skin:"myclass",area:["50%"],content:$("#test").html()});
});// 为什么layer中弹出层内容点击事件不起作用
//https://blog.csdn.net/xiao__jia__jia/article/details/79337312
//click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的
$(document).on('click', '#activeBtn', function() {//layer.msg('响应点击事件');//http://www.itdaan.com/blog/2018/05/29/872e4813cc644912d53e5949f970b98c.htmlvar id       = $(".seo_id").eq(1).val();var seo_url  = $(".seo_url").eq(1).val();var seo_name = $(".seo_name").eq(1).val();// 获取生成的第二个input的值var seo_title = $(".seo_title").eq(1).val()var seo_keywords = $(".seo_keywords").eq(1).val()var seo_description = $(".seo_description").eq(1).val()$.post("zhuhai/categorys/saveSiteconf", {id: id,seo_url:seo_url,site_name:seo_name,seo_title:seo_title,seo_keywords:seo_keywords,seo_description:seo_description, }, function (data) {var num = data.code==200 ? 1 : 2;layer.msg(data.msg,{icon:num,shade:0.3,offset: '40%',time:2000});//layer.close(index); //如果设定了yes回调，需进行手工关闭setTimeout(function(){//刷新location.reload();},1000);});
});

第五步：编写对应的操作

fastadmin实现弹窗相关推荐

FastAdmin必坑指南《基础篇》
从2022年7月25日,开始.以每三天一篇的文章来更新所遇到的额问题.解决当前大家比较关系的热点问题,如果您也有需求,者急解决问题.可以私信我,我看见就会及时处理问题.小编总结的问题,不分先后仅供参考 ...
fastadmin 加入layui图片弹窗
在backend-init.js 中加入 $('body').on('click', '.img-sm', function () {var img = new Image();var imgWidt ...
FastAdmin 极速后台管理框架（三周年）V1.0.0.20190410_beta
开发四年只会写业务代码,分布式高并发都不会还做程序员? >>> FastAdmin 极速后台框架(三周年)V1.0.0.20190410_beta FastAdmin 三周岁了, ...
fastadmin实现导出Excel和导入Excel数据
第一:导出数据为Excel 注意:直接url访问,不能使用ajax,因为ajax要求返回数据,和PHPExcel一会浏览器输出冲突!将数据作为参数 1.导出所有用户数据代码:在index.html文 ...
Fastadmin操作
自定义关闭事件 parent.window.$(".layui-layer-iframe").find(".layui-layer-close").on('cl ...
fastadmin表格
虚无缥缈的云博客园首页新随笔联系管理订阅随笔- 245 文章- 0 评论- 5 一张图解析FastAdmin中的表格列表的功能大图: 1.默认生成的CRUD是没有菜单名称和描述显示 ...
初识fastAdmin表格列表的功能
FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架.优点见开发文档 https://doc.fastadmin.net/docs 在这里上传几张优秀的快速入门图: 一 ...
FastAdmin 基本知识流程一栏
fastadmin进阶安装:出现登陆页无法显示:可能是php的gd2扩展未开启 FastAdmin 在 Nginx 中的配置用的是AdminLTE后台模板require.js.less.Bow ...
FastAdmin插件开发辅助增强插件
本人开发的FastAdmin插件开发辅助增强插件不改变官方的开发习惯,但更丝滑,尽最大的努力生成你想要的代码非常重要非常重要非常重要写在最前面是为了不要漏了,导致插件没有正常工作. 编写代码 ...

fastadmin实现弹窗

fastadmin实现弹窗相关推荐

最新文章

热门文章