一:点击列表某按钮实现弹窗
如下图:
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);
});
});
第五步:编写对应的操作