PHP
推荐链接
build_select
第一个参数group[]是生成的select的name,后台获取值就要用$this->request->post(“group/a”);
第二个参数$groupdata是后台传到前台的数组,select里面的所有option就是根据这个数组的值来的,数组中的每一个key=>value键值对的key对应前台option的value属性,键值对的value对应前台用户看到的option的值;
第三个参数一般用设置选中;
第四个参数就是一些属性了,包括’multiple’=>''是否允许多选,‘data-rule’=>'required’是否为必选等
表单下拉框动态刷新
$('.selectpicker').selectpicker('render');
Form.api.bindevent($("form[role=form]"));
按钮button相关事件
自定义点击按钮事件 btn-click
此处例子为点击弹出窗口,输入文字,执行ajax请求
{
name: 'shield',
text: '完成',
icon: 'fa fa-check-circle fa-fw',
classname: 'btn btn-xs btn-success btn-click',
click:function(e,s) {
layer.prompt({title:"填写奖金数值"},function(val, index){
if(!val || val ==0 ){
layer.msg("请先填写正确的奖金数值!");
return;
}
if (isNaN(val)) {
layer.msg("请输入数字!");
return;
}
$.ajax({
type: "post",
url: "survey/over",
data: {
ids:s.id,
bonus:val
},
dataType: "json",
success: function (response) {
if(response.code == 2){
layer.msg(response.msg)
}
else{
layer.close(index);
table.bootstrapTable('refresh');
}
}
});
});
return false
},
refresh: true,
visible: function (row) {
//返回true时按钮显示,返回false隐藏
// console.log(row)
return !row.status;
}
},
通用搜索功能
{field: 'createtime', title: __('Create Time')},
operate:'=' //用于查询时的操作符,默认为=,为false表示禁用此字段的通用搜索,支持!=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
searchList: //用于渲染列表的数据,支持的格式有JSON Array、JSON Object、$.getJSON、Function
addclass: //用于给input或select添加额外的class属性
type: //用于定义input文本框的类型,默认为text
data: //用于给input或select添加额外的属性
renderDefault: //是否根据URL中的参数填充默认值,默认为`true`,支持的值有`false/true`
表格刷新
'$("#table") 这个就是表格的ID'
//刷新表格
$("#table").bootstrapTable('refresh', {});
//静默刷新
$("#table").bootstrapTable('refresh', {silent: true });
//父表格刷新
parent.$("#table").bootstrapTable('refresh', {});
//layui在iframe页面关闭自身
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
表格取消默认刷新,只有点击搜索按钮才可以正常搜索
queryParams:function (params){
console.log('params',params);
if(isTable){
//如果正常查询则必须要返回对象,不然条件搜索就会失效
return params
}
return isTable;
},
onCommonSearch:function (params){
isTable = true;
return params;
},
表格自定义搜索select框联动
//注意模板名称和id
'HTML'
<script id="dept1Idtpl" type="text/html">
<div class="row" id = 'area-select'>
<div class="form-inline" data-toggle="cxselect" data-selects="">
<select class="first form-control" id="dept1Id" name="row[dept1Id]" style="margin-left: 15px;width: 224px;">
<option value="">请选择</option>
{foreach $organization as $key=>$val}
<option value="{$val.id}">{$val.id}--{$val.organization_name}</option>
{/foreach}
</select>
</div>
</div>
</script>
<script id="dept2Idtpl" type="text/html">
<div class="row" id = 'sale-select'>
<div class="form-inline" data-toggle="cxselect" data-selects="">
<select class="first form-control sales" name="row[dept2Id]" id="dept2Id" style="margin-left: 15px;width: 224px;">
</select>
</div>
</div>
</script>
'JS'
{field: 'dept1Name', title: '所属公司', width: 100,
searchList: function (column) {
return Template('dept1Idtpl', {});
},
},
{field: 'dept2Name', title: '事业部', width: 100,
searchList: function (column) {
return Template('dept2Idtpl', {});
},
},
queryParams:function (params){
if (isTable){
if ($('#dept1Id').val()){
//如果希望追加搜索条件,可使用
var filter = params.filter ? JSON.parse(params.filter) : {};
var op = params.op ? JSON.parse(params.op) : {};
filter.dept1Id = $('#dept1Id').val();
op.dept1Id = '=';
if ($('#dept2Id').val()){
filter.dept2Id = $('#dept2Id').val();
op.dept2Id = '=';
}
params.filter = JSON.stringify(filter);
params.op = JSON.stringify(op);
}
console.log('params',params);
return params;
}
return isTable;
},
$('#dept1Id').change(function (data){
if ($(this).val().length > 0){
$.ajax({
url: "getOrganizationPid",
type: 'post',
data: {'pid':$(this).val()},
dataType: 'json',
beforeSend: function (xhr) {
this.layerIndex = Layer.msg('加载中...', {
icon: 16,
shade: 0.1
});
},
complete: function () {
Layer.close(this.layerIndex);
},
success: function (data) {
if (data.length > 0){
let dept2 = ' <option value="">请选择事业部</option>';
data.forEach(item => {
dept2 += "<option value="+item.id +">"+ item.id + "--" + item.organization_name+"</option>";
});
$('#dept2Id').html(dept2);
}
}, error: function (error) {
}
});
}else{
$('#dept2Id').html('');
}
});
子页面获取父页面参数
//根据链接获得值,ids是父页面点击按钮后生成子页面弹窗时候携带的值
Fast.api.query('ids')
弹窗
打开弹窗
//打开一个弹窗并接收回传数据
Fast.api.open("https://www.fastadmin.net", "FastAdmin", {
callback:function(value){
在这里可以接收弹出层中使用`Fast.api.close(data)`进行回传数据
}
});
//表单提交成功后不关闭弹窗
Form.api.bindevent("form[role=form]", function(data, ret){
//这里只要返回false,就会阻止我们的弹窗自动关闭和自动提示
return false;
});
关闭弹窗
layer.confirm('确定删除本条信息?', {icon: 3, title: '提醒'}, function (index){});
// 传入 function 的 index 来关闭弹窗
layer.close(index);
//关闭弹窗
var closeIndex = parent.layer.getFrameIndex(window.name);
layer.close();//layui.layer.close();
parent.layer.close(closeIndex);
关闭当前弹窗并打开新弹窗
Backend.api.open('task/info?id=' + id, '任务详情', {area: ['100%', '100%']});
parent.Backend.api.open('task/info?id=' + id, '任务详情', {area: ['100%', '100%']});
表单
表单的保存
' <button type="submit" id="addSubmit" class="btn btn-primary btn-embossed">{:__('Save')}</button>'
Form.api.bindevent($("form[role=form]"), function(data, ret){
Toastr.success("成功");
//这里只要返回false,就会阻止我们的弹窗自动关闭和自动提示
return false;
}, function(data, ret){
Toastr.success("失败");
}, function(success, error){
// $("#collection-table").bootstrapTable('refresh', {silent: true });
// return true;
// Form.api.submit($("form[role=form]"),null, null, function () {
// // beforeSubmit 回调函数,在提交之前触发
// // 获取表单元素的引用
// // 手动触发表单验证规则
// $(this).trigger("validate");
// // 检查表单验证结果
// var valid = $(this).find(".has-error").length === 0;
// console.log('valid',valid);
// if (valid){
// //成功后做一些数据处理,return true或者false 不会影响向后端提交
// }else {
// return false;
// }
// });
return true;
});
通过点击按钮手动执行表单的保存,验证,弹窗
$(document).on('click', '#addSubmit', function(data) {
console.log('点击按钮');
Form.api.submit($("form[role=form]"), null, null, function () {
// beforeSubmit 回调函数,在提交之前触发
// 获取表单元素的引用
// 手动触发表单验证规则
$(this).trigger("validate");
// 检查表单验证结果
var valid = $(this).find(".has-error").length === 0;
console.log('valid',valid);
if (valid){
//成功后做一些数据处理,return true或者false 不会影响向后端提交
}else {
return false;
}
}
);
});
禁用模板布局
/**
在application/common/controller/Backend.php里面的 _initialize() 方法里面有
// 如果有使用模板布局
if ($this->layout) {
$this->view->engine->layout('layout/' . $this->layout);
}
这个就是默认的模板布局,默认 $layout = 'default';
*/
//全局禁用模板布局
//继承了Backend类之后,手动重写$layout变量,并且设置为空
protected $layout = 'default';
//方法里面单独禁用模板布局(注意清理缓存,不然可能不起作用)
$this->view->engine->layout(false);
后台不需要验证权限的接口配置
//在需要配置的控制器下面重写$noNeedLogin变量,'flow_photo','api_getflowxml' 是控制器里面的方法名称
protected $noNeedLogin = ['flow_photo','api_getflowxml'];