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();
},

如下图：

二：使用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.html
       var 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);
                });
});

第五步：编写对应的操作